To be able to use the latest/adequate version of sass, install sassc.
WhiteSur (highly infuenced by Adwaita) is a complex theme, so to keep it maintainable, it's written and processed in SASS. The generated CSS is then transformed into a gresource file during gtk build and used at runtime in a non-legible or editable form.
It is very likely your change will happen in the _common.scss file. That's where all the widget selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the right place for a drive by stylesheet fix:
_colors.scss - global color definitions. We keep the number of defined colors to a necessary minimum, most colors are derived from a handful of basics. It covers both the light variant and the dark variant.
_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party apps color mixing.
_drawing.scss - drawing helper mixings/functions to allow easier definition of widget drawing under specific context. This is why Adwaita isn't 15000 LOC.
_common.scss - actual definitions of style for each widget. This is where you are likely to add/remove your changes.
You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the _common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you edit.
See upstream bug.
A MacOS Big Sur theme for Firefox 70+
See upstream bug.
Icons might appear black where they should be white on some systems. I have no
idea why, but you can adjust them in the theme/colors/light.css or
theme/colors/dark.css files, look for --gnome-icons-hack-filter var and
play with css filters.
If you wanna mess around the styles and change something, you might find these things useful.
To use the Inspector to debug the UI, open the developer tools (F12) on any page, go to options, check both of those:
- Enable browser chrome and add-on debugging toolboxes
- Enable remote debugging
Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser UI.
Also you can inspect any GTK3 application, for example type this into a terminal and it will run Epiphany with the GTK Inspector, so you can check the CSS styles of its elements too.
GTK_DEBUG=interactive epiphanyFeel free to use any parts of my code to develop your own themes, I don't force any specific license on your code.
Developed by Rafael Mardojai and contributors. Based on Sai Kurogetsu original work.
See upstream bug.