refactor(cc-dark-theme): minor improvements
- All the logic related to the dark theme has been placed in one folder
- "Dark mode" has been renamed to "dark theme" for consistency.
Change-Id: I8cd3a97609447d428601e61a25b55e0d4cc31e10
diff --git a/src/contentScripts/communityConsole/darkTheme/darkTheme.js b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
new file mode 100644
index 0000000..7bd4ba6
--- /dev/null
+++ b/src/contentScripts/communityConsole/darkTheme/darkTheme.js
@@ -0,0 +1,56 @@
+import {MDCTooltip} from '@material/tooltip';
+
+import {createPlainTooltip} from '../../../common/tooltip.js';
+import {createExtBadge} from '../utils/common.js';
+
+
+export function injectDarkThemeButton(rightControl, previousDarkThemeOption) {
+ 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 = !previousDarkThemeOption;
+ chrome.storage.sync.set(currentOptions, () => {
+ location.reload();
+ });
+ });
+ });
+
+ 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 isDarkThemeOn(options) {
+ if (!options.ccdarktheme) return false;
+
+ if (options.ccdarktheme_mode == 'switch')
+ return options.ccdarktheme_switch_status;
+
+ return window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches;
+}