lassekongo83 / adw-colors Goto Github PK

Running Fedora 37, every time I reboot, log out, etc, the "gtk.css" file in ~/.config/gtk-4.0 resets to the default file.

Hey, thanks so much for your work on the adw theme and now also providing the possibility of variants in color.

I want to play around a bit with the color schemes, and was wondering if you could also list the 'regular' libadwaita gtk.css under available themes. This would give me (and perhaps others) the opportunity to compare a bit between the original theme and the new variants. For instance: I prefer the regular libadwaita close, minimize and maximize buttons. But I can't figure out how to get those back in the peninsula variant.

Another variant of this suggestion is a more detailed 'how to' with not only the listed supported name colors but also screenshots of each of the categories.

Hi
I like the windows control button on the Peninsula-dark theme, but was looking for light theme version. So copy pasted the windows control lines form the Peninsula-dark and to a blank gtk.css file. Also created a symlink for gtk3 app.

Window controls works perfectly for both light and dark.

/* Creates grey shade on windows control for background apps for GTK 4 (I guess!) */

.maximized decoration,
.fullscreen decoration {
border-radius: 0;
box-shadow: none;
}

/* Windows controls decoration */

button.titlebutton { /* GTK3 */
color: transparent;
min-width: 18px;
min-height: 18px;
}
button.titlebutton:backdrop {
opacity: 0.5;
}

.titlebar, headerbar {
border-bottom-color: alpha(currentColor, 0.15);
}
.titlebar:backdrop, headerbar:backdrop {
border-bottom-color: alpha(currentColor, 0.2);
}

windowcontrols > button { /* GTK4 */
color: transparent;
min-width: 18px;
min-height: 18px;
border-radius: 100%;
padding: 0;
margin: 0 5px;
}
windowcontrols > button > image {
padding: 0;
}

button.titlebutton.close,
windowcontrols > button.close,
button.titlebutton.close:hover:backdrop,
windowcontrols > button.close:hover:backdrop {
background-color: #e86150;
}

button.titlebutton.close:hover,
windowcontrols > button.close:hover {
background-color: #f19e94;
}

button.titlebutton.maximize,
windowcontrols > button.maximize,
button.titlebutton.maximize:hover:backdrop,
windowcontrols > button.maximize:hover:backdrop {
background-color: #75c2b3;
}

button.titlebutton.maximize:hover,
windowcontrols > button.maximize:hover {
background-color: #aad9d0;
}

button.titlebutton.minimize,
windowcontrols > button.minimize,
button.titlebutton.minimize:hover:backdrop,
windowcontrols > button.minimize:hover:backdrop {
background-color: #d7c781;
}

button.titlebutton.minimize:hover,
windowcontrols > button.minimize:hover {
background-color: #e9e1bb;
}

button.titlebutton.close:backdrop,
button.titlebutton.maximize:backdrop,
button.titlebutton.minimize:backdrop,
windowcontrols > button.close:backdrop,
windowcontrols > button.maximize:backdrop,
windowcontrols > button.minimize:backdrop {
background-color: #707f8c;
}

I'm using extension Night Theme Switcher and to work it requires separate "theme packages".

I'm not sure how to achieve this with this kind of base theme augmentation.

I dowmloaded alpha-mac gtk.css, put it ond ~/.config/gtk-4.0/ folder and when i try to aplly nothing apears.
When try to open gtk.css file from gnome-tweaks it doesnt see the file on the folder. Please help me

I think there is a better way to have adw-colors work on Flatpak apps, without the need to do "sudo flatpak override".

Each Flatpak creates its own configuration folder located in "/home/user/.var/app/" where it stores all of its configurations, including for gtk 3/4.

This way you can simply put gtk.css in "/home/user/.var/app/org.flatpak.app/config/gtk-4.0/" (or gtk-3.0) and it just works.

For example, Gnome Calculator from Flathub works this way as seen in the screenshot. (However, note that I only tried it on gtk4/libadwaita apps, as I currently don't have gtk3 flatpaks).

What's also cool about it is that this way you can have different color schemes for different Flatpak apps, or it can be useful if you simply don't want to have a system wide color scheme and only use it for specific apps.

But of course, if a user has dozens of Flatpaks installed, it's probably inconvenient to paste gtk.css for each app. So I suggest keep the current Flatpak instruction, but also add this one.

It would be appreciated if someone could make a Cobalt color theme, like the one that is used in Gnome Text Editor:

Hi, i love these themes so much, but i have a question. is it possible to set a gtk.css theme for light theme and gtk.css dark theme for the system?. thank you

Hi,

I used the adw-colors using the tutorial, it worked perfectly.

But if I want to go back to the original adw-gtk theme, how can I do that. My understanding is that if I delete the file [~/.config/gtk-4.0/gtk.css] and remove the symlink it should go back to original.

So if I run the same below command will it revert for Flatpak app too ?

sudo flatpak override --filesystem=xdg-config/gtk-3.0 && sudo flatpak override --filesystem=xdg-config/gtk-4.0

Please let me know if my understanding is correct.

Also please share the adw-colors for light theme if possible.

Hey, thanks for making this resource, I was wondering if you could make a similar resource for re-coloring the Gnome Shell. Thank you!

Hi Lasse, I'm a fellow Swede, hoppas du har en fin fika! :)

Gradience has emerged as the primary way to re-color the GNOME desktop. It's getting support for Shell themes and even GDM login themes. And it has a growing repository of custom themes. It's also made specifically to work with adw-gtk3.

All gtk.css features are supported in its theme files, such as defining colors to refer to other colors (ie @window_bg_color), and adding custom built-in CSS to the themes.

It also has great benefits, such as being able to apply any theme AND your own custom user CSS overrides. So for example, I use the following Tilix CSS override in gtk-3.0's CSS file, to get nicer padding around the terminal windows, which Gradience can automatically insert into all Adwaita color themes for me:

.tilix-background vte-terminal {
  padding: 10px;
}

Adding such custom CSS is a real pain when cloning the latest versions of themes from the adw-colors repo instead, since they overwrite the entire CSS file.

That's making this separate theme repository look really unappealing compared to Gradience's excellent (and growing) feature set.

So the question is... are there any thoughts about gradually porting themes to Gradience instead, and deprecating this repo, so that GNOME lovers have a more advanced way to install themes? :D

Just a thought. Totally fine if you don't think Gradience is a good application. It looks like it's the future of GNOME theming though.

Hi there,

I'm trying to create a theme where the header/titlebar is dark, but the rest is light.

So far I have the following:

@define-color headerbar_bg_color #303030;
@define-color headerbar_fg_color white;
@define-color headerbar_backdrop_color #242424;

This works fairly well for GTK4 apps (with the exception of some less nice edges in the top corners)

But it's not working well for GTK3 applications (using adw-gtk3).
It looks okay when the window is unfocused:

But when focused, most elements are illegible

It would be great to apply the accent color to gnome-shell too. I've found this extension --> https://extensions.gnome.org/extension/4010/personalize/ that does something similar for gnome 3.38 but doesn't work on my version (42).

Thanks

Hello, how to make gtk.css with the ability to change the theme to dark and light, does anyone know how?