marcel/familienarchiv
1
0
Fork 0
Code Issues 108 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(dark-mode): replace neutral-black tokens with navy-tinted palette + fix WCAG AA #168

Merged
marcel merged 7 commits from feat/issue-166-dark-mode-navy-palette into main 2026-03-31 13:53:41 +02:00
Conversation 8 Commits 7 Files Changed 8 +7 -7
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a9b648454e - Show all commits

4
frontend/e2e/theme.spec.ts
View File

@@ -70,8 +70,8 @@ test.describe('Theme toggle', () => {
const header = document.querySelector('header'); const header = document.querySelector('header');
return header ? getComputedStyle(header).backgroundColor : null; return header ? getComputedStyle(header).backgroundColor : null;
}); });
// --c-header in dark mode = #01335e → rgb(1, 51, 94) // --c-header in dark mode = #012851 (brand navy) → rgb(1, 40, 81)
expect(headerBg).toBe('rgb(1, 51, 94)'); expect(headerBg).toBe('rgb(1, 40, 81)');
}); });
test('color-scheme is dark when data-theme=dark is set', async ({ page }) => { test('color-scheme is dark when data-theme=dark is set', async ({ page }) => {

2
frontend/src/routes/+layout.svelte
View File

@@ -35,7 +35,7 @@ const userInitials = $derived.by(() => {
<div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}> <div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
{#if !isAuthPage} {#if !isAuthPage}
<header class="sticky top-0 z-50 border-b border-line-2 bg-surface"> <header class="sticky top-0 z-50 border-b border-line-2 bg-header">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between"> <div class="flex h-16 justify-between">
<!-- Logo & Nav --> <!-- Logo & Nav -->

8
frontend/src/routes/layout.css
View File

@@ -127,8 +127,8 @@
--c-nav-active: rgba(180, 185, 255, 0.12); --c-nav-active: rgba(180, 185, 255, 0.12);
/* Header elevated above canvas for visual prominence */ /* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
--c-header: #01335e; --c-header: #012851;
--c-pdf-bg: #010e1e; --c-pdf-bg: #010e1e;
--c-pdf-ctrl: #011526; --c-pdf-ctrl: #011526;
@@ -161,8 +161,8 @@
--c-nav-active: rgba(180, 185, 255, 0.12); --c-nav-active: rgba(180, 185, 255, 0.12);
/* Header elevated above canvas for visual prominence */ /* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
--c-header: #01335e; --c-header: #012851;
--c-pdf-bg: #010e1e; --c-pdf-bg: #010e1e;
--c-pdf-ctrl: #011526; --c-pdf-ctrl: #011526;