Skip to content

Instantly share code, notes, and snippets.

@waimus
Last active August 16, 2023 18:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save waimus/65b78a3913c3fcd1b8f539b79f81342b to your computer and use it in GitHub Desktop.
Save waimus/65b78a3913c3fcd1b8f539b79f81342b to your computer and use it in GitHub Desktop.

Window Decoration Outline for GNOME/GTK apps

WARNING: This was only tested with GNOME 3.38. No plan on working around with GNOME 40+ and libadwaita.

This will add black and highlight outline to the window decoration for GNOME desktop/GTK apps, it will look similar to how MacOS windows edge look like. Should work well with Adwaita theme.

Screenshot (using AdwaitaEx theme)

screenshot

Rounded teriminal corner is not included, it is from https://github.com/owozsh/adwaita-rounded
If you are willing to take effort to compile Mutter for proper rounded corner, try: https://github.com/yilozt/mutter-rounded/

gtk.css

Write this CSS rules to your ~/.config/gtk-3.0/gtk.css file. Seem to be working well only with GTK3 apps.

/* ~/.config/gtk-3.0/gtk.css */

button:not(.close):not(.flat) {
	box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.05);
}

decoration {
	background-color: inherit;
	border-radius: 8px;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	box-shadow: 0px 0px 0px 1px black;
	border: 1px solid rgb(70,70,70);

	border-top: none;
}

headerbar {
	border-bottom: 1px solid rgb(50,50,50);
	box-shadow: 0px 1px 0px 0px rgb(5,5,5);

	border-top: 1px solid rgb(70,70,70);
}
@rbreaves
Copy link

rbreaves commented Apr 8, 2023

Thanks, with some slight tweaks I was able to make this work very well for Ubuntu Budgie and its Mojave-dark theme as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment