VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add black theme

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