Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom accent color #225

Closed
ShellCode33 opened this issue Nov 30, 2024 · 3 comments
Closed

Custom accent color #225

ShellCode33 opened this issue Nov 30, 2024 · 3 comments

Comments

@ShellCode33
Copy link

ShellCode33 commented Nov 30, 2024

Hi, sorry to hijack your issue tracker for something that is not an issue. I have a suggestion that could potentially easily allow color variations of this very nice theme. And if you don't want to do what I suggest (which is perfectly fine), I figured this issue could help others to try to do it themselves.

First I should say that I only tried this with GTK themes (my guess is that it would also mostly work for the others).

I managed to change the accent color by changing only 3 colors in the source files:

  • $selected_bg_color from common/gtk-3.0/sass/_colors.scss
  • $suggested_color from common/gtk-3.0/sass/_colors.scss
  • And the first non-white color in common/gtk-3.0/assets/assets.svg

Most of the SCSS code uses darken() and lighten(), therefore I don't believe there are that many color codes to change in all the themes to be able to have color variants of the Arc theme.

Here's what gtk3-widget-factory looks like by changing these 3 files:

image

Everything looks perfectly fine, even Firefox I'm writing this issue with is colored properly (the blue color we see on the image is a color picker, I don't think it's related to the blue color of Arc).

From what I gathered, there are only two colors that are really specific to Arc and that affect most of the colors we see in our applications: #5294e2 and #4dadd4.

So basically here are the only two commands you need to be able to change the blue accent color of Arc:

grep -ril 5294e2 | xargs sed -i 's/5294e2/YOUR_FIRST_COLOR/gI'
grep -ril 4dadd4 | xargs sed -i 's/5294e2/YOUR_SECOND_COLOR/gI'

For me, I replaced both with #b71c1c :)

I guess this process could be automated as part of a GitHub CI that would automatically release a tarball per color (I can help with that if you want me to).

Whether you decide to do something about it or not, thanks a lot for your work !

@jnsh
Copy link
Owner

jnsh commented Nov 30, 2024

As I've stated before, I am not going to provide alternative color variants for the theme. Everyone has their own preference, and those should belong in separate forks.

The highlight colors are indeed easy to change with sed. The difficult part to get properly colored theme is changing the blueish tint of the base grays to match the highlight (or other preference). This can be done similarly with sed, but there are quite a few color values to change, and calculating matching color hue for each one is not trivial.

Othewise the #4dadd4 is really not an Arc highlight color, but used for "suggested" elementsm, and not any more Arc-specific than e.g. #fc4138 (red used for error color) or #4dadd4 (success color). Of course you're free to change to your preference, but just to point out it has as specific meaning :)

Since there's nothing to do here I'm gonna close this, but feel free to add more comments if there's anything else.

@jnsh jnsh closed this as completed Nov 30, 2024
@ShellCode33
Copy link
Author

ShellCode33 commented Nov 30, 2024

Everyone has their own preference

Indeed, that's why in my opinion it is a good idea to provide some basic color alternatives, many themes do that. You (and horst3180) have done such a great job with this theme that I find it to be really a shame that it is not more accessible to more people. Some people like me don't like blue and they will therefore not use that theme and go to some other shitty theme to realize 8 months later after they run the last update of their favorite program that GTK4 is not properly supported. My point is that not everyone has the technical knowledge to be able to:

  1. use git
  2. figure out the build system in place and learn how to use meson (even though to be fair there's the INSTALL.md, but even that is not obvious to everyone, see how this user struggled to be able to compile your theme)
  3. realise that the colors are spread in various scss and svg files
  4. learn how to use sed to replace them all

Providing alternative colors without changing much of the overall look and feel is a great way to allow less tech savy people to use this great theme, specially considering it's not a lot of work to run some sed commands in a GitHub CI. It could also be explicitly stated that "these themes have not been thoroughly tested, you should use the blue color"

But hey it's your project now, you do whatever you want !


and calculating matching color hue for each one is not trivial

I did not have to do that, it was really as simple as running some sed commands, but I might have missed some things that were not showcased in gtk4-widget-factory:

image

Maybe that's because I only tested the GTK theme.

Though it seems that color hue is already calculated by the scss files themselves based on the destructive_color hex code:

$ grep -r hue
common/gnome-shell/3.32/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/3.34/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/3.36/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/3.38/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/40/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/41/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/42/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/43/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/44/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%);
common/gnome-shell/45/sass/_common.scss:    background-color: darken(adjust-hue(desaturate($destructive_color, 18%), -5%), 9%)

@ShellCode33
Copy link
Author

A note for future googlers ending up here: I ended up creating my own fork of jnsh's repo, which generates various color palettes of this theme (see the readme for a showcase of available palettes).

I'm no maintainer of this theme (jnsh is) and will not add any feature or bug fixes (except the ones related to my changes).
My fork will only regularly pull the changes from jnsh's repo and automatically generate all the color variants.

All the variants are pre-built for you and published as release artifacts, it's only a matter of downloading the archive for the color you want and extracting it in your themes folder.

For now only the following colors are generated:

  • red
  • green
  • orange
  • yellow
  • pink
  • purple
  • blue
  • cyan

Let me know if you want any another color, it's just a matter of adding 1 line to a config file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants