From: Alexander Ebert Date: Thu, 10 Aug 2023 13:07:20 +0000 (+0200) Subject: Add support for color scheme detection X-Git-Tag: 6.0.0_Beta_1~31^2~1 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2591a6a5a6eee550974f33e0ea456b14b3209333;p=GitHub%2FWoltLab%2FWCF.git Add support for color scheme detection --- diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl index 1c3a5b74f2..fd8a12e108 100644 --- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl +++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl @@ -22,16 +22,9 @@ var COMPILER_TARGET_DEFAULT = {if !VISITOR_USE_TINY_BUILD || $__wcf->user->userID}true{else}false{/if}; {/if} - {if $__wcf->getStyleHandler()->getStyle()->hasDarkMode} + {if $__wcf->getStyleHandler()->getColorScheme() === 'system'} { - let colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; - try { - const value = localStorage.getItem("wsc_colorScheme"); - if (value === "light" || value === "dark") { - colorScheme = value; - } - } catch {} - + const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.dataset.colorScheme = colorScheme; } {/if} diff --git a/ts/WoltLabSuite/Core/Bootstrap.ts b/ts/WoltLabSuite/Core/Bootstrap.ts index fde7b576e6..13a57e954a 100644 --- a/ts/WoltLabSuite/Core/Bootstrap.ts +++ b/ts/WoltLabSuite/Core/Bootstrap.ts @@ -32,6 +32,7 @@ import { init as initSearch } from "./Ui/Search"; import { PageMenuMainProvider } from "./Ui/Page/Menu/Main/Provider"; import { whenFirstSeen } from "./LazyLoader"; import { adoptPageOverlayContainer } from "./Helper/PageOverlay"; +import User from "./User" import type { ColorScheme } from "./Controller/Style/ColorScheme"; @@ -150,8 +151,8 @@ export function setup(options: BoostrapOptions): void { DomChangeListener.add("WoltLabSuite/Core/Bootstrap", () => initA11y); - if (options.colorScheme === "system") { - void import("./Controller/Style/ColorScheme").then(({ setup }) => setup()); + if (options.colorScheme === "system" && User.userId) { + void import("./Controller/Style/ColorScheme").then(({ setup }) => setup(options.colorScheme)); } whenFirstSeen("[data-report-content]", () => { diff --git a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts index 327a72ef8b..256fc5635c 100644 --- a/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts +++ b/ts/WoltLabSuite/Core/Controller/Style/ColorScheme.ts @@ -5,6 +5,7 @@ * @copyright 2001-2023 WoltLab GmbH * @license GNU Lesser General Public License * @since 6.0 + * @woltlabExcludeBundle tiny */ import { getPhrase } from "WoltLabSuite/Core/Language"; @@ -26,12 +27,6 @@ function setScheme(scheme: ColorScheme): void { } else { applySystemScheme(); } - - try { - localStorage.setItem("wsc_colorScheme", currentScheme); - } catch { - /* Ignore any errors when accessing the `localStorage`. */ - } } function applySystemScheme(): void { @@ -81,21 +76,13 @@ function initializeButton(button: HTMLElement): void { }); } -export function setup(): void { +export function setup(colorScheme: ColorScheme): void { const button = document.querySelector(".jsButtonStyleColorScheme"); if (button) { - initializeButton(button); - } - - try { - const value = localStorage.getItem("wsc_colorScheme"); - if (value === "light" || value === "dark") { - currentScheme = value; - } - } catch { - /* Ignore any errors when accessing the `localStorage`. */ + //initializeButton(button); } + currentScheme = colorScheme; themeColor = document.querySelector('meta[name="theme-color"]')!; mediaQuery = matchMedia("(prefers-color-scheme: dark)"); diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl index 5f2b21a161..4240ffe6c0 100644 --- a/wcfsetup/install/files/acp/templates/header.tpl +++ b/wcfsetup/install/files/acp/templates/header.tpl @@ -2,7 +2,7 @@ @@ -50,17 +50,12 @@ {* Unlike the frontend, this option must be defined in the ACP at all times. *} var COMPILER_TARGET_DEFAULT = true; + {if $__wcf->getStyleHandler()->getColorScheme() === 'system'} { - let colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; - try { - const value = localStorage.getItem("wsc_colorScheme"); - if (value === "light" || value === "dark") { - colorScheme = value; - } - } catch {} - + const colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.dataset.colorScheme = colorScheme; } + {/if} @@ -99,7 +94,8 @@ AcpBootstrap.setup({ bootstrap: { - enableMobileMenu: {if PACKAGE_ID && $__isLogin|empty}true{else}false{/if} + colorScheme: '{@$__wcf->getStyleHandler()->getColorScheme()|encodeJS}', + enableMobileMenu: {if PACKAGE_ID && $__isLogin|empty}true{else}false{/if}, } }); }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js index 80f608319c..80333d98ef 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js @@ -7,7 +7,7 @@ * @copyright 2001-2022 WoltLab GmbH * @license GNU Lesser General Public License */ -define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools", "./Dom/Change/Listener", "./Environment", "./Event/Handler", "./Form/XsrfToken", "./Language", "./Ui/Dialog", "./Ui/Dropdown/Simple", "./Ui/Mobile", "./Ui/Page/Action", "./Ui/TabMenu", "./Ui/Tooltip", "./Ui/Page/JumpTo", "./Ui/Password", "./Ui/Empty", "./Ui/Object/Action", "./Ui/Object/Action/Delete", "./Ui/Object/Action/Toggle", "./Ui/Search", "./LazyLoader", "./Helper/PageOverlay", "perfect-scrollbar"], function (require, exports, tslib_1, Core, Picker_1, Devtools_1, Listener_1, Environment, EventHandler, XsrfToken, Language, Dialog_1, Simple_1, UiMobile, UiPageAction, UiTabMenu, UiTooltip, UiPageJumpTo, UiPassword, UiEmpty, UiObjectAction, UiObjectActionDelete, UiObjectActionToggle, Search_1, LazyLoader_1, PageOverlay_1) { +define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools", "./Dom/Change/Listener", "./Environment", "./Event/Handler", "./Form/XsrfToken", "./Language", "./Ui/Dialog", "./Ui/Dropdown/Simple", "./Ui/Mobile", "./Ui/Page/Action", "./Ui/TabMenu", "./Ui/Tooltip", "./Ui/Page/JumpTo", "./Ui/Password", "./Ui/Empty", "./Ui/Object/Action", "./Ui/Object/Action/Delete", "./Ui/Object/Action/Toggle", "./Ui/Search", "./LazyLoader", "./Helper/PageOverlay", "./User", "perfect-scrollbar"], function (require, exports, tslib_1, Core, Picker_1, Devtools_1, Listener_1, Environment, EventHandler, XsrfToken, Language, Dialog_1, Simple_1, UiMobile, UiPageAction, UiTabMenu, UiTooltip, UiPageJumpTo, UiPassword, UiEmpty, UiObjectAction, UiObjectActionDelete, UiObjectActionToggle, Search_1, LazyLoader_1, PageOverlay_1, User_1) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.setup = void 0; @@ -31,6 +31,7 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools", UiObjectAction = tslib_1.__importStar(UiObjectAction); UiObjectActionDelete = tslib_1.__importStar(UiObjectActionDelete); UiObjectActionToggle = tslib_1.__importStar(UiObjectActionToggle); + User_1 = tslib_1.__importDefault(User_1); // non strict equals by intent if (window.WCF == null) { window.WCF = {}; @@ -116,8 +117,8 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools", }); initA11y(); Listener_1.default.add("WoltLabSuite/Core/Bootstrap", () => initA11y); - if (options.colorScheme === "system") { - void new Promise((resolve_1, reject_1) => { require(["./Controller/Style/ColorScheme"], resolve_1, reject_1); }).then(tslib_1.__importStar).then(({ setup }) => setup()); + if (options.colorScheme === "system" && User_1.default.userId) { + void new Promise((resolve_1, reject_1) => { require(["./Controller/Style/ColorScheme"], resolve_1, reject_1); }).then(tslib_1.__importStar).then(({ setup }) => setup(options.colorScheme)); } (0, LazyLoader_1.whenFirstSeen)("[data-report-content]", () => { void new Promise((resolve_2, reject_2) => { require(["./Ui/Moderation/Report"], resolve_2, reject_2); }).then(tslib_1.__importStar).then(({ setup }) => setup()); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js index 69fc4906ee..ab100190cd 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Controller/Style/ColorScheme.js @@ -5,6 +5,7 @@ * @copyright 2001-2023 WoltLab GmbH * @license GNU Lesser General Public License * @since 6.0 + * @woltlabExcludeBundle tiny */ define(["require", "exports", "WoltLabSuite/Core/Language", "../../Ui/Dropdown/Builder", "../../Ui/Dropdown/Simple"], function (require, exports, Language_1, Builder_1, Simple_1) { "use strict"; @@ -22,12 +23,6 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "../../Ui/Dropdown/B else { applySystemScheme(); } - try { - localStorage.setItem("wsc_colorScheme", currentScheme); - } - catch { - /* Ignore any errors when accessing the `localStorage`. */ - } } function applySystemScheme() { if (currentScheme === "system") { @@ -71,20 +66,12 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "../../Ui/Dropdown/B } }); } - function setup() { + function setup(colorScheme) { const button = document.querySelector(".jsButtonStyleColorScheme"); if (button) { - initializeButton(button); - } - try { - const value = localStorage.getItem("wsc_colorScheme"); - if (value === "light" || value === "dark") { - currentScheme = value; - } - } - catch { - /* Ignore any errors when accessing the `localStorage`. */ + //initializeButton(button); } + currentScheme = colorScheme; themeColor = document.querySelector('meta[name="theme-color"]'); mediaQuery = matchMedia("(prefers-color-scheme: dark)"); mediaQuery.addEventListener("change", () => { diff --git a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php index b4bb8e65f1..c91c17ebdb 100644 --- a/wcfsetup/install/files/lib/system/style/StyleHandler.class.php +++ b/wcfsetup/install/files/lib/system/style/StyleHandler.class.php @@ -292,18 +292,18 @@ class StyleHandler extends SingletonFactory } /** - * The color scheme is 'light' for styles without a dark mode. For styles - * with a dark mode, the special value 'system' is used to indicate that - * the client is able to negotiate a color scheme. + * Returns the preferred color scheme of the user. For guests this value + * will always be 'system' to indicate that the device preferences should + * be used to negotiate the color scheme. * * @since 6.0 */ public function getColorScheme(): string { - if ($this->getStyle()->hasDarkMode) { + if (!WCF::getUser()->userID) { return 'system'; } - return 'light'; + return WCF::getUser()->getUserOption('colorScheme'); } }