R3ap3r/aurora-curator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add a Settings area with 4 color themes (Aurora, Light, Ocean, Sunset)

Browse Source 
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
2026-08-30 05:24:48 +00:00
parent 635d57f55b
commit 03390b43f1
9 changed files with 390 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Icons.tsx
+15
View File
@@ -161,3 +161,18 @@ export function HashIcon() {
</svg>
);
}
// Used for the app-wide Settings entry (theme picker) in the sidebar footer -
// deliberately a palette rather than reusing GearIcon, which already means something
// different (the per-file Naming Scheme editor's trigger button in the Rename panel).
export function PaletteIcon() {
return (
<svg {...{ ...base, width: 16, height: 16 }}>
<path d="M12 3.5c-4.7 0-8.5 3.8-8.5 8.5s3.8 8.5 8.5 8.5c1 0 1.7-.8 1.7-1.7 0-.45-.17-.86-.46-1.16-.29-.31-.46-.72-.46-1.17 0-.94.76-1.7 1.7-1.7h2c2.6 0 4.7-2.1 4.7-4.7 0-4.15-4.1-7.55-9.19-7.55Z" />
<circle cx="7.7" cy="11" r="1.15" fill="currentColor" stroke="none" />
<circle cx="10.2" cy="7.3" r="1.15" fill="currentColor" stroke="none" />
<circle cx="14.4" cy="7.6" r="1.15" fill="currentColor" stroke="none" />
<circle cx="16.6" cy="11.2" r="1.15" fill="currentColor" stroke="none" />
</svg>
);
}