how do I change the color of my close button

[Raj2032]

I am using cinnamon DE on Arch based linux.

I want to change the color of this close button.

I have copied the current theme (which is arc-dark) that I have installed to ~/.themes and renamed the theme folder to something else, then I have changed the theme to my new named theme.

I can see a lot of folders over here:

cinnamon gtk-2.0 gtk-4.0 metacity-1 unity

gnome-shell gtk-3.0 index.theme plank xfwm4

so I went inside cinnamon/common-assets/misc

There are close.svg files however they are for when you hover your mouse on your task bar and you can see a preview of the window, its for that, not for the window itself. So I don't know which icon file I can replace to use a custom icon for the window close button?

[ShellCode33]

Hi, first, you are on the wrong repo, this one does not support GTK4 and is not maintained anymore. This is the maintained fork.

And to change the color of the close button, you must edit common/gtk-3.0/sass/_colors.scss and common/gtk-4.0/sass/_colors.scss, change these three variables to your liking:

And then recompile the theme:

meson setup --prefix=$HOME/.local -Dthemes=gtk3,gtk4 -Dvariants=dark build/
meson install -C build/

[Raj2032]

Hi, first, you are on the wrong repo, this one does not support GTK4 and is not maintained anymore. This is the maintained fork.

Thanks for letting me know :)

And to change the color of the close button, you must edit common/gtk-3.0/sass/_colors.scss and common/gtk-4.0/sass/_colors.scss, change these three variables to your liking:

I cannot find any of these folders and files at all. Not even _colors.scss after doing a search inside ~./themes.

This is what I inside my themes folder.

[ShellCode33]

Because there's a difference between the files that are on this repo (or rather the fork), and the files that got installed in your themes folder. All the files that you have in your themes folder are automatically generated, you should not update them manually. Here's one of the _colors.scss files that you should edit for example.

[Raj2032]

@ShellCode33 It seems like EndeavourOS is using outdated themes or something for xfce. I have no idea how it is installed or the package name even but yeah I will clone your new repo instead and modify it, thanks anyways, one question, why do I modify both gtk3 and 4? Why not just the gtk4?

[ShellCode33]

I have no idea how it is installed or the package name even

That's exactly the reason why I stopped using these kind of pre-built all-in-one distros 😄 Most likely the package name you are looking for is arc-gtk-theme, you should probably uninstall it once you have your own theme setup.

why do I modify both gtk3 and 4? Why not just the gtk4?

Because not all applications did the migration to GTK4 yet, it can be quite a lot of work for the devs to upgrade such a big dependency that they heavily rely upon. By having a theme for both GTK3 and GTK4 you ensure retro-compatibility and ensure that you will still have proper theming for all your apps (unless it's using GTK2 of course...).

[Raj2032]

That's exactly the reason why I stopped using these kind of pre-built all-in-one distros 😄 Most likely the package name you are looking for is arc-gtk-theme, you should probably uninstall it once you have your own theme setup.

Makes sense mate and also its better if you distro hop a lot to just simply put it in your home folder.

Because not all applications did the migration to GTK4 yet, it can be quite a lot of work for the devs to upgrade such a big dependency that they heavily rely upon. By having a theme for both GTK3 and GTK4 you ensure retro-compatibility and ensure that you will still have proper theming for all your apps (unless it's using GTK2 of course...).

Ah right makes sense then :)

---

Hey sorry I got an issue when building the thing (after git cloning from the repo link you have provided me):

~/Desktop/arc-theme (master)> meson setup --prefix=$HOME/.local -Dthemes=gtk3,gtk4 -Dvariants=dark build/
The Meson build system
Version: 1.6.0
Source dir: /home/raj/Desktop/arc-theme
Build dir: /home/raj/Desktop/arc-theme/build
Build type: native build
Project name: arc-theme
Project version: 20221218
Host machine cpu family: x86_64
Host machine cpu: x86_64
Program sassc found: NO

meson.build:33:12: ERROR: Program 'sassc' not found or not executable

A full log can be found at /home/raj/Desktop/arc-theme/build/meson-logs/meson-log.txt

[ShellCode33]

sudo pacman -S sassc inkscape

You might also want to install gtk3-demos and gtk4-demos to have access to the test programs gtk3-widget-factory and gtk4-widget-factory that will allow you to see what your theme looks like accross various GTK components, for example:

[Raj2032]

@ShellCode33 Hey mate thanks for this, will install the demo packages as well.

The first command worked but the 2nd command meson install -C build/ gives me errors:

ninja: Entering directory `/home/raj/Desktop/arc-theme/build'
[1/340] Generating common/gtk-3.0/assets/gt...ckbox-unchecked-hidpi with a custom command
FAILED: common/gtk-3.0/assets/checkbox-unchecked@2.png 
/usr/bin/inkscape --export-id-only --export-filename=common/gtk-3.0/assets/checkbox-unchecked@2.png --export-id=checkbox-unchecked --export-dpi=192 ../common/gtk-3.0/assets/assets.svg
terminate called after throwing an instance of 'Gio::DBus::Error'
[2/340] Generating common/gtk-3.0/assets/gt...ked-insensitive-hidpi with a custom command
FAILED: common/gtk-3.0/assets/checkbox-unchecked-insensitive@2.png 
/usr/bin/inkscape --export-id-only --export-filename=common/gtk-3.0/assets/checkbox-unchecked-insensitive@2.png --export-id=checkbox-unchecked-insensitive --export-dpi=192 ../common/gtk-3.0/assets/assets.svg
terminate called after throwing an instance of 'Gio::DBus::Error'
[3/340] Generating common/gtk-3.0/assets/gtk3-checkbox-checked with a custom command
Exporting only object with id="checkbox-checked"; all other objects hidden.
[4/340] Generating common/gtk-3.0/assets/gtk3-checkbox-mixed-hidpi with a custom command
Exporting only object with id="checkbox-mixed"; all other objects hidden.
[5/340] Generating common/gtk-3.0/assets/gt...ked-insensitive-hidpi with a custom command
Exporting only object with id="checkbox-checked-insensitive"; all other objects hidden.
[6/340] Generating common/gtk-3.0/assets/gtk3-checkbox-unchecked with a custom command
Exporting only object with id="checkbox-unchecked"; all other objects hidden.
[7/340] Generating common/gtk-3.0/assets/gt...unchecked-insensitive with a custom command
Exporting only object with id="checkbox-unchecked-insensitive"; all other objects hidden.
[8/340] Generating common/gtk-3.0/assets/gtk3-checkbox-checked-hidpi with a custom command
Exporting only object with id="checkbox-checked"; all other objects hidden.
[9/340] Generating common/gtk-3.0/assets/gt...x-checked-insensitive with a custom command
Exporting only object with id="checkbox-checked-insensitive"; all other objects hidden.
[10/340] Generating common/gtk-3.0/assets/gtk3-checkbox-mixed with a custom command
Exporting only object with id="checkbox-mixed"; all other objects hidden.
ninja: build stopped: subcommand failed.
Could not rebuild /home/raj/Desktop/arc-theme/build

[ShellCode33]

Looks like you got hit by this bug, I didn't have it so you are kind of on your own here. On the GitLab issue someone mentioned:

You can disable this test by setting the environment variable "SELF_CALL" to any non-empty value.

So you might want to try this:

SELF_CALL=anything meson install -C build/

If it still doesnt work, you can try to disable meson parallelization by using --num-processes=1 :

meson install --num-processes=1 -C build/

[Raj2032]

@ShellCode33 Thanks that actually worked, but one thing is after compiling I copied the folder that I cloned to ~/.themes/ and for some reason xfce doesn't detect the new themes, even though I have renamed it?

[ShellCode33]

You should not copy this folder. This command already does that for you: meson setup --prefix=$HOME/.local -Dthemes=gtk3,gtk4 -Dvariants=dark build/ (you only have to run it once, then you should only use the second command).This is what the --prefix=$HOME/.local flag is for.

Your theme is not in ~/.themes, it is in ~/.local/share/themes, which is a way better and standard location.

[Raj2032]

@ShellCode33 Right silly me I should have paid attention.

Anyways one last thing is that after installing it unfortuantely when I go into themes it doesn't show a new theme (probs cause it was named the same, so I went inside meson.build and renamed all the Arc-Dark to Raj-Arc-Dark etc, and then when I ran the command I get this error:

meson setup --prefix=$HOME/.local -Dthemes=gtk3,gtk4 -Dvariants=dark build/
Directory already configured.

Just run your build command (e.g. ninja) and Meson will regenerate as necessary.
Run "meson setup --reconfigure to force Meson to regenerate.

If build failures persist, run "meson setup --wipe" to rebuild from scratch
using the same options as passed when configuring the build.

It doesn't make sense cause I already deleted the folder /home/raj/.local/share/themes/Arc-Dark.

[ShellCode33]

Well as I said in my previous post, and as mason is clearly stating in its output:

Directory already configured.

(you only have to run it once, then you should only use the second command)

Meson doesn't look at the target destination (~/.local/share/themes), it does its thing in the build/ folder at the root of the arc-theme repo, and then it will copy the theme to ~/.local/share/themes

[Raj2032]

@ShellCode33 Thanks mate everything is working now :)

[ShellCode33]

Nice, happy theming ! ;)

One more thing that will save you some time I believe, if you want to replace a color with another everywhere, you can use the following command at the root of the arc-theme repo:

grep -ril '#5294e2' | xargs sed -i 's/#5294e2/#00acab/gI'

It will replace the color #5294e2 with #00acab in all the files of arc-theme.

Then you should rebuild using SELF_CALL=anything meson install -C build/.

[Raj2032]

@ShellCode33 Awesome shall use this mate :)

[Raj2032]

@ShellCode33 sorry I do have one question:

See over here, whats the difference between the left value and the right value, as in which one am I using if I am using Arc-Dark?

[ShellCode33]

The left value is the one that will apply if the boolean expression on the left is true.
In that case it checks for light vs dark theme. If a light theme is in use, the left value will be used, if a dark theme is in use, the color on the right will apply.

arc-theme supports 4 theme variations:

• light
• lighter
• dark
• darker

You can pick whichever you want by reconfiguring the arc-theme project with meson using the first command you did:

meson setup --prefix=$HOME/.local -Dvariants=[THEME_VARIATION_HERE] -Dthemes=gtk3,gtk4 build/

(you can rm -rf build/ if you get an error)

EDIT:

Depending on the colors you want to change, you might have to change some svg files as well. This is where the grep | xargs sed command I sent you comes in handy

[Raj2032]

@ShellCode33 So I am using dark theme so I don't think me changing these values would work at all since it shows light and lighter in the if statements. I just want to change the close buttons that is it do I modify the svg files or is there some other place I need to modify the values?

[ShellCode33]

For the dark theme you want to change the #cc575d color everywhere, you can basically run the following command at the root of the repo:

grep -ril '#cc575d' | xargs sed -i 's/#cc575d/#YOUR_COLOR/gI'