refactor: migrate CC dark theme feature to the new architecture
Bug: twpowertools:176
Change-Id: Iaea1015a788038a8a31acbdd33b267b551e0b6a1
diff --git a/src/features/ccDarkTheme/core/logic/darkTheme.js b/src/features/ccDarkTheme/core/logic/darkTheme.js
new file mode 100644
index 0000000..d3d7e5e
--- /dev/null
+++ b/src/features/ccDarkTheme/core/logic/darkTheme.js
@@ -0,0 +1,84 @@
+import { MDCTooltip } from '@material/tooltip';
+
+import { createPlainTooltip } from '../../../../common/tooltip.js';
+import { createExtBadge } from '../../../../contentScripts/communityConsole/utils/common.js';
+
+export const kColorThemeMode = Object.freeze({
+ Auto: Symbol('auto'),
+ Light: Symbol('light'),
+ Dark: Symbol('dark'),
+});
+
+export function injectDarkThemeButton(rightControl) {
+ var darkThemeSwitch = document.createElement('material-button');
+ darkThemeSwitch.classList.add('TWPT-dark-theme', 'TWPT-btn--with-badge');
+ darkThemeSwitch.setAttribute('button', '');
+
+ darkThemeSwitch.addEventListener('click', () => {
+ chrome.storage.sync.get(null, (currentOptions) => {
+ currentOptions.ccdarktheme_switch_status =
+ !currentOptions.ccdarktheme_switch_status;
+ chrome.storage.sync.set(currentOptions);
+ });
+ });
+
+ var switchContent = document.createElement('div');
+ switchContent.classList.add('content');
+
+ var icon = document.createElement('material-icon');
+
+ var i = document.createElement('i');
+ i.classList.add('material-icon-i', 'material-icons-extended');
+ i.textContent = 'brightness_4';
+
+ icon.appendChild(i);
+ switchContent.appendChild(icon);
+ darkThemeSwitch.appendChild(switchContent);
+
+ let badgeContent, badgeTooltip;
+ [badgeContent, badgeTooltip] = createExtBadge();
+
+ darkThemeSwitch.appendChild(badgeContent);
+
+ rightControl.style.width =
+ parseInt(window.getComputedStyle(rightControl).width) + 58 + 'px';
+ rightControl.insertAdjacentElement('afterbegin', darkThemeSwitch);
+
+ createPlainTooltip(
+ switchContent,
+ chrome.i18n.getMessage('inject_ccdarktheme_helper'),
+ );
+ 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) {
+ const activeColorTheme = getCurrentColorTheme(options);
+
+ switch (activeColorTheme) {
+ case kColorThemeMode.Auto:
+ return (
+ window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches
+ );
+
+ case kColorThemeMode.Light:
+ return false;
+
+ case kColorThemeMode.Dark:
+ return true;
+ }
+}