search

Frewacom / pywalfox

Dynamic theming of Firefox (and Thunderbird) using your Pywal colors
https://addons.mozilla.org/en-US/firefox/addon/pywalfox/
Mozilla Public License 2.0
583 stars 12 forks source link

Question: Color Variables #35

Closed typkrft closed 3 years ago

typkrft commented 3 years ago

Does pywal/pywalfox generate CSS color variables and are they able to be used in userChrome.css? If so is there a list of the CSS color variables somewhere?

Frewacom commented 3 years ago

Pywalfox does not generate any CSS variables, nor does it use CSS for theming (other than the included optional userChrome.css). However, Firefox has a few CSS variables that you can use, e.g: https://github.com/Frewacom/pywalfox-native/blob/master/pywalfox/assets/css/userChrome.css#L6.

I have not looked into this too much, so you'll have to take a deep dive into the Browser inspector to find the other variables used by the theme (if they even exist).

typkrft commented 3 years ago

It looks like I can just find a browser element that pywalfox has colored, find for the color variable used, and apply it wherever. I may come back after I've got all the variables and what they correspond to on the palette, just in case anyone else from r/firefoxcss stumbles across this, and update this comment. Thanks for the help!

Edit: This should work for anyone interested. 

/* Accent primary: */ --autocomplete-popup-highlight-background
/* Accent Secondary: */ --lwt-toolbarbutton-icon-fill-attention
/* Text: */ --lwt-toolbar-field-color
/* Text Focus: */ var(--lwt-tab-text, var(--toolbar-color))
/* Background Extra: */ --lwt-toolbarbutton-hover-background
/* Background Light: */ --lwt-selected-tab-background-color
/* Background: */ --autocomplete-popup-highlight-color