rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 80 Wiki Activity

fix(appearance): make Sahara actually differ from Warm light

Browse Source 
The sampled colours were Warm light's own (#faf6ea / #e8dfc9 / #ddd2b8) —
the annotated screenshot was that theme, and the request written on it was
"just a little darker". Keep the cream on panels and the entry strip, take
the page, tab bar, toolbars and table headers a shade deeper, and move the
accent from burnt orange to ochre so the two are told apart in the picker.
This commit is contained in:
rouggy
2026-08-14 00:07:50 +02:00
parent ab0db0ef3a
commit fbd62fda30
2 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SettingsModal.tsx
+1 -1
View File
@@ -412,7 +412,7 @@ const THEME_SWATCH: Record<Exclude<ThemeChoice, 'auto'>, { bg: string; card: str
'light-warm': { bg: '#e8dfc9', card: '#faf6ea', accent: '#b8410c' },
'light-cool': { bg: '#f4f6f8', card: '#ffffff', accent: '#2563eb' },
'light-sage': { bg: '#eef1ec', card: '#f8faf6', accent: '#2f855a' },
'sahara': { bg: '#e8dfca', card: '#faf6eb', accent: '#b45309' },
'sahara': { bg: '#dcceab', card: '#faf6eb', accent: '#a55f14' },
'light-nordic': { bg: '#eef1f7', card: '#ffffff', accent: '#4f46e5' },
'dim-slate': { bg: '#343b47', card: '#3d4552', accent: '#fb923c' },
'dark-warm': { bg: '#221d18', card: '#2e2820', accent: '#e07a2e' },
frontend/src/style.css
+22 -19
View File
@@ -775,34 +775,37 @@
color-scheme: light;
}
/* ---- Theme 1e: Sahara — warm sand, from an operator's own palette ---------
Three sands, lightest to darkest: panels sit on #faf6eb, the page behind them
on #e8dfca, and toolbars, table headers and rows on #ddd2ba. The order is the
point — a panel must read as lifted OFF the page, and the log grid as settled
INTO it, which is what makes rows scannable without lines everywhere.
Ink is a deep warm brown rather than black: pure black on sand glares. ---- */
/* ---- Theme 1e: Sahara — Warm light, taken a step deeper --------------------
Warm light's cream is kept for panels and the entry strip (#faf6eb, the one
surface an operator stares at while typing a call), but the page behind them
and every toolbar, tab bar and table header go one shade further into the
sand. That was the whole request: same family, just a little darker, so the
cream panels lift clearly instead of blending into the page.
Ink is a deep warm brown rather than black: pure black on sand glares.
The accent moves from Warm light's burnt orange to ochre to keep the two
themes apart at a glance in the theme picker. ---------------------------- */
[data-theme="sahara"] {
--background: #e8dfca; /* sand — the page */
--background: #dcceab; /* deep sand — the page */
--foreground: #2b2318; /* deep warm brown-ink */
--card: #faf6eb; /* lifted panel / entry strip */
--card: #faf6eb; /* lifted panel / entry strip — kept cream */
--card-foreground: #2b2318;
--popover: #faf6eb;
--popover-foreground: #2b2318;
--primary: #b45309; /* burnt sienna */
--primary: #a55f14; /* ochre */
--primary-foreground: #fffbf2;
--secondary: #ddd2ba;
--secondary: #cdbb92;
--secondary-foreground: #2b2318;
--muted: #ddd2ba; /* toolbars / table headers — the darkest sand */
--muted-foreground: #5c503c; /* readable on both sands */
--accent: #ecd9b8; /* warm highlight */
--muted: #cdbb92; /* toolbars / tab bar / table headers */
--muted-foreground: #544731; /* readable on both sands */
--accent: #e9d3a6; /* warm highlight */
--accent-foreground: #6b3a06;
--destructive: #b91c1c;
--destructive-foreground: #ffffff;
--destructive-muted: #fdecec;
--destructive-muted-foreground: #b91c1c;
--border: #c9bc9e; /* sand a step down again, so edges read */
--input: #c9bc9e;
--ring: #d97706; /* amber focus ring */
--border: #b6a179; /* sand a step down again, so edges read */
--input: #b6a179;
--ring: #c2760c; /* amber focus ring */
--success: #15803d;
--success-foreground: #ffffff;
@@ -840,10 +843,10 @@
--mx-call-work: #7fd6a4;
--mx-dx-conf: #3730a3;
--mx-dx-work: #a5b4fc;
--mx-none: #ddd2ba;
--mx-none: #cdbb92;
--scrollbar-thumb: #c0b193;
--scrollbar-thumb-hover: #a89676;
--scrollbar-thumb: #ac9868;
--scrollbar-thumb-hover: #927d4e;
--card-shadow: 0 1px 2px rgba(43, 35, 24, 0.07), 0 0 0 1px rgba(43, 35, 24, 0.03);
color-scheme: light;
}