Editing the Manjaro Matcha-dark-sea theme colours

Support Xfce
1

I’m in the process of editing the colours of the Matcha-dark-sea theme to match more about my desktop. ( testing in VM )
I am having some difficulty locating the code I need to edit and the right config to edit for some settings.
For example the “inactive” buttons and sliders that a user cannot interact with “the darker green” and also the menu at the bottom when hovering the mouse over, the green line under it still shows as green, until clicked.

I made a video to make it clearer. ( I open and close the browser in the video to show the menu bar button when active/inactive ) https://youtu.be/YekBWNWbm0M

Is there an app or something that can edit the matcha theme?

2

Oomox? The app is in AUR.

3

I looked into that yesterday but looks like it only customises some themes. Couldn’t figure out how I could “import” matcha theme. Looks like the theme types it edits is the Arc, Materia and oomox unix-based themes.

4

If you mean the the line under the Window Buttons of the panel when hovering, try this:

.xfce4-panel button:hover {
    box-shadow: inset 0 -2px  #c92cc7;
}

(replace #c92cc7 with the color you prefer)

Judging from the posted video, something like this maybe:

scale trough highlight:disabled, .osd scale trough:hover highlight:disabled, .osd scale trough:focus highlight:disabled, .osd scale trough:backdrop highlight:disabled, .osd scale:hover trough highlight:disabled, .osd scale:hover trough:hover highlight:disabled, .osd scale:hover trough:focus highlight:disabled, .osd scale:hover trough:backdrop highlight:disabled, .osd scale:focus trough highlight:disabled, .osd scale:focus trough:hover highlight:disabled, .osd scale:focus trough:focus highlight:disabled, .osd scale:focus trough:backdrop highlight:disabled {
  background-color: rgba(0, 0, 255, 0.6);
}

(replace rgba(0, 0, 255, 0.6) with the color and opacity you like better)

You can place the above CSS rules in the file ~/.config/gtk-3.0/gtk.css and logout/login to see the changes.

Hope that helps!

5

Thank you,
I will have a look for those values some time tonight and let you know :slight_smile:

You can place the above CSS rules in the file ~/.config/gtk-3.0/gtk.css and logout/login to see the changes.

Do I need to make the css with just those lines of code and place in that directory? Or do i continue to edit the css that’s in /usr/share/themes/Matcha-dark-sea/gtk-3.0/? I’m currently editing the gtk-dark.css in there.

6

You can continue editing this file

but the disadvantage is that whenever you update the Matcha-gtk theme, it will overwrite the changes you have made. This means that you have to create a backup copy of this file in your home directory or in an external drive and copy it over after the theme gets updated.

Personally, I always use the file ~/.config/gtk-3.0/gtk.css for making changes in Gtk themes. This file is not getting touched by any update and has the highest priority in the system regarding CSS rules in Gtk themes.
But I always have in mind to update this file whenever I choose a different theme for Gtk applications (which does not happen often), so that the changes made in this file match the colors of the new theme.

7

I managed to sort this one out with your advice.

This did not do anything unfortunately.

1 Like
8

This CSS rule is for the disabled slider shown in the pavucontrol window in your video. I missed the part you mentioned about the disabled buttons.

To summarize, try the following CSS rules in your ~/.config/gtk-3.0/gtk.css file:

/* Panel Window Buttons */
.xfce4-panel button:hover {
    box-shadow: inset 0 -2px  #c92cc7;
}

/* Disabled sliders and buttons */
/* Disabled sliders */
scale trough highlight:disabled, .osd scale trough:hover highlight:disabled, .osd scale trough:focus highlight:disabled, .osd scale trough:backdrop highlight:disabled, .osd scale:hover trough highlight:disabled, .osd scale:hover trough:hover highlight:disabled, .osd scale:hover trough:focus highlight:disabled, .osd scale:hover trough:backdrop highlight:disabled, .osd scale:focus trough highlight:disabled, .osd scale:focus trough:hover highlight:disabled, .osd scale:focus trough:focus highlight:disabled, .osd scale:focus trough:backdrop highlight:disabled {
    background-color: rgba(0, 0, 255, 0.6);
}
/* Disabled buttons */
button:disabled:active, button:disabled:checked {
    border-color: #0000ff;
    background-color: #0000ff;
    opacity: 0.6;
}

The first part is for the Window Buttons in the panel (which you have already implemented) and the second part is for the disabled sliders/buttons.

Obviously, you have to change the values of colors and opacity according to your liking. You can, also, use solid colors instead of the rgba color model, for example background-color: #0000ff; for blue background.

After editing the said file, logout and login in your system.

A screenshot demonstrating the pavucontrol window after applying the CSS rules:

1 Like
9

You my friend are a hero! I got it to work.

1165×800 56.2 KB

I haven’t obviously done it all because I just don’t know all the lines of code… to be honest they all look the same haha.
But just in case, do you also know the line of code to change the loading bar colour?
I might have already done it by accident as the download progress bar in firefox is the one I chose. :slight_smile:

2 Likes
10

I have no idea what you mean by this. Is it possible to post a screenshot of this element too?

11

Sure, The loading bar when transfer items. I think I should have said “progress” bar.

12

This doesn’t look like a Gtk3 application, but like a Gtk2 one.

If that’s the case, the color of the progress bar is controlled by an image called progressbar.png in the directory /usr/share/themes/Matcha-dark-sea/gtk-2.0/assets/. CSS rules don’t apply in version 2 of the Gtk framework, it has a different kind of approach regarding theming.

You can backup this image, copy it somewhere in your home directory, open it with an image editing software (like Gimp) and change its color to the one matching your edited theme. After saving it, copy it back to the directory I mention above with the exact same name, replacing the default one.

To see if that worked, logout and login back into your system.

Bare in mind that a new version of Matcha-gtk theme will overwrite your image, which means that you must have a copy of it to replace the default one.

By the way, what application are you using as a file manager? Isn’t it the default one, called Thunar?

13

Sorry I just remembered it was a KDE app and I already figured how to edit that about 10 minutes ago.

One more thing for now and I’ll mark this as solved also. What line of code changes the shade of green when you click and drag on the desktop screen. “The light see through shade of green box”

450×800 51 KB

I created a new theme from the original, so I still have the original. I placed the new theme in .themes folder in home directory.

14

That’s a very good approach, especially if you have modified the theme heavily. :+1:

Regarding the selection color in your last screenshot, try something like this in your suctom theme:

rubberband, XfdesktopIconView.view .rubberband, .content-view rubberband, treeview.view rubberband, flowbox rubberband,
.rubberband {
  border: 1px solid #c92cc7;
  background-color: rgba(201, 44, 199,0.5);
}

(change the color for the background and border accordingly)

For the background color, it’s good to retain some opacity, so that can actually see what you’re selecting.

15

Thank you that did the tricks perfectly. I’ll sort out the colours tomorrow.

Thanks a lot for your help. I’m now setting this page to my bookmarks haha

I noticed some smaller stuff that need editing but I’ll try myself to find them, to let you rest. :slight_smile: I think it’s like one or two settings really.

May I send you a message in a few days if I can’t find them either?

1 Like
16

I would recommend making your questions publicly available here in the Forum, so that other users, who might have the same questions, benefit from any possible answers to these questions.

That’s, at least, what I would do. :slightly_smiling_face:

17

Yes i agree. i wont set to solved then until i dont see any green :slight_smile:

Thanks again.

18

Hi bill_t,
I’ve been looking at the final parts that need changing but gave myself a headache looking for what line of code i need to edit.

When i hover the mouse over an item that is already selected but not actually clicked on, it will appear green when the mouse is over it.

And when i click the white small circle on the top of the sliders they will also show as green.
Video showing both points clearer:

19

Hi Mixalis1987!

Try this in your theme or in the ~/.config/gtk-3.0/gtk.css file and change the color accordingly:

scale slider:active {
  background-color: #0000ff;
  border-color: #0000ff;
}

This is a little more difficult to define. Try the following CSS rule, but bare in mind that it will affect a lot of elements in your theme:

.view:selected:hover {
  background-color: #0000ff;
  color: #ffffff;
}

It’s important to replace #0000ff with a color that matches your theme. Maybe you can set it as the pink color shown in your screenshots.

20

Thanks for your help :slight_smile: It worked perfectly.

1 Like