From 135c71ae4da1226ebfdc50ee3836d3c3ad248b90 Mon Sep 17 00:00:00 2001 From: Masahiko AMANO Date: Tue, 7 Apr 2026 01:10:12 +0300 Subject: [PATCH] fix(frontend): theme-aware footer navbar colors - Add --color-nav-bg and --color-nav-active CSS variables - Dark: semi-transparent purple-dark tone (rgba 52,50,73 / 0.45 bg) - Light: light semi-transparent background, accent-tinted active highlight - Footer background and active nav item now use variables instead of hardcoded dark values Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/app.css | 4 ++++ frontend/src/routes/+layout.svelte | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index 70b5ab5..c4a02b6 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -12,6 +12,8 @@ --color-info: #4DC7ED; --color-warning: #F5E872; --color-tag-default: #444455; + --color-nav-bg: rgba(0, 0, 0, 0.45); + --color-nav-active: rgba(52, 50, 73, 0.72); --font-sans: 'Epilogue', sans-serif; } @@ -25,6 +27,8 @@ --color-text-primary: #111118; --color-text-muted: #555566; --color-tag-default: #ccccdd; + --color-nav-bg: rgba(240, 240, 245, 0.85); + --color-nav-active: rgba(90, 87, 143, 0.22); } @font-face { diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 8658611..7a83253 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -95,7 +95,7 @@ justify-content: space-between; align-items: center; padding: 10px; - background-color: rgba(0, 0, 0, 0.45); + background-color: var(--color-nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; @@ -115,7 +115,7 @@ .nav:hover, .nav.curr { - background-color: #343249; + background-color: var(--color-nav-active); color: var(--color-text-primary); }