Xfce Forum

Sub domains
 

You are not logged in.

#1 2022-06-03 16:11:22

SpongB0B
Member
Registered: 2022-06-01
Posts: 22

How change window border color of a theme ?

Hi everyone,

I'm trying to change the window border color of a theme that is installed with MX distribution

named mx-comfort-dark

I've been told

to edit

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

I've edited the line with

@define-color wm_border_focused #0f56d9;

with the color that I wanted.. but nothing happen.

then I've been told to compile the theme with this command ->

cd /usr/share/themes/mx-comfort-dark/gtk-3.0/
glib-compile-resources gtk.resource.xml

So

  1. Is this the correct / simpler way ?
      

  2. I don't have glib-compile-resources
    and it seem not available for dw...

    apt list glib*
    
    glib-networking-common/stable,now 2.66.0-2 all [installed,automatic]
    glib-networking-services/stable,now 2.66.0-2 amd64 [installed,automatic]
    glib-networking-tests/stable 2.66.0-2 amd64
    glib-networking/stable,now 2.66.0-2 amd64 [installed,automatic]
    glibc-doc/stable 2.31-13+deb11u3 all
    glibc-source/stable 2.31-13+deb11u3 all

Thank you.

Last edited by SpongB0B (2022-06-03 16:14:45)


Linux noob, plz be kind big_smile

Offline

#2 2022-06-03 18:22:45

KBar
Member
Registered: 2021-11-05
Posts: 689

Re: How change window border color of a theme ?

Is this theme Xfwm4-ready? What are the contents of its directory?

ls -l /usr/share/themes/mx-comfort-dark/

Last edited by KBar (2022-06-03 18:22:54)


Remember to edit the subject of your topic to include the [SOLVED] tag once you're satisfied with the answers or have found a solution (in which case, don't forget to share it as well), so that other members of the community can quickly refer to it and save their time. Pretty please! tongue

Offline

#3 2022-06-05 06:28:13

SpongB0B
Member
Registered: 2022-06-01
Posts: 22

Re: How change window border color of a theme ?

It's look like ->

drwxr-xr-x 2 root root 4.0K Jun  2 06:52 assets
drwxr-xr-x 4 root root 4.0K Jun  2 06:52 cinnamon
drwxr-xr-x 2 root root 4.0K Jun  2 06:52 gtk-2.0
drwxr-xr-x 4 root root 4.0K Jun  2 06:52 gtk-3.0
drwxr-xr-x 2 root root 4.0K Jun  2 06:52 metacity-1
drwxr-xr-x 2 root root 4.0K Jun  2 06:52 openbox-3
drwxr-xr-x 3 root root 4.0K Jun  2 06:52 unity
drwxr-xr-x 2 root root 4.0K Jun  2 06:52 xfwm4
-rw-r--r-- 1 root root  239 Jun  2 06:51 index.theme

Linux noob, plz be kind big_smile

Offline

#4 2025-06-09 09:59:23

SpongB0B
Member
Registered: 2022-06-01
Posts: 22
UnknownFirefox 111.0

Re: How change window border color of a theme ?

hum...

I've look at it again...

in /usr/share/themes/mx-comfort-dark I've look based on the hex color of the default windows border this is: #0F56D9

But I found too many references... in plenty of config file... does someone know which one just change the windows border color ?

FYI a tree (excluding image files give) of /usr/share/themes/mx-comfort-dark give:

.
├── assets
│   ├── all-assets.txt
│   ├── change_dpi.sh
│   ├── sed.sh
│   └── unsed.sh
├── cinnamon
│   ├── assets
│   ├── cinnamon.css
│   ├── scss
│   │   ├── cinnamon.scss
│   │   ├── _extends.scss
│   │   ├── _global.scss
│   │   └── sections
│   │       ├── _accessibility.scss
│   │       ├── _alt-tab.scss
│   │       ├── _calendar.scss
│   │       ├── _desklets.scss
│   │       ├── _dialogs.scss
│   │       ├── _menu.scss
│   │       ├── _notifications.scss
│   │       ├── _overview.scss
│   │       ├── _panel.scss
│   │       ├── _stage.scss
│   │       └── _tile-hud.scss
├── gtk-2.0
│   ├── gtkrc
│   └── gtkrc.hidpi
├── gtk-3.0
│   ├── assets
│   │   ├── all-assets.txt
│   │   ├── change_dpi.sh
│   │   ├── sed.sh
│   │   └── unsed.sh
│   ├── dist
│   │   ├── gtk.css
│   │   └── gtk-dark.css
│   ├── gtk.css
│   ├── gtk-dark.css
│   ├── gtk.gresource
│   ├── gtk.gresource.xml
├── index.theme
├── metacity-1
│   ├── metacity-theme-2.xml
│   ├── metacity-theme-3.xml
├── openbox-3
│   ├── close_hover.xbm
│   ├── close.xbm
│   ├── desk_toggled.xbm
│   ├── desk.xbm
│   ├── iconify_hover.xbm
│   ├── iconify.xbm
│   ├── max_toggled.xbm
│   ├── max.xbm
│   ├── shade_toggled.xbm
│   ├── shade.xbm
│   └── themerc
├── unity
│   ├── modes
└── xfwm4
    ├── bottom-active.xpm
    ├── bottom-inactive.xpm
    ├── bottom-left-active.xpm
    ├── bottom-left-inactive.xpm
    ├── bottom-right-active.xpm
    ├── bottom-right-inactive.xpm
    ├── close-active.xpm
    ├── close-inactive.xpm
    ├── close-prelight.xpm
    ├── close-pressed.xpm
    ├── hide-active.xpm
    ├── hide-inactive.xpm
    ├── hide-prelight.xpm
    ├── hide-pressed.xpm
    ├── left-active.xpm
    ├── left-inactive.xpm
    ├── maximize-active.xpm
    ├── maximize-inactive.xpm
    ├── maximize-prelight.xpm
    ├── maximize-pressed.xpm
    ├── maximize-toggled-active.xpm
    ├── maximize-toggled-inactive.xpm
    ├── maximize-toggled-prelight.xpm
    ├── maximize-toggled-pressed.xpm
    ├── menu-active.xpm
    ├── menu-inactive.xpm
    ├── menu-prelight.xpm
    ├── menu-pressed.xpm
    ├── right-active.xpm
    ├── right-inactive.xpm
    ├── shade-active.xpm
    ├── shade-inactive.xpm
    ├── shade-prelight.xpm
    ├── shade-pressed.xpm
    ├── shade-toggled-active.xpm
    ├── shade-toggled-inactive.xpm
    ├── shade-toggled-prelight.xpm
    ├── shade-toggled-pressed.xpm
    ├── stick-active.xpm
    ├── stick-inactive.xpm
    ├── stick-prelight.xpm
    ├── stick-pressed.xpm
    ├── stick-toggled-active.xpm
    ├── stick-toggled-inactive.xpm
    ├── stick-toggled-prelight.xpm
    ├── stick-toggled-pressed.xpm
    ├── themerc
    ├── title-1-active.xpm
    ├── title-1-inactive.xpm
    ├── title-2-active.xpm
    ├── title-2-inactive.xpm
    ├── title-3-active.xpm
    ├── title-3-inactive.xpm
    ├── title-4-active.xpm
    ├── title-4-inactive.xpm
    ├── title-5-active.xpm
    ├── title-5-inactive.xpm
    ├── top-left-active.xpm
    ├── top-left-inactive.xpm
    ├── top-right-active.xpm
    └── top-right-inactive.xpm

Linux noob, plz be kind big_smile

Offline

#5 2025-06-09 10:51:21

ToZ
Administrator
From: Canada
Registered: 2011-06-02
Posts: 12,022
LinuxFirefox 139.0

Re: How change window border color of a theme ?

Assuming that you are not using CSD windows, you will need to edit the files in mx-comfort-dark's xfwm4 folder to replace the current border color (#0f56d9) with your desired color.

For example, to change the border color to red, you can run the following command in the xfwm4 folder:

for f in *.xpm; do sed -i 's/0f56d9/ff0000/g' $f; done

Then you need to switch to another window manager theme and back again for it to register.


Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Offline

#6 2025-06-10 16:22:13

SpongB0B
Member
Registered: 2022-06-01
Posts: 22
UnknownFirefox 111.0

Re: How change window border color of a theme ?

Thank you @ToZ it worked !!

it changed just the windows border frame like I was looking for...

Now, I would like to do the same for the "focus" color (the highlighted color when we select an option in a list for example )

Weirdly it's the same hex color code: 0f56d9 and it didn't get impacted by the color swap command that you provided... I suppose that color is stored somewhere else then ?


Linux noob, plz be kind big_smile

Offline

#7 2025-06-10 22:37:23

ToZ
Administrator
From: Canada
Registered: 2011-06-02
Posts: 12,022
LinuxFirefox 139.0

Re: How change window border color of a theme ?

SpongB0B wrote:

Now, I would like to do the same for the "focus" color (the highlighted color when we select an option in a list for example )

Weirdly it's the same hex color code: 0f56d9 and it didn't get impacted by the color swap command that you provided... I suppose that color is stored somewhere else then ?

That would be saved in the theme's gtk.css file, but for this theme, it is embedded in a gresource file.

To fix this, create (or edit if one exists) the ~/.config/gtk-3.0/gtk.css file and add in the change that you want.

the highlighted color when we select an option in a list for example

Can you post an image of the element that you want to effect? Or do you want to change this color in all elements in the theme?

If it's the theme's selected background color, then add the following to the top of the gtk.css:

@define-color theme_selected_bg_color #ff0000;

Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Offline

#8 2025-06-17 12:25:12

SpongB0B
Member
Registered: 2022-06-01
Posts: 22
UnknownFirefox 111.0

Re: How change window border color of a theme ?

Thank you @Toz,

Without your help I'm wondering how someone can know how it work ? is there not a documentation somewhere that explain the mechanism ?

my ~/.config/gtk-3.0/gtk.css is very light

/*panel tweaks*/
@import url("xfc4-panel-tweaks.css")

/*set custom gtk3/css code below */
@define-color theme_selected_bg_color #ff0000;

Your line didn't do the trick hmm

I try to change this color
MtWnBP3.jpeg


Linux noob, plz be kind big_smile

Offline

#9 2025-06-17 15:40:53

ToZ
Administrator
From: Canada
Registered: 2011-06-02
Posts: 12,022
LinuxFirefox 139.0

Re: How change window border color of a theme ?

If you use:

treeview:selected {background-color: red}

...it will change that background in all treeview elements throughout GTK3 - including these ones.


Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Offline

#10 2025-06-20 08:21:29

SpongB0B
Member
Registered: 2022-06-01
Posts: 22
UnknownFirefox 111.0

Re: How change window border color of a theme ?

Thank you @ToZ ,

I've write the following into ~/.config/gtk-3.0/gtk.css

treeview:selected, treeview:focus {background-color: red}

E6coptk.jpeg

So it's working for the application finder (green arrow), but not inside the tweaks windows...

also I would like to change to color for all the red pointed element I've tried to play with the css but it's too huge, complex..


Linux noob, plz be kind big_smile

Offline

Registered users online in this topic: 0, guests: 1
[Bot] ClaudeBot

Board footer

Powered by FluxBB
Modified by Visman

[ Generated in 0.017 seconds, 9 queries executed - Memory usage: 609.46 KiB (Peak: 626.3 KiB) ]