Add a Settings area with 4 color themes (Aurora, Light, Ocean, Sunset)
Requested directly: "lets add some themeing into it now, perhaps under the configuration, have white/black, and some more colors." There was no existing app-wide Settings/Configuration surface - every prior setting lived in its own panel-specific modal (Fetch Data Settings, subtitle provider settings) - so this adds the app's first one: a palette-icon button in the sidebar footer opens a new Settings modal with a 2x2 grid of theme swatches. Four themes: Aurora (the existing dark teal/green look, unchanged, stays the default), Light (a clean white/black theme - the literal "white/black" ask), Ocean (a cool blue-toned dark variant), and Sunset (a warm amber-toned dark variant) - the "some more colors" part. Picking one applies instantly via a `data-theme` attribute on <html> and persists through new get_theme/save_theme commands (added to settings.rs/lib.rs alongside delivery 25's movie-naming- scheme fix), applied on every future launch by a boot-time effect in App.tsx so it takes effect even if Settings is never reopened. theme.css's variable set was expanded to cover every place a color was previously hardcoded outside the existing --dock/--surface/etc. variables, so the whole app actually re-themes instead of leaving dark boxes behind on the Light theme: button resting/hover/active shades, the Load-files popup background, the primary button's hover tint, the header's gradient stops, and five levels of white-tint row/button hover highlights (RenamePanel.css/Header.css) all moved to new variables (--btn-bg*, --popup-bg, --accent-hover, --header- grad-a/b, --tint-02/03/05/06/16) with theme-specific values - the light theme in particular needed dark tints instead of white ones for hover states to stay visible on a white background. Verified with a new Playwright script covering: default theme on a fresh install, the Settings modal listing all 4 themes with the right one marked selected, clicking a theme applying it immediately (actual computed background color and CSS variable checked, not just the data-theme attribute) and saving it, and a previously-saved theme applying on boot before Settings is ever opened. Screenshots taken of all 4 themes across the main view and the Naming Scheme editor (whose buttons/popups were part of the hardcoded-color cleanup) to confirm visually. All prior verification suites (47 checks across naming-scheme/match-fetch/hash-files/movie-scheme), `cargo test --workspace` (162 tests), and `npm run build` still pass clean.
This commit is contained in:
Renamr Scaffold
+134
-4
@@ -1,7 +1,13 @@
|
||||
/* Aurora Curator's UI theme — ported 1:1 (hex values) from the original FB-Mod fork's
|
||||
AuroraTheme.java / HeaderPanel.java / MainFrame.java so the rewrite looks like a
|
||||
continuation of that design rather than a random restyle. (The app takes its name,
|
||||
"Aurora Curator", from this same Aurora theme.) */
|
||||
/* Aurora Curator's UI theme. The "aurora" theme below is ported 1:1 (hex values) from
|
||||
the original FB-Mod fork's AuroraTheme.java / HeaderPanel.java / MainFrame.java so
|
||||
the rewrite looks like a continuation of that design rather than a random restyle
|
||||
(the app takes its name, "Aurora Curator", from this same Aurora theme) - it stays
|
||||
the default. The other three theme blocks below (light/ocean/sunset) are Aurora
|
||||
Curator's own additions, picked via Settings (gear icon, sidebar footer) and applied
|
||||
as a `data-theme` attribute on <html>; every visible color in the app is meant to
|
||||
flow through one of these custom properties so switching theme is just switching
|
||||
which block of them is active - see the file's own module-doc-style notes on the
|
||||
less obvious variables below. */
|
||||
:root {
|
||||
--dock: #08252b;
|
||||
--dock-deep: #051115;
|
||||
@@ -19,10 +25,134 @@
|
||||
--sunset: #f0b66b;
|
||||
--list-selection: #1e4d54;
|
||||
--dock-selection: #1d4850;
|
||||
/* A button's resting/hover/active background - was hardcoded (#172a31/#203941/
|
||||
#28515a) in a handful of spots in RenamePanel.css; pulled out to variables here so
|
||||
every theme can supply its own shade instead of leaving a dark box behind on a
|
||||
light theme. */
|
||||
--btn-bg: #172a31;
|
||||
--btn-bg-hover: #203941;
|
||||
--btn-bg-active: #28515a;
|
||||
/* A small floating popup's background (the Load-files split-button menu). */
|
||||
--popup-bg: #16262d;
|
||||
/* The primary action button's hover shade - a lightened version of --aurora-green. */
|
||||
--accent-hover: #70e3bb;
|
||||
/* The header bar's top-to-bottom gradient stops (its middle stop is --surface-alt). */
|
||||
--header-grad-a: #111e26;
|
||||
--header-grad-b: #0a161c;
|
||||
/* Subtle highlight tints for row/button hover states, each a light-on-dark overlay
|
||||
for this theme - previously hardcoded as literal rgba(255,255,255,X) across
|
||||
RenamePanel.css, which is exactly backwards on a light theme (a white tint on an
|
||||
already-light surface is invisible). Named by their alpha so the light theme below
|
||||
can supply the mirror-image dark tints at matching intensities. */
|
||||
--tint-02: rgba(255, 255, 255, 0.02);
|
||||
--tint-03: rgba(255, 255, 255, 0.03);
|
||||
--tint-05: rgba(255, 255, 255, 0.05);
|
||||
--tint-06: rgba(255, 255, 255, 0.06);
|
||||
--tint-16: rgba(255, 255, 255, 0.16);
|
||||
--sidebar-width: 158px;
|
||||
--header-height: 68px;
|
||||
}
|
||||
|
||||
/* Light - a clean white/black theme, the most literal reading of "white/black" from
|
||||
the theming request. --dock-deep doubles as "the text color that sits well on top
|
||||
of --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's
|
||||
white, since this theme's --aurora-green is deliberately darkened for contrast on a
|
||||
white page, the opposite of the dark themes' light-green-on-dark-text pairing. */
|
||||
:root[data-theme="light"] {
|
||||
--dock: #eef2f3;
|
||||
--dock-deep: #ffffff;
|
||||
--dock-mist: #dde7e9;
|
||||
--dock-line: #c7d3d5;
|
||||
--surface: #ffffff;
|
||||
--surface-alt: #f5f7f8;
|
||||
--surface-deep: #dfe6e8;
|
||||
--card: #f7f9fa;
|
||||
--text: #15191b;
|
||||
--muted-text: #5c6b6e;
|
||||
--aurora-green: #1f9d74;
|
||||
--aurora-cyan: #157e9c;
|
||||
--aurora-lilac: #7a68d9;
|
||||
--sunset: #c97a1f;
|
||||
--list-selection: #d7ece7;
|
||||
--dock-selection: #dbeee9;
|
||||
--btn-bg: #eef2f3;
|
||||
--btn-bg-hover: #e2e9eb;
|
||||
--btn-bg-active: #d2dcdd;
|
||||
--popup-bg: #ffffff;
|
||||
--accent-hover: #29b98b;
|
||||
--header-grad-a: #ffffff;
|
||||
--header-grad-b: #eef2f3;
|
||||
--tint-02: rgba(0, 0, 0, 0.02);
|
||||
--tint-03: rgba(0, 0, 0, 0.035);
|
||||
--tint-05: rgba(0, 0, 0, 0.05);
|
||||
--tint-06: rgba(0, 0, 0, 0.07);
|
||||
--tint-16: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
/* Ocean - a cool blue-toned dark variant. */
|
||||
:root[data-theme="ocean"] {
|
||||
--dock: #071c2e;
|
||||
--dock-deep: #030f1c;
|
||||
--dock-mist: #0f3350;
|
||||
--dock-line: #1c4a68;
|
||||
--surface: #071620;
|
||||
--surface-alt: #0c1e2b;
|
||||
--surface-deep: #1a3548;
|
||||
--card: #0f232f;
|
||||
--text: #e7f2f8;
|
||||
--muted-text: #93aebe;
|
||||
--aurora-green: #4fd0e8;
|
||||
--aurora-cyan: #5aa9ff;
|
||||
--aurora-lilac: #8ea0ff;
|
||||
--sunset: #ffb46b;
|
||||
--list-selection: #1a3f57;
|
||||
--dock-selection: #193a52;
|
||||
--btn-bg: #12293a;
|
||||
--btn-bg-hover: #1a3a4f;
|
||||
--btn-bg-active: #234a63;
|
||||
--popup-bg: #102432;
|
||||
--accent-hover: #7fe0f2;
|
||||
--header-grad-a: #0c1f2e;
|
||||
--header-grad-b: #061420;
|
||||
--tint-02: rgba(255, 255, 255, 0.02);
|
||||
--tint-03: rgba(255, 255, 255, 0.03);
|
||||
--tint-05: rgba(255, 255, 255, 0.05);
|
||||
--tint-06: rgba(255, 255, 255, 0.06);
|
||||
--tint-16: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
/* Sunset - a warm amber/coral-toned dark variant. */
|
||||
:root[data-theme="sunset"] {
|
||||
--dock: #2b1408;
|
||||
--dock-deep: #150a04;
|
||||
--dock-mist: #3d2011;
|
||||
--dock-line: #5c3319;
|
||||
--surface: #1a0f08;
|
||||
--surface-alt: #23140c;
|
||||
--surface-deep: #40261a;
|
||||
--card: #241610;
|
||||
--text: #f7ece3;
|
||||
--muted-text: #c2a190;
|
||||
--aurora-green: #f0955a;
|
||||
--aurora-cyan: #f0b66b;
|
||||
--aurora-lilac: #e0866f;
|
||||
--sunset: #ffd08a;
|
||||
--list-selection: #4a2c17;
|
||||
--dock-selection: #452a16;
|
||||
--btn-bg: #2c1a10;
|
||||
--btn-bg-hover: #3c2416;
|
||||
--btn-bg-active: #4f301d;
|
||||
--popup-bg: #24160e;
|
||||
--accent-hover: #f5b083;
|
||||
--header-grad-a: #24140b;
|
||||
--header-grad-b: #140b05;
|
||||
--tint-02: rgba(255, 255, 255, 0.02);
|
||||
--tint-03: rgba(255, 255, 255, 0.03);
|
||||
--tint-05: rgba(255, 255, 255, 0.05);
|
||||
--tint-06: rgba(255, 255, 255, 0.06);
|
||||
--tint-16: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user