From a81d06181278db9609249fcbd91f9bd070170987 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Fri, 25 Sep 2026 14:18:39 +0200 Subject: [PATCH] add black theme --- dist/index.css | 9 +- dist/styles.css | 110 +++++------ dist/sw.js | 2 +- dist/version.txt | 2 +- src/Model/Global/settingsModel.ts | 1 + src/View/Modals/settingsModal.tsx | 8 +- src/View/translations.ts | 3 + .../Global/.settingsViewModel.ts.swp | Bin 36864 -> 24576 bytes src/ViewModel/Global/settingsViewModel.ts | 180 +++++++++--------- src/base.css | 12 +- 10 files changed, 177 insertions(+), 150 deletions(-) diff --git a/dist/index.css b/dist/index.css index ebc7f923..22a4e0f4 100644 --- a/dist/index.css +++ b/dist/index.css @@ -172,12 +172,13 @@ body[theme=dark] [color]:not([color=standard]).subtle-background { } #background-wrapper { position: fixed; - inset: 0px; - transform: scale(1.2); + top: var(--safe-area-top); + left: var(--safe-area-left); + right: var(--safe-area-right); + bottom: var(--safe-area-bottom); z-index: 1; pointer-events: none; overflow: hidden; - filter: blur(40px); background: var(--background); } main { @@ -187,6 +188,8 @@ main { content: ""; position: absolute; inset: 0px; + transform: scale(1.2); + filter: blur(40px); z-index: -1; pointer-events: none; } diff --git a/dist/styles.css b/dist/styles.css index e5532e16..84b7ed5a 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -16,11 +16,11 @@ html { /* ANIMATION -*/ + */ @keyframes slide-up { 0% { - opacity: 0; - transform: translateY(2rem); + opacity: 0; + transform: translateY(2rem); } } @@ -66,9 +66,9 @@ body { --text-info: #0043ce; --highlight-background: linear-gradient( - 45deg, - hsl(30, 100%, 50%), - hsl(40, 100%, 50%) + 45deg, + hsl(30, 100%, 50%), + hsl(40, 100%, 50%) ); --highlight-color: black; @@ -186,11 +186,11 @@ select:not(.tile *), button:hover, select:hover, button.tile.ghost:hover { - background: var(--surface-hover); + background: var(--surface-hover); } [selected]:hover { - background: var(--surface); + background: var(--surface); } } @@ -221,7 +221,7 @@ button.primary { @media (hover: hover) { button.primary:hover { - background: var(--primary-hover); + background: var(--primary-hover); } } @@ -244,7 +244,7 @@ button.ghost { @media (hover: hover) { button.ghost:hover { - background: var(--background-hover); + background: var(--background-hover); } } @@ -260,7 +260,7 @@ button.danger { @media (hover: hover) { button.danger:hover { - background: var(--danger-hover); + background: var(--danger-hover); } } @@ -318,7 +318,7 @@ body { /* TYPE -*/ + */ @font-face { font-family: IBM Plex Sans; @@ -375,8 +375,8 @@ footer { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not( - label.tile * - ), +label.tile * +), label.tile, select:not(label.tile *), textarea:not(label.tile *) { @@ -392,8 +392,8 @@ hr { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not( - label.tile * - ):not(.no-outline), +label.tile * +):not(.no-outline), label.tile:has(input:focus), label.tile:has(textarea:focus), textarea:focus:not(label.tile *), @@ -718,8 +718,8 @@ select { article > div { padding-bottom: calc( - var(--menu-height-mobile) + var(--control-height) + - var(--content-padding) + var(--menu-height-mobile) + var(--control-height) + + var(--content-padding) ); } @@ -1013,7 +1013,7 @@ input[type="radio"]:checked::before { /* LAYOUT -*/ + */ /* basic */ body, html { @@ -1021,8 +1021,12 @@ html { flex-direction: column-reverse; margin: 0px; - width: 100%; - height: 100%; + + position: fixed; + top: var(--safe-area-top); + left: var(--safe-area-left); + right: var(--safe-area-right); + bottom: var(--safe-area-bottom); } body, @@ -1069,8 +1073,8 @@ menu { article > div { padding-bottom: calc( - var(--menu-height-mobile) + var(--header-height) + - var(--content-padding) + var(--menu-height-mobile) + var(--header-height) + + var(--content-padding) ); } @@ -1159,91 +1163,91 @@ main { @media (min-width: 640px) { /* basic */ .mobile-only { - display: none !important; + display: none !important; } /* border, outline, etc */ .modal > div { - border: 1px solid var(--surface-border); + border: 1px solid var(--surface-border); } menu, main.split > article:first-of-type { - border-right: 1px solid var(--border); + border-right: 1px solid var(--border); } /* size */ .modal > div { - height: auto; - max-height: 100%; + height: auto; + max-height: 100%; } p, .modal > div { - max-width: var(--max-content-width); + max-width: var(--max-content-width); } .width-content { - max-width: var(--max-content-width) !important; + max-width: var(--max-content-width) !important; } input, label, select, textarea { - max-width: var(--max-input-width); + max-width: var(--max-input-width); } .width-input { - max-width: var(--max-input-width) !important; + max-width: var(--max-input-width) !important; } /* layout */ body { - flex-direction: row; + flex-direction: row; } main.split { - display: grid; - grid-template-columns: var(--split-pane-width-desktop) 1fr; + display: grid; + grid-template-columns: var(--split-pane-width-desktop) 1fr; } article > div { - padding-bottom: calc(var(--content-padding) + var(--control-height)); + padding-bottom: calc(var(--content-padding) + var(--control-height)); } menu { - position: static; + position: static; - width: var(--menu-width-desktop); - height: 100%; + width: var(--menu-width-desktop); + height: 100%; - flex-direction: column; - justify-content: start; - padding-top: 20px; + flex-direction: column; + justify-content: start; + padding-top: 20px; } .tab-link { - width: 100%; - height: var(--control-height); + width: 100%; + height: var(--control-height); - flex-direction: row; - gap: var(--gap-in-tab-links); + flex-direction: row; + gap: var(--gap-in-tab-links); - font-size: 1rem; + font-size: 1rem; } } /* desktop */ @media (min-width: 1024px) { body { - --split-pane-width-desktop: 400px; + --split-pane-width-desktop: 400px; } } /* STATE -*/ + */ [highlight]:not(:hover):not(:active) { color: var(--highlight-color) !important; @@ -1257,11 +1261,11 @@ STATE @keyframes highlight { 30%, 60% { - opacity: 1; + opacity: 1; } 0%, 100% { - opacity: 0.1; + opacity: 0.1; } } @@ -1274,13 +1278,13 @@ STATE 40%, 50%, 90% { - opacity: 1; + opacity: 1; } 10%, 30%, 60%, 80% { - opacity: 0.5; + opacity: 0.5; } } diff --git a/dist/sw.js b/dist/sw.js index 8f6f8d99..eafac3ea 100644 --- a/dist/sw.js +++ b/dist/sw.js @@ -1,4 +1,4 @@ -const VERSION = "2610 Beta 4.2" +const VERSION = "2610 Beta 4.7" function processUrl(event) { const url = event.request.url; diff --git a/dist/version.txt b/dist/version.txt index 914a132f..de2575b2 100644 --- a/dist/version.txt +++ b/dist/version.txt @@ -1 +1 @@ -2610 Beta 4.2 +2610 Beta 4.7 diff --git a/src/Model/Global/settingsModel.ts b/src/Model/Global/settingsModel.ts index c7e8e134..ed239ae8 100644 --- a/src/Model/Global/settingsModel.ts +++ b/src/Model/Global/settingsModel.ts @@ -107,4 +107,5 @@ export enum ThemeSettings { Light = "light", System = "system", Dynamic = "dynamic", + Black = "black", } diff --git a/src/View/Modals/settingsModal.tsx b/src/View/Modals/settingsModal.tsx index a237f180..5b57e49c 100644 --- a/src/View/Modals/settingsModal.tsx +++ b/src/View/Modals/settingsModal.tsx @@ -192,6 +192,10 @@ function SettingsAppearancePane( coreViewModel.translations.settings.themes.dynamic, ThemeSettings.Dynamic, ], + [ + coreViewModel.translations.settings.themes.system, + ThemeSettings.System, + ], [ coreViewModel.translations.settings.themes.dark, ThemeSettings.Dark, @@ -201,8 +205,8 @@ function SettingsAppearancePane( ThemeSettings.Light, ], [ - coreViewModel.translations.settings.themes.system, - ThemeSettings.System, + coreViewModel.translations.settings.themes.black, + ThemeSettings.Black, ], ]), settingsViewModel.theme, diff --git a/src/View/translations.ts b/src/View/translations.ts index 058921bc..583e7602 100644 --- a/src/View/translations.ts +++ b/src/View/translations.ts @@ -98,6 +98,7 @@ const englishTranslations = { dark: "Dark", light: "Light", system: "Device theme", + black: "Black", }, version: "Version", @@ -442,6 +443,7 @@ export const allTranslations: { dark: "Dunkel", light: "Hell", system: "Geräteeinstellung", + black: "Schwarz", }, version: "Version", @@ -754,6 +756,7 @@ export const allTranslations: { dark: "Oscuro", light: "Claro", system: "Según dispositivo", + black: "Negro", }, version: "Versión", diff --git a/src/ViewModel/Global/.settingsViewModel.ts.swp b/src/ViewModel/Global/.settingsViewModel.ts.swp index 6cd580f97f584687ca6cc9becc174f45d4f0ddb4..5799794d1157b8d8104fea22f09f79fb61966fe3 100644 GIT binary patch literal 24576 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 literal 36864 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 CM4 { - let theme: string = this.theme.value; + let theme: string = this.theme.value; + + if (theme == ThemeSettings.System) + theme = SettingsViewModel.getSystemTheme(); - if (theme == ThemeSettings.Dynamic) { - const scene = this.selectDynamicScene(); - this.setScene(scene); - return; - } - - if (theme == ThemeSettings.System) { - theme = SettingsViewModel.getSystemTheme(); - } - - if (theme == ThemeSettings.Dark) { - this.setScene(DynamicSceneNight); - } else { - this.setScene(DynamicSceneDay); - } + switch (theme) { + case ThemeSettings.Dynamic: + const scene = this.selectDynamicScene(); + this.setScene(scene); + break; + case ThemeSettings.Dark: + this.setScene(DynamicSceneNight); + break; + case ThemeSettings.Black: + this.setScene(DynamicSceneBlack); + break; + default: + this.setScene(DynamicSceneDay); + } }; selectDynamicScene = (): DynamicScene => { - let hour = new Date().getHours(); + let hour = new Date().getHours(); - if (hour >= 21 || hour <= 6) { - return DynamicSceneNight; - } else if (hour > 6 && hour < 10) { - return DynamicSceneSunrise; - } else if (hour < 14) { - return DynamicSceneDay; - } else if (hour < 17) { - return DynamicSceneAfternoon; - } else { - return DynamicSceneSunset; - } + if (hour >= 21 || hour <= 6) { + return DynamicSceneNight; + } else if (hour > 6 && hour < 10) { + return DynamicSceneSunrise; + } else if (hour < 14) { + return DynamicSceneDay; + } else if (hour < 17) { + return DynamicSceneAfternoon; + } else { + return DynamicSceneSunset; + } }; setScene = (scene: DynamicScene): void => { - document.body.style.setProperty( - "--backdrop-grass-filter", - `brightness(${scene.brightness})`, - ); + document.body.style.setProperty( + "--backdrop-grass-filter", + `brightness(${scene.brightness})`, + ); - function setSkyColor( - tone: 1 | 2, - hue: number, - saturation: number, - luma: number, - ) { - document.body.style.setProperty( - `--sky-${tone}`, - `hsl(${hue}, ${saturation}%, ${luma}%)`, - ); - } - setSkyColor(1, scene.hue1, scene.saturation, scene.luma); - setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10); + function setSkyColor( + tone: 1 | 2, + hue: number, + saturation: number, + luma: number, + ) { + document.body.style.setProperty( + `--sky-${tone}`, + `hsl(${hue}, ${saturation}%, ${luma}%)`, + ); + } + setSkyColor(1, scene.hue1, scene.saturation, scene.luma); + setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10); - document.body.setAttribute("theme", scene.baseTheme); + document.body.setAttribute("theme", scene.baseTheme); }; // exit close = (): void => { - this.coreViewModel.closeContext(this.contextId); + this.coreViewModel.closeContext(this.contextId); }; handleContextClose = (): void => { - this.isShowingSettingsModal.value = false; - if (this.requiresReload.value == true) { - window.location.reload(); - } + this.isShowingSettingsModal.value = false; + if (this.requiresReload.value == true) { + window.location.reload(); + } }; // init constructor(public readonly coreViewModel: CoreViewModel) { - super("settings"); + super("settings"); - this.username.value = coreViewModel.settingsModel.username; - this.usernameInput.value = coreViewModel.settingsModel.username; - this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek; - this.language.value = coreViewModel.settingsModel.language; - this.theme.value = coreViewModel.settingsModel.theme; + this.username.value = coreViewModel.settingsModel.username; + this.usernameInput.value = coreViewModel.settingsModel.username; + this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek; + this.language.value = coreViewModel.settingsModel.language; + this.theme.value = coreViewModel.settingsModel.theme; - // subscriptions - this.firstDayOfWeek.subscribe(this.setFirstDayofWeek); - this.language.subscribeSilent((newValue) => { - this.coreViewModel.settingsModel.setLanguage(newValue); - this.requiresReload.value = true; - }); - this.theme.subscribeSilent((newValue) => { - this.coreViewModel.settingsModel.setTheme(newValue); - }); + // subscriptions + this.firstDayOfWeek.subscribe(this.setFirstDayofWeek); + this.language.subscribeSilent((newValue) => { + this.coreViewModel.settingsModel.setLanguage(newValue); + this.requiresReload.value = true; + }); + this.theme.subscribeSilent((newValue) => { + this.coreViewModel.settingsModel.setTheme(newValue); + }); - // set theme - this.theme.subscribe(() => { - this.applyTheme(); - }); - SettingsViewModel.generateThemeMedia().addEventListener("change", () => - this.applyTheme(), - ); - const seconds = new Date().getSeconds(); - const secondsUntilNewMinute = 60 - seconds; - setTimeout(() => { - setInterval(this.applyTheme, 1000 * 60); - }, secondsUntilNewMinute); + // set theme + this.theme.subscribe(() => { + this.applyTheme(); + }); + SettingsViewModel.generateThemeMedia().addEventListener("change", () => + this.applyTheme(), + ); + const seconds = new Date().getSeconds(); + const secondsUntilNewMinute = 60 - seconds; + setTimeout(() => { + setInterval(this.applyTheme, 1000 * 60); + }, secondsUntilNewMinute); - // keystrokes - this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close); + // keystrokes + this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close); } static generateThemeMedia(): MediaQueryList { - return window.matchMedia("(prefers-color-scheme: dark)"); + return window.matchMedia("(prefers-color-scheme: dark)"); } static getSystemTheme(): string { - const media = SettingsViewModel.generateThemeMedia(); - return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light; + const media = SettingsViewModel.generateThemeMedia(); + return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light; } } export enum SettingsModalPages { Appearance, - Regional, - Info, + Regional, + Info, } export interface DynamicScene { @@ -224,3 +226,11 @@ export const DynamicSceneSunset: DynamicScene = { brightness: 0.4, baseTheme: ThemeSettings.Dark, }; +export const DynamicSceneBlack: DynamicScene = { + hue1: 0, + hue2: 0, + saturation: 0, + luma: 0, + brightness: 0, + baseTheme: ThemeSettings.Dark, +}; diff --git a/src/base.css b/src/base.css index 6352d378..03720b56 100644 --- a/src/base.css +++ b/src/base.css @@ -9,17 +9,16 @@ /* Gradient */ #background-wrapper { position: fixed; - - inset: 0px; - transform: scale(1.2); + top: var(--safe-area-top); + left: var(--safe-area-left); + right: var(--safe-area-right); + bottom: var(--safe-area-bottom); z-index: 1; pointer-events: none; overflow: hidden; - filter: blur(40px); - background: var(--background); } @@ -32,6 +31,9 @@ main { position: absolute; inset: 0px; + + transform: scale(1.2); + filter: blur(40px); z-index: -1; pointer-events: none;