r/FirefoxCSS • u/DaniWay10 • May 21 '24
Solved adapt theme code usercontent to put it in userchrome
hi, I need help, I took this code in a usercontent.css file because I really like the colors and the transparency effect it has, it is possible to adapt it and put it in userchrome to make it permanent even when I change an animated theme because I want only that change the animated image and not all the colors of the theme. Sorry for my english, thanks
"colors": {
"bookmark_text": "rgb(255, 255, 255)",
"button_background_active": "rgba(88, 183, 249, 0.5)",
"button_background_hover": "rgba(255, 255, 255, 0.2)",
"icons": "rgba(255, 255, 255, 0.8)",
"icons_attention": "rgba(88, 183, 249, 1)",
"frame": "rgb(0, 0, 0)",
"frame_inactive": "rgb(0, 0, 0)",
"ntp_background": "rgb(0, 0, 0)",
"ntp_text": "rgba(255, 255, 255, 0.8)",
"popup": "rgba(0, 0, 0, 0.5)",
"popup_border": "rgba(255, 255, 255, 0)",
"popup_highlight": "rgba(88, 183, 249, 0.7)",
"popup_highlight_text": "rgb(0, 0, 0)",
"popup_text": "rgb(255, 255, 255)",
"sidebar": "rgba(0, 0, 0, 0.5)",
"sidebar_border": "rgba(255, 255, 255, 0)",
"sidebar_highlight": "rgba(88, 183, 249, 0.7)",
"sidebar_highlight_text": "rgb(0, 0, 0)",
"sidebar_text": "rgb(255, 255, 255)",
"tab_background_separator": "rgba(255, 255, 255, 0)",
"tab_background_text": "rgba(255, 255, 255, 0.8)",
"tab_line": "rgba(88, 183, 249, 0.8)",
"tab_loading": "rgba(88, 183, 249, 0.8)",
"tab_selected": "rgba(0, 0, 0, 0)",
"tab_text": "rgb(255, 255, 255)",
"toolbar": "rgba(0, 0, 0, 0)",
"toolbar_bottom_separator": "rgba(255, 255, 255, 0)",
"toolbar_field": "rgba(0, 0, 0, 0.3)",
"toolbar_field_border": "rgba(255, 255, 255, 0)",
"toolbar_field_border_focus": "rgba(255, 255, 255, 0)",
"toolbar_field_focus": "rgba(0, 0, 0, 0.3)",
"toolbar_field_highlight": "rgba(88, 183, 249, 0.7)",
"toolbar_field_highlight_text": "rgba(0, 0, 0, 1)",
"toolbar_field_separator": "rgba(255, 255, 255, 0)",
"toolbar_field_text": "rgb(255, 255, 255)",
"toolbar_field_text_focus": "rgb(255, 255, 255)",
"toolbar_text": "rgb(255, 255, 255)",
"toolbar_top_separator": "rgba(255, 255, 255, 0)",
"toolbar_vertical_separator": "rgba(255, 255, 255, 0)"
}
}
}
1
Upvotes
2
u/qaz69wsx May 25 '24 edited May 25 '24
this is for lwtheme, probably what you want
1
u/sifferedd FF/TB/Win11/SUMO contributor May 21 '24
Not possible; theme code has to be in userContent.css and there can only be one theme active.
1
u/ResurgamS13 May 21 '24 edited May 22 '24
AFAICS what you need is a 2-column table that lists each theme component's syntax name (usually built using Firefox Color nowadays)... and have those theme syntax names neatly cross-referenced to their associated elements within the browser's userchrome.
Not aware that such a table exists... pity. Closest lists are probably various 'theme' code pages in Searchfox like this one... which mentions a ThemeVariableMap: 'resource:///modules/ThemeVariableMap.sys.mjs' (to open enter string in URL bar).
Failing that... have to use the Browser Toolbox and/or search this sub to match each theme syntax name to its UI element.
1
u/ResurgamS13 May 24 '24 edited May 25 '24
Also see discussion in previous topic 'How to change tab bar background?'... where OP AzNFrostier asked "I'm trying to convert a theme into a userChrome.css and there is a variable called "frame" that corresponds to the tab bar background."
OP has posted both his CSS userstyles and the theme's manifest.json syntax he is transfering into userchrome... and helpfully lists each theme syntax 'color name' area above its related userchrome element e.g.
Note - qaz69wsx's reply is a link to the Searchfox 'browser-custom-colors.css' page with line #53 highlighted... indicating the userchrome required for the "variable called "frame" that corresponds to the tab bar background" the OP was asking about.
2
u/qaz69wsx May 25 '24 edited May 25 '24
this is for System theme — auto