Change Yad dialog colors

[sleekmason]

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.

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.