Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5348 from WoltLab/dark-mode
Implement a dark mode for styles and the admin panel
- Loading branch information
Showing
61 changed files
with
1,657 additions
and
538 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,6 @@ | ||
| <!DOCTYPE html> | ||
| <html dir="{lang}wcf.global.pageDirection{/lang}" lang="{$__wcf->language->getBcp47()}"> | ||
| <html | ||
| dir="{lang}wcf.global.pageDirection{/lang}" | ||
| lang="{$__wcf->language->getBcp47()}" | ||
| data-color-scheme="{$__wcf->getStyleHandler()->getColorScheme()}" | ||
| > |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('individualScssDarkMode', ''); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /** | ||
| * Allows the addition of a dark mode to an existing style. | ||
| * | ||
| * @author Alexander Ebert | ||
| * @copyright 2001-2022 WoltLab GmbH | ||
| * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> | ||
| * @module WoltLabSuite/Core/Acp/Ui/Style/DarkMode | ||
| * @since 6.0 | ||
| */ | ||
|
|
||
| import { prepareRequest } from "../../../Ajax/Backend"; | ||
| import { confirmationFactory } from "../../../Component/Confirmation"; | ||
| import { getPhrase } from "../../../Language"; | ||
| import { show as showNotification } from "../../../Ui/Notification"; | ||
|
|
||
| async function promptConfirmation(endpoint: string, question: string): Promise<void> { | ||
| const ok = await confirmationFactory().custom(question).message(getPhrase("wcf.dialog.confirmation.cannotBeUndone")); | ||
| if (ok) { | ||
| const response = await prepareRequest(endpoint).post().fetchAsResponse(); | ||
| if (response?.ok) { | ||
| showNotification(undefined, () => { | ||
| window.location.reload(); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function setupAddDarkMode(): void { | ||
| const button = document.querySelector<HTMLButtonElement>(".jsButtonAddDarkMode"); | ||
| button?.addEventListener("click", () => { | ||
| void promptConfirmation(button.dataset.endpoint!, button.dataset.question!); | ||
| }); | ||
| } | ||
|
|
||
| export function setup(): void { | ||
| setupAddDarkMode(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /** | ||
| * Offer users the ability to enforce a specific color scheme. | ||
| * | ||
| * @author Alexander Ebert | ||
| * @copyright 2001-2023 WoltLab GmbH | ||
| * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> | ||
| * @since 6.0 | ||
| */ | ||
|
|
||
| import { getPhrase } from "WoltLabSuite/Core/Language"; | ||
| import { attach, create } from "../../Ui/Dropdown/Builder"; | ||
| import { registerCallback } from "../../Ui/Dropdown/Simple"; | ||
|
|
||
| export type ColorScheme = "dark" | "light" | "system"; | ||
|
|
||
| let currentScheme: ColorScheme = "system"; | ||
| let mediaQuery: MediaQueryList; | ||
|
|
||
| function setScheme(scheme: ColorScheme): void { | ||
| currentScheme = scheme; | ||
|
|
||
| if (currentScheme === "light" || currentScheme === "dark") { | ||
| document.documentElement.dataset.colorScheme = currentScheme; | ||
| } else { | ||
| applySystemScheme(); | ||
| } | ||
|
|
||
| try { | ||
| localStorage.setItem("wsc_colorScheme", currentScheme); | ||
| } catch { | ||
| /* Ignore any errors when accessing the `localStorage`. */ | ||
| } | ||
| } | ||
|
|
||
| function applySystemScheme(): void { | ||
| if (currentScheme === "system") { | ||
| document.documentElement.dataset.colorScheme = mediaQuery.matches ? "dark" : "light"; | ||
| } | ||
| } | ||
|
|
||
| function initializeButton(button: HTMLElement): void { | ||
| const dropdownMenu = create([ | ||
| { | ||
| identifier: "light", | ||
| label: getPhrase("wcf.style.setColorScheme.light"), | ||
| callback() { | ||
| setScheme("light"); | ||
| }, | ||
| }, | ||
| { | ||
| identifier: "dark", | ||
| label: getPhrase("wcf.style.setColorScheme.dark"), | ||
| callback() { | ||
| setScheme("dark"); | ||
| }, | ||
| }, | ||
| "divider", | ||
| { | ||
| identifier: "system", | ||
| label: getPhrase("wcf.style.setColorScheme.system"), | ||
| callback() { | ||
| setScheme("system"); | ||
| }, | ||
| }, | ||
| ]); | ||
|
|
||
| attach(dropdownMenu, button); | ||
|
|
||
| registerCallback(button.id, (_containerId, action) => { | ||
| if (action === "open") { | ||
| dropdownMenu.querySelectorAll(".active").forEach((element) => element.classList.remove("active")); | ||
| dropdownMenu.querySelector(`[data-identifier="${currentScheme}"]`)!.classList.add("active"); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export function setup(): void { | ||
| const button = document.querySelector<HTMLElement>(".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`. */ | ||
| } | ||
|
|
||
| mediaQuery = matchMedia("(prefers-color-scheme: dark)"); | ||
| mediaQuery.addEventListener("change", () => { | ||
| applySystemScheme(); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.