You are not logged in.

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

sleekmason
zoom
Registered: 2018-05-22
Posts: 691
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:)

alt-dialog2.png

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)

Offline

#2 2021-12-09 07:24:25

Naik
Member
From: the edge of insanity
Registered: 2015-10-03
Posts: 315

Re: Theming Yad with an alternative theme

Thanks for that!


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

Offline

#3 2021-12-09 16:24:32

sleekmason
zoom
Registered: 2018-05-22
Posts: 691
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:)

Offline

#4 2021-12-10 02:49:39

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 8,615
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), idle Twitterings and GitStuff )

Introduction to the Bunsenlabs Lithium Desktop

Offline

#5 2021-12-10 16:06:42

misko_2083
Member
Registered: 2016-05-24
Posts: 552

Re: Theming Yad with an alternative theme

Mr. Raff, it was added at some point not sure in which version.

yad --version
10.90 (GTK+ 3.24.24)
man yad
...
       --css=STRING
              Read  and  parse  additional GTK+ CSS styles from given data. If
              STRING is filename, the content of file is loaded. If not STRING
              treats like CSS data.

       --gtkrc=FILENAME
              Read  and parse additional GTK+ CSS styles from given file. This
              option is deprecated. Use --css instead.
...

They use force, to make you do, what the deciders, have decided you must do!

Offline

#6 2021-12-10 17:22:35

sleekmason
zoom
Registered: 2018-05-22
Posts: 691
Website

Re: Theming Yad with an alternative theme

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

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.

Offline

#7 2021-12-10 22:24:03

misko_2083
Member
Registered: 2016-05-24
Posts: 552

Re: Theming Yad with an alternative theme

When the toolkit changes the theming changes.
Until there is no theming support at all.
Gnome devs want everyone to use adwaita.
That's one of the reasons why Budgie desktop will drop Gtk and will be switching to EFL.

Those EFL tutorial are very good.
https://www.enlightenment.org/develop/l … rial/start
https://www.enlightenment.org/develop/l … uide/start
https://www.enlightenment.org/docs/c/start


They use force, to make you do, what the deciders, have decided you must do!

Offline

Board footer

Powered by FluxBB