Page 1 of 1

How change selection colors on themes?

Posted: Sun Mar 10, 2024 1:08 pm
by pcfan
Hello, I am under mx xfce, I wonder how can I activate the option to change selection colors on themes. This feature is included in xlde desktop and I would like to add something alike into xfce.

Code: Select all

[CODE]System:
  Kernel: 6.1.0-18-amd64 [6.1.76-1] arch: x86_64 bits: 64 compiler: gcc v: 12.2.0
    parameters: BOOT_IMAGE=/boot/vmlinuz-6.1.0-18-amd64 root=UUID=<filter> ro quiet splash
  Desktop: Xfce v: 4.18.1 tk: Gtk v: 3.24.36 info: xfce4-panel wm: xfwm v: 4.18.0 vt: 7
    dm: LightDM v: 1.26.0 Distro: MX-23.2_x64 Libretto January 21  2024 base: Debian GNU/Linux 12
    (bookworm) 
Thanks in advance.

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 1:55 pm
by MXRobo
Not sure what you're looking for, but maybe:
MX-Tweak – Theme – Themes - - Application
MX-Tweak – Theme – Themes - - Window Manager (Choose a thick-border one
MX-Tweak – Theme – Themes - - Icons

Also, which are also available from within MX-Tweak
Appearance – Style, and Icons
Window Manager > Style

Personally:
Themes - Matcha-dark-aliz, mx-comfort-dark-thick-border, Papirus-mxdarkblue

Papirus Folder Colors (recently added app)

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 2:16 pm
by pcfan
Hi thanks for your reply, I mean if I chose a Theme lets say mx-comfornt-dark, I would like to change its color blue (for selection) let say for green.
Image

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 3:08 pm
by Charlie Brown
Though this is not the way you ask (as it's the manual way, not that tool): i.e.

Code: Select all

/usr/share/themes/mx-comfort-dark/gtk-3.0/dist/gtk.css

/usr/share/themes/mx-comfort-dark/gtk-3.0/dist/gtk-dark.css

Code: Select all

@define-color theme_selected_bg_color #0f56d9;


Also:

Code: Select all

/usr/share/themes/mx-comfort-dark/gtk-2.0/gtkrc

Code: Select all

gtk-color-scheme = "selected_bg_color: #0f56d9"

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 3:17 pm
by MXRobo
the option to change selection colors on themes.
Well 'duh' on me. :bagoverhead:
Although that's why I wasn't sure, I haven't seen any utility like that, and since you had it in lxde - good luck!

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 5:18 pm
by pcfan
Charlie Brown wrote: Sun Mar 10, 2024 3:08 pm Though this is not the way you ask (as it's the manual way, not that tool): i.e.

Code: Select all

/usr/share/themes/mx-comfort-dark/gtk-3.0/dist/gtk.css

/usr/share/themes/mx-comfort-dark/gtk-3.0/dist/gtk-dark.css

Code: Select all

@define-color theme_selected_bg_color #0f56d9;


Also:

Code: Select all

/usr/share/themes/mx-comfort-dark/gtk-2.0/gtkrc

Code: Select all

gtk-color-scheme = "selected_bg_color: #0f56d9"
Thank you! I will try as soon as possible and come back.....

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 6:09 pm
by pcfan
@Charlie Brown Do I have to run this on console? Also would this apply to "Arcdark" theme aswell?

UPDATE. I got it now, sorry for the question.

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 7:03 pm
by pcfan
well I am sorry to say, I follow the instructions, edited each file as root , saved changes and rebooted but it didn't work in general It just work with some applications like "virtual box" or "audacious", maybe I missed something?

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 7:11 pm
by Charlie Brown
If you like try it the same way on non-MX themes, it may work.

Once there was a similar thread and I remember @dolphin_oracle and/or @asqwerth said editing these won't be enough, something more needed (specifically for MX-comfort theme(s) )

(When it was gtk2 I used to do it that way, say, modifying Blackbird theme and creating my own ... )

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 10:00 pm
by artytux
Would making a copy then *Save As* the new copy, name changed to eg= mx-comfort-dark to mx-comfort-dark-pcfan and work on the second one the copy,
Have you tried that maybe ?

Re: How change selection colors on themes?

Posted: Sun Mar 10, 2024 11:16 pm
by asqwerth
Charlie Brown wrote: Sun Mar 10, 2024 7:11 pm If you like try it the same way on non-MX themes, it may work.

Once there was a similar thread and I remember @dolphin_oracle and/or @asqwerth said editing these won't be enough, something more needed (specifically for MX-comfort theme(s) )

(When it was gtk2 I used to do it that way, say, modifying Blackbird theme and creating my own ... )
You will need to check the css files of every theme. They may be created/structured differently. Definitely Arc is structured very differently from MX-comfort.

In addition, for the comfort themes, because the base was made first in Oomox [now called Themix], the theming in the readable css files are not what the theme reads. You kind of have to do all your theming changes in the readable files, then rebuild it into a binary blob that is found in one of the subfolders of the theme. @dolphin_oracle figured it out; I don't know how it was done.


Automated "change accent colour" facilities tend to be a function of the desktop environment. You have it in the newer Plasma and Gnome desktops (the latter DE needs a specific gnome shell extension I think.)

XFCE does not have that, so either :

(1) you just apply a different theme with a different accent colour that you like, eg some themes like Numix Black Colours https://www.gnome-look.org/p/1335655 [ or check out themes made by Vinceliuice ] come in a range of colours. I believe all of Vinceliuice's themes, including the matcha themes, are made originally from an Arc theme base, for what it's worth.

Matcha theme (comes in blue, green, red, light green accents) is great and I use it a fair bit. He doesn't really bother with xfwm4 border themes though, thus he just provides super thin and ungrabbable Arc-looking border themes. So if you use his themes, just pair it with a more grabbable xfce border theme, like the thick Arc border theme that MX has.

or

(2) you manually edit a theme you want to use.

I have tried editing the css files in matcha-dark-azul to have MX-comfort-blue accents. It is fairly doable compared to editing mx comfort itself, but some of the graphical assets (files) need more refined editing changes in a graphics editor than I am able to do. Matcha uses many more graphical assets than MX-comfort.


or

(3) you use oomox/themix to create a theme with the colours you want.

Caveat: the Arc-based themes in oomox [ https://github.com/themix-project/themix-gui ] no longer work (deprecated) so you are left with mainly a numix base theme/setup. Plus the numix base it comes with does not make themes with gtk4 folders, so going forward the created themes won't theme applications that are built with gtk4.

I have yet to try the base16 plugin that it comes with that apparently does have some gtk4 support.

Re: How change selection colors on themes?

Posted: Mon Mar 11, 2024 11:38 am
by pcfan
I'll try on virtual machine as soon as possible. Thank you both!

Re: How change selection colors on themes?

Posted: Fri Jul 05, 2024 7:54 pm
by pcfan
artytux wrote: Sun Mar 10, 2024 10:00 pm Would making a copy then *Save As* the new copy, name changed to eg= mx-comfort-dark to mx-comfort-dark-pcfan and work on the second one the copy,
Have you tried that maybe ?
Sorry it took me so long to come back. I tried to do this. I have tried now with Arc Dark theme. I couldn't achieve the desired result. Nothing happens.
Maybe I don't Know what GTK version is run by the system to match with the theme.
I also don't know what is the manager for my desktop (sorry if I am not saying this properly, I don't know how to translate). I am under xfce . On linux mint I had an option to choose between managers, comptom, metacity, etc. never understood it well...

Re: How change selection colors on themes?

Posted: Fri Jul 05, 2024 8:45 pm
by artytux
I got a theme to change several attempts ((not very good results) actually remember one was bad really bad messed it up) so instead went and found other themes and tried them, kept and used to alternate between them changing themes, the time spent, that time spent changing and reading up what and how to do for me better used for other projects, now I just only change with what there is.
If you persist then good luck and if you want to, please share the theme (if you want to), don't you think that an easy to understand tutorial would be a good find, now that's sadly lacking.

Re: How change selection colors on themes?

Posted: Fri Jul 05, 2024 11:51 pm
by CharlesV
I have found there is really three things that make a huge difference here, asqwerth touched upon it but maybe I can shed a little more light.

Each theme I have worked with has three parts:
1) The window, the shape, color, transparency, and its controls ( Window Manager Theme )
2) The colors ( background, foreground and more!) of all the *rest* that you see and use. ( dialogs, buttons, highlights, etc.) ( Application Theme )
3) The light / dark base!

I have found that #1 is *very* easy to manipulate. #2 can be much harder and requires more finesse . And #3 while it can be changed, it really manipulates the rest. (So, better left alone really.)

The best process I have found is to find a theme that has the base ( light or dark), then #2 the 'colors' of the rest, as close to what you want as possible. And *then* you can work on #1 to bend it to what your after.

If you look at MX Tweak on the Theme tab, you will see Application, Windows Manager and then Icons. And Choosing a Window Manager first, then the Application can change radically what you are seeing / how things work. Once you get close with these, then you can work which ever piece you need.

As an example: I created a theme called Piranah, which is a rounded window frame with larger 'grab bars' on the sides, different window controls and is a Teal ( blue) when active and then Dark Gray when not active. That is highly tweaked, to be as I want it. Then, I have chosen a Greybird-mx as the Application - which provides a grey 'face' on windows, and a perfect combo for the Piranah theme.

I did not have to modify the Greybird-mx part, but spent a lot of time creating the Piranah theme. All the highlights and css code is in the Greybird-mx, and this is where that would be changed.

Re: How change selection colors on themes?

Posted: Sat Jul 06, 2024 12:40 am
by artytux
Maybe I don't get here as often lately when I do, there's more to learn about and this is no exception,
Part page saved as PDF with for link as a reminder, nothing around here will slowdown until end of year.
Thanks to @asqwerth for the info (will need to reread) and @CharlesV for the extra info, very helpful.
Appreciated

Re: How change selection colors on themes?

Posted: Sat Jul 06, 2024 10:29 am
by ThemetresAtrometos
Go to /usr/share/themes/
Copy the theme you want to change.
Give to the folder the name you want.
Open the file index.theme and change the name. Use the same name as the folder.

Now inside the folder gtk-3.0 open gtk.css.
At the beginning or at the end, usually at the end, you will find an index of colours used. Each line begins with "@define-color"
The interesting part for you is the line:

@define-color theme_selected_bg_color #1B5F9E;

where #1B5F9E is the code of the colour used.

Now you must open with a text editor .css, .scss and gtkrc files inside the subfolders and replace everywhere #1B5F9E with the code of the new colour you want to set.

Personally I use Mousepad because it has a "Find and replace" function which applies instantly the change to all the files opened.

This applies to most themes but not all. A different structure makes the customizing process different.

When a theme uses graphical assets these will not follow the change. Graphical assets are used mainly on menus.

Re: How change selection colors on themes?

Posted: Sat Jul 06, 2024 11:39 am
by pcfan
Hi guys it is so nice reading you. So many information. Everything seems to be helpful, so I don't know which one to choose as "accepted" :)
I have promised @asqwerth that I would try all of this on virtual machine but I didn't have time. Nwo I am reading him for second time and remembering I forgot :P

Thank you @CharlesV for such a detailed work arround! To tell you the truth following your tips I managed to achieve more or less what I wanted, so now I have set MX tweak like this Windows Manager "greybird-thick-border", then "applications" Numix-Black-Olive" and played arround with Papirus Icon folder. I am quite happy with the results, which doesn't mean I will continue trying with all the options given here.

That is why I don't mark this topic as solved yet.

Thank you all so very much for your dedicated effort and time in helping me. :hug:

Re: How change selection colors on themes?

Posted: Sat Jul 06, 2024 11:52 am
by CharlesV
Glad to hear your getting closer. And yes, you may find once you get close that your ready to copy themes and then start modifying to finish it off.

Re: How change selection colors on themes?

Posted: Sun Jul 07, 2024 5:03 pm
by Stuart_M
pcfan wrote: Sun Mar 10, 2024 1:08 pm Hello, I am under mx xfce, I wonder how can I activate the option to change selection colors on themes. This feature is included in xlde desktop and I would like to add something alike into xfce.
I've read this thread several times and I was able to do what you want, at least what I believe you were asking for. If not then perhaps it will be useful to other readers.

I got the feeling that you wanted the change the Ark-Dark theme so that highlighting text would be green vice the default blue, so I used that theme with a green highlight color in my testing (you did not state the hex color code so I used a shade of green that seemed appropriate - just change the code in Steps 1 and 2 if a different color is wanted).

I was able to do this with my MX-23.3 Xfce test installation by simply modifying two files in /usr/share/themes/Arc-Dark/.

This is how I did it:
  1. Go to /usr/share/themes/Arc-Dark/gtk-2.0/gtkrc > edit Line 7 to change the highlight color - there are only the 6 characters (009900) to change - everything else in that line remains the same. To do that you'll need root access. I find it easiest to just use Featherpad with User access and when the file is saved a prompt will appear asking for the root password.

    After the edit is complete the line should look like the line in the below code window in this step.

    In my testing I used a medium-dark green color (#009900). If you want another color just change that hex color code.

    Code: Select all

    gtk-color-scheme = "selected_bg_color: #009900"
    This step takes care of all the gtk-2.0 applications such as Featherpad and MX Tweak, etc.
  2. Go to /usr/share/themes/Arc-Dark/gtk-3.0/gtk.css and copy the one line of text from the below code window into the gtk.css file.

    Note that the gtk.css file contains only one line that will get the theme information from. The text that is being pasted in this step is only to modify the color from that code for highlighting selected text. I think this is the easiest way to do this.

    Another way would be to (1) go to /usr/share/themes/Greybird-mx/gtk-3.0/gtk.css and (2) copy the entire contents of the gtk.css file (there are over 2,000 lines) and (3) paste it into an empty /usr/share/themes/Arc-Dark/gtk-3.0/gtk.css file. (4) delete the existing (first and original) line, which is @import url("resource:///org/gnome/arc-theme/gtk-main.css"); in the gtk.css file. The information from that one short line is replaced with the entire Greybird-mx gtk.css contents. Actually that is where the line of text in the below code window comes from, which is line 1865 from the Greybird-mx gtk.css file. Both ways work identically, at least as far as I can see, but this method is a little more complicated.

    This is the one line to paste into the gtk.css file:

    Code: Select all

    .view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, popover.background checkbutton:selected, popover.background radiobutton:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: #009900; }
    I have already changed the color (#009900). Just change that Hex color code at the end of the line if you want another color.

    Begin Edit1 9 October 2024: I just realized that this modification does not change the highlight color in Thunar on the left-Pane Tree as can be seen on the first Screenshot below (the highlight color remains the default blue color). To change that highlight color, add the text in the below code window to the code window above:

    Code: Select all

    #MozillaGtkWidget.background > widget > scrolledwindow > textview text selection, .budgie-menu button:checked, window.thunar .sidebar treeview.view:selected, window.thunar .sidebar treeview.view:selected:hover, window.thunar .sidebar treeview.view:active:hover, filechooser placessidebar.sidebar row.sidebar-row.has-open-popup:selected, filechooser placessidebar.sidebar row.sidebar-row:selected, filechooser placessidebar.sidebar row.sidebar-row:selected:hover, filechooser placessidebar.sidebar row.sidebar-row:active:hover {
      background-color: #FF0000;
    }
    See also my Post #12 viewtopic.php?p=793833#p793833 made on 9 October 2024 which details this addition.
    End Edit1:
  3. For the above to take effect just select another theme > select the theme that was just modified. There is no need to log out/in or reboot. Just changing the theme and going back to the theme that was changed is enough.


Note that the Geany text editor does not get the system highlight color when highlighting text. Geany's default is grey. I looked at about 15-20 different applications and every one had correctly changed - Geany was the only one I found that did not.

Just FYI, the following shows a few different applications and what GTK version is used, so you'll have a better idea of which applications will change with GTK-2 or GTK-3:
  • gtk-2.0 applications:

    Featherpad
    MX Tweak
    etc.
  • gtk-3.0 applications (most applications in MX-23 are GTK-3)

    Appearance
    Thunar
    LibreOffice
    Firefox
    etc.


These two Screenshots show the results of this modification using a medium-dark-green color (#009900) for highlighting selected text. MX-23.3 Xfce using the Arc-Dark Application theme and Arc-Dark Window Manager theme:
Ark-Dark_theme_Appearance_Featherpad_Thunar_4.jpg


Note: Don't be fooled by MX Tweak displaying the Greybird-mx Application theme (Greybird-mx is not selected). Arc-Dark is actually the theme being used. The reason MX Tweak shows Greybird-mx is because I was using the "Appearance" application to change themes. The last setting that MX Tweak had used was Greybird-mx and since that time was just inactive on the Desktop when the Snapshot was taken. Everything else is correct.
Ark-Dark_theme_LibreOffice_MX-Tweak_4.jpg

Re: How change selection colors on themes?

Posted: Sat Jul 13, 2024 5:56 pm
by pcfan
@ Stuart_M thank you very much for such a good work, and detailed explanation!.