jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark tone setting: grey Dark (default) vs near-black Darker

Browse Source 
Tone row appears under Theme when the effective theme is dark.
Grey palette uses macOS-like #26262a background.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-07-13 15:43:01 +02:00
co-authored by Claude Fable 5
parent eb86ca514d
commit bdae49ba24
4 changed files with 95 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/styles.css
+42 -16
View File
@@ -41,23 +41,23 @@
:root[data-theme='dark'] {
color-scheme: dark;
--background: oklch(0.141 0.005 285.823);
--background: oklch(0.27 0.006 286.03);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card: oklch(0.315 0.007 286.05);
--card-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary: oklch(0.37 0.013 285.805);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--muted: oklch(0.37 0.013 285.805);
--muted-foreground: oklch(0.74 0.015 286.07);
--accent: oklch(0.37 0.013 285.805);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.016 285.938);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
@@ -69,23 +69,23 @@
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--background: oklch(0.141 0.005 285.823);
--background: oklch(0.27 0.006 286.03);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card: oklch(0.315 0.007 286.05);
--card-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary: oklch(0.37 0.013 285.805);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--muted: oklch(0.37 0.013 285.805);
--muted-foreground: oklch(0.74 0.015 286.07);
--accent: oklch(0.37 0.013 285.805);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.696 0.17 149.2);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
--border: oklch(1 0 0 / 14%);
--input: oklch(1 0 0 / 18%);
--ring: oklch(0.552 0.016 285.938);
--icon-folder: oklch(0.75 0.11 250);
--icon-link: oklch(0.74 0.09 190);
@@ -96,6 +96,32 @@
}
}
/* Dark tone "darker" (data-dark-tone set by SettingsService; absent = grey "dark").
Near-black AMOLED palette. Duplicated for forced-dark and system-dark like the
token blocks above — the extra attribute outranks them. */
:root[data-theme='dark'][data-dark-tone='darker'] {
--background: oklch(0.141 0.005 285.823);
--card: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light'])[data-dark-tone='darker'] {
--background: oklch(0.141 0.005 285.823);
--card: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
}
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);