fix(cc-dark-theme): adapt new report dialog
The new report dialog appeared with a light theme and its background
made some flashes.
This CL fixes the theme mismatch by forcing the dialog theme to match
the one set in the CC, and it also fixes the background flashes.
Fixed: twpowertools:197
Change-Id: Ia3aa4d179a8f08584a7fbfa66d58156779254e57
diff --git a/src/contentScripts/communityConsole/darkTheme/darkTheme.js b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
index 7bd4ba6..c1888ea 100644
--- a/src/contentScripts/communityConsole/darkTheme/darkTheme.js
+++ b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
@@ -3,6 +3,11 @@
import {createPlainTooltip} from '../../../common/tooltip.js';
import {createExtBadge} from '../utils/common.js';
+export const kColorThemeMode = Object.freeze({
+ Auto: Symbol('auto'),
+ Light: Symbol('light'),
+ Dark: Symbol('dark'),
+});
export function injectDarkThemeButton(rightControl, previousDarkThemeOption) {
var darkThemeSwitch = document.createElement('material-button');
@@ -45,12 +50,31 @@
new MDCTooltip(badgeTooltip);
}
+export function getCurrentColorTheme(options) {
+ if (!options.ccdarktheme) {
+ return kColorThemeMode.Light;
+ } else {
+ if (options.ccdarktheme_mode == 'switch') {
+ return options.ccdarktheme_switch_status ? kColorThemeMode.Dark :
+ kColorThemeMode.Light;
+ } else {
+ return kColorThemeMode.Auto;
+ }
+ }
+}
+
export function isDarkThemeOn(options) {
- if (!options.ccdarktheme) return false;
+ const activeColorTheme = getCurrentColorTheme(options);
- if (options.ccdarktheme_mode == 'switch')
- return options.ccdarktheme_switch_status;
+ switch (activeColorTheme) {
+ case kColorThemeMode.Auto:
+ return window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches;
- return window.matchMedia &&
- window.matchMedia('(prefers-color-scheme: dark)').matches;
+ case kColorThemeMode.Light:
+ return false;
+
+ case kColorThemeMode.Dark:
+ return true;
+ }
}