mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Nicolas Chevobbe
3a3ae50758
The function used to parse the variables.css file and do some regex matching on the light/dark theme rules to extract the declaration value of a variable. This patch makes the function simpler by getting the computed value of the CSS variable, which automatically adapt to the current theme since we do set `color-scheme` value properly when setting a theme. In order for this to work properly, the variables that might be used in this function need to be registered so the engine know they are colors. We take this as an opportunity to rename the function to `getCssVariableColor`, which is more explicit, and also make it take the actual CSS variable name, and not only the suffix part that comes after `--theme-` for better grep-ability. The test in browser_theme.js is adapted to reflect those changes. Differential Revision: https://phabricator.services.mozilla.com/D220718
86 lines
2.2 KiB
JavaScript
86 lines
2.2 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
"use strict";
|
|
|
|
const THEME_PREF = "devtools.theme";
|
|
|
|
/* eslint-disable no-unused-vars */
|
|
|
|
/**
|
|
* Returns the "auto" theme.
|
|
*/
|
|
const getAutoTheme = (exports.getAutoTheme = () => {
|
|
return Services.appinfo.chromeColorSchemeIsDark ? "dark" : "light";
|
|
});
|
|
|
|
/**
|
|
* Returns the string value of the current theme,
|
|
* like "dark" or "light".
|
|
*/
|
|
const getTheme = (exports.getTheme = () => {
|
|
const theme = getThemePrefValue();
|
|
if (theme == "auto") {
|
|
return getAutoTheme();
|
|
}
|
|
return theme;
|
|
});
|
|
|
|
/**
|
|
* Returns the value of the pref of the current theme,
|
|
* like "auto", "dark" or "light".
|
|
*/
|
|
const getThemePrefValue = (exports.getThemePrefValue = () => {
|
|
return Services.prefs.getCharPref(THEME_PREF, "");
|
|
});
|
|
|
|
/**
|
|
* Returns the color of a CSS variable (--theme-toolbar-background, --theme-highlight-red),
|
|
* for the current toolbox theme, or null if the variable does not exist, or it's not a
|
|
* registered property, or doesn't have a <color> syntax.
|
|
*
|
|
* @param {String} variableName
|
|
* @param {Window} win: The window into which the variable should be defined.
|
|
* @returns {String|null}
|
|
*/
|
|
const getCssVariableColor = (exports.getCssVariableColor = (
|
|
variableName,
|
|
win
|
|
) => {
|
|
const value = win
|
|
.getComputedStyle(win.document.documentElement)
|
|
.getPropertyValue(variableName);
|
|
|
|
if (!value) {
|
|
console.warn("Unknown", variableName, "CSS variable");
|
|
return null;
|
|
}
|
|
|
|
return value;
|
|
});
|
|
|
|
/**
|
|
* Set the theme preference.
|
|
*/
|
|
const setTheme = (exports.setTheme = newTheme => {
|
|
Services.prefs.setCharPref(THEME_PREF, newTheme);
|
|
});
|
|
|
|
/**
|
|
* Add an observer for theme changes.
|
|
*/
|
|
const addThemeObserver = (exports.addThemeObserver = observer => {
|
|
Services.obs.addObserver(observer, "look-and-feel-changed");
|
|
Services.prefs.addObserver(THEME_PREF, observer);
|
|
});
|
|
|
|
/**
|
|
* Remove an observer for theme changes.
|
|
*/
|
|
const removeThemeObserver = (exports.removeThemeObserver = observer => {
|
|
Services.obs.removeObserver(observer, "look-and-feel-changed");
|
|
Services.prefs.removeObserver(THEME_PREF, observer);
|
|
});
|
|
/* eslint-enable */
|