#1 2021-12-08 17:06:28

sleekmason

zoom

Registered: 2018-05-22

Posts: 1,108

Website

Theming Yad with an alternative theme

Something fun for a bit:)

I wanted a way to theme my yad dialog boxes, which normally are very drab as they follow the gtk-3.0 theming pattern used by the system.

On the left is my common dark theme dialog boxes, and the right shows my new groovy theme. I don't reckon you have to like my color choices in order to see the potential here:)

The way this works is by creating a custom.css theme, and calling it from the yad script.
So, I've made a custom gtk.css file you can change yourself to adjust a fairly large amount of theme options. these include:

Background color with gradient options for both buttons and the box.
Hovered button color.
Pressed button color.
Font color, size and type.
text shadow color and size.
Border color and size.
Border radius (rounded corners) and transition effect.
Box shadow effect.
Padding.

No longer will you be trapped by the system theme:)

There are still some caveats:

The center box of the button is controlled by "box", making the colors the same.  Would love to separate out the center box from the rest of the button. Is there a name for this to isolate that area? or maybe the rest of the box can be labled something else? (frame didn't work).

I would also like to call different individual "alt" themes to activate when the system theme changes. Is there a simple way to do this?

The box font color overrides the button color.

The theme shows up in your "normal" themes. Probably do not want to use this for anything complicated. Is there a way to call the gtk.css without it showing up in "themes"?

Anyhow, I notated everything needed in the gtk.css file so others might understand it easier, and changed all the color codes to #xxxxxx from rgb (xxx xxx xxxx) to make it simple to use a regular color changer to grab the colors you might want.

To use, place the below css code into ~/.local/share/themes/alt-dialog/gtk-3.0/gtk.css (make the folders as you go), and add:

GTK_THEME="alt-dialog"

To the beginning of your yad script (example at end).

---
Below is the gtk.css to be placed in ~/.local/share/themes/alt-dialof/gtk-3.0

 /* Create your own yad dialog theme. */
 /* Place this file in ~/.local/share/themes/alt-dialog/gtk-3.0 */
 /* Add the line: GTK_THEME="alt-dialog"  to the beginning of your script. */
 
box {
   background-image: linear-gradient(to right, shade(#121E24, 1.00), shade(#376E8A, 1.00) 35%, shade(#376E8A, 1.00) 65%, shade(#121E24, 1.00));
   box-shadow: inset 0 -2px #18252B;                           /* Creates underlines in the box as accent, and separator color- should be same as second box color*/
   padding: 1px 5px;                                           /* Padding between button and panel edge. */
   color: #97D7E7;                                             /* Text color for everything. */
   text-shadow: 0 1px black;                                   /* Adds a black outline on the font*/
   border: 0px solid;                                          /* Width of border. */
   border-radius: 4px;                                         /* How rounded the corners are. */
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Color transition around the border. */
   border-top-color: #2481B7;                                  /* Border colors. */
   border-right-color: #2481B7;                                /* Border colors. */
   border-left-color: #2481B7;                                 /* Border colors. */
   border-bottom-color: #227AAD;                               /* Border colors. */
}

button {
   background-image: linear-gradient(to bottom, shade(#18252B, 1.00), shade(#196375, 1.00) 35%, shade(#196375, 1.00) 65%, shade(#18252B, 1.00));
   min-height: 14px;
   min-width: 82px;
   padding: 4px 1px;
   border: 2px solid;
   font: 12px "Liberation Sans";                               /* Changes font size and type in boxes only. Place line above for whole box. */
   font-weight: Bold;                                          /* Bold*/
   text-shadow: 0 1px black;                                   /* Adds a black outline on the font*/
   color: #95E7F0;                                             /* Doesn't work if box color is activated */
   border-radius: 8px;
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   border-top-color: #4D6B69;
   border-right-color: #4D6B69;
   border-left-color: #4D6B69;
   border-bottom-color: #4D6B69;
   box-shadow: inset 0 1px #1B98BD;                            /* Button highlight color*/
}

button:hover {
   background-image: linear-gradient(to bottom, shade(#18252B, 1.00), shade(#0DACC9, 1.00) 35%, shade(#0DACC9, 1.00) 65%, shade(#18252B, 1.00));
   color: #95E7F0;
   box-shadow: inset 0 1px #77DEFC;                            /* Button highlight color hovered*/
   -gtk-icon-effect: highlight; 
}

button:active,                                                 /* Pressed button color*/
  button:checked {
  background-image: linear-gradient(to bottom, shade(#0DACC9, 1.00), shade(#0B94AD, 1.00) 35%, shade(#0B94AD, 1.00) 65%, shade(#0DACC9, 1.00));
  transition-duration: 50ms; 
}

To change the theme items, open the gtk.css file in Geany (because it has a built in color chooser), and make changes as you wish!  Maybe make a quick toggle of whatever dialog you are wanting to theme so you can see changes on the fly.

Example of where/how to place GTK_THEME="alt-dialog" in the script.

GTK_THEME="alt-dialog" \
yad --title "Conky" --button=gtk-close:1 --form --center --width=230 \

If anyone has any cool additions that can be used, or if you have possible fixes or options for the caveats listed above, please post them and I will make changes to the file.

for some neat Yad options and scripts: See: The Great Yad Hacking Thread

Last edited by sleekmason (2021-12-08 21:10:52)

Naik

Member

From: the edge of insanity

Registered: 2015-10-03

Posts: 328

Re: Theming Yad with an alternative theme

Thanks for that!

---

"Kaum macht [Mensch]* es richtig, funktioniert es sofort!"
BL-Kitchen Codeberg

sleekmason

zoom

Registered: 2018-05-22

Posts: 1,108

Website

Re: Theming Yad with an alternative theme

Thank you Naik!
--
Does anyone know whether or not a theme /gtk-3.0/gtk.css file can be called from a non-standard location?

Right now, any theme placed in one of the four standard locations also shows up in the system appearance settings.  For individual usage this is no big deal, but certainly not good for multiple theme files or distro use.

You could make a full fairy kingdom of color and effects if able to isolate a different theme for all the different dialog boxes and programs.

As an example, It would be cool to call the alt-dialog theme by:

GTK_THEME="$HOME/.config/yad-themes/alt-dialog"

rather than through one of the four system theme locations available, so they won't show in settings.  However, this won't work.

Anybody have a solution/workaround?
Either a way to call the gtk.css file from a non-standard location, or to mask the file from the system settings while still allowing it to be used? Maybe some other way? I'll keep my fingers crossed:)

johnraff

nullglob

From: Nagoya, Japan

Registered: 2015-09-09

Posts: 12,651

Website

Re: Theming Yad with an alternative theme

^According to the Arch Wiki, the way to pass a theme depends on whether it's GTK2 or GTK3.

I recently used this for GTK2 themes:

GTK2_RC_FILES=/usr/share/themes/BL-Lithium/gtk-2.0/gtkrc hardinfo

But you'll need to check if it works with non-standard filepaths too.

Apparently, for GTK3:

GTK_THEME=Adwaita:dark gnome-calculator

but there's no hint of whether you can supply a path to a theme in a non-standard location.

---

...elevator in the Brain Hotel, broken down but just as well...
( a boring Japan blog (currently paused), now on Bluesky, there's also some GitStuff )

Introduction to the Bunsenlabs Boron Desktop

sleekmason

zoom

Registered: 2018-05-22

Posts: 1,108

Website

Re: Theming Yad with an alternative theme

This version (bullseye) has nothing on css that I could find. . . Yet!

Looks like individual dialog theming is right around the corner for stable?  Awesome:)

Sadly, one can only use gtk-2.0 with the --gtkrc=FILENAME option.

sleekmason@ai:~$ yad --version
0.40.0 (GTK+ 3.24.2

man yad
--gtkrc=FILENAME
              Read and parse additional GTK+ settings from  given  file.  This
              option doesn't work with GTK+-3.x builds.

micko01

void main()

From: Queensland, Australia

Registered: 2024-04-07

Posts: 497

Website

Re: Theming Yad with an alternative theme

No apologies for digging up this old topic but so much more can be done with this approach, especially for gtk+-3.0

Many thanks @sleekmason and one can only hope that your health issues are resolved soon. Re: https://forums.bunsenlabs.org/viewtopic … 29#p142029

---

#!/bin/sh
echo '#include <stdio.h>\nvoid main() { printf("Hi, bunsenlabs\\n"); return; }' > bunsen.c
gcc bunsen.c -o bunsen
./bunsen

greenjeans

Member

Registered: 2025-01-18

Posts: 239

Website

Re: Theming Yad with an alternative theme

No apologies for digging up this old topic but so much more can be done with this approach, especially for gtk+-3.0

Many thanks @sleekmason and one can only hope that your health issues are resolved soon. Re: https://forums.bunsenlabs.org/viewtopic … 29#p142029

No apologies needed, thanks for bumping it, this is really cool stuff!

Now i'm gonna have to play with some yad today.

greenjeans

Member

Registered: 2025-01-18

Posts: 239

Website

Re: Theming Yad with an alternative theme

Just thinking about the OP's desire to have different yad themes for different general themes and where to put them and how to call them.

Wouldn't it be as simple as creating a yad.css file appropriate to whatever theme, dropping that into the theme's folder in /usr/share/themes, and then callling it by adding a line down at the bottom of the main gtk.css for the theme?

@import url("yad.css");