Gtk / gnome-shell Theme Editing

Customization
, , ,
#1

Hello all,

I saw this gnome shell css editing post and it looks like it might be what I'm looking for, but I don't know for sure.

I'm looking to modify just one color in my theme which seems to be used across all elements. After finding the above post with references to variants of css and more advanced work with gradients, I'm even more out-of-my-depth.

Main goal:
Change my installed theme's colors to a darker/fuller green.

  • How do I do that without further breaking things like you see on the Calendar you see in the image?
  • Which is the correct .css file to modify if my theme is located in /usr/share/themes?
  • Am I instead supposed to be editing the .css located in ~/.config/?

I've included this GIF to further enforce my meaning:
Peek-2022-05-30-19-15.gif
I am NOT ok with the gradient on the calendar but will try to get to that tomorrow....

  • Can anyone confirm this is what happened?

Thank you!

#2

Which theme are you using and which color are you trying to change?

#3

Orchis-Green-Dark-Compact

I want to override the color of the elements shown in the screenshot.

I want to make each instance of that color darker.

EDIT: It. is. too. bright.
EDIT2: If you're using the GIF for reference, the file highlight in Nemo is fine for brightness/opacity.

#4

In the orchis-green-dark directory, under gtk-3.0, you should find gtk-dark.css
Open that in text editor and scroll all the way to the bottom to:

@define-color LIME_300 #8ADBA6;
@define-color LIME_500 #73C48F;
@define-color LIME_700 #479863;
@define-color LIME_900 #1C6D38;

Try changing those colors. For Testing purposes, you might try changing a color to PINK, refresh the Desktop
alt+F2
r
Hit the enter key
In order to see what changes.
You can google search: #8ADBA6 in order to pull up an immediate and handly color picker with Hex Codes or RGB values which you can give an alpha to by making it rgba and then adding a forth value- the alpha percentage. For example: Black as rgb with opacity: rgba(0,0,0,0.0)

1 Like
#5

Thank you, I will try to get to this tomorrow, I need to sleep. And I'm never happy so.

#6

image
image1855×859 124 KB

Tried all of them, one at a time.
Did not work unfortunately.

I chose rgba(255, 23, 14, 0.69) - bright red with alpha.

#7

In your text editor, tap ctrl+f to search.

@define-color theme_unfocused_selected_bg_color #66BB6A;

Now, we can just search that color:

#66BB6A

You can also try replacing all instances of that color with the replace all function (I use Xed text editor, I cannot remember the replace all command on Gedit off-hand)
You can Undo last action (like replace all) with ctrl+z in order to revert the changes.