From f9a32cd76e278191a8be2d25a3cea3012adec8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakob=20Sch=C3=B6dl?= Date: Thu, 18 Jun 2026 16:52:31 +0200 Subject: [PATCH 1/3] Add dark mode to the web client Class-based dark theme (Light / Auto / Dark) stored in localStorage, with AUTO following the OS preference. Toggle via a sidebar slider on desktop and a cycling icon in the mobile header. Co-Authored-By: Claude Opus 4.8 (1M context) --- web-client/index.html | 10 ++ web-client/src/components/AppLayout.tsx | 6 +- web-client/src/components/Button.tsx | 2 +- web-client/src/components/Nav.tsx | 12 ++- web-client/src/components/PasswordInput.tsx | 2 +- web-client/src/components/RecipeCard.tsx | 6 +- .../src/components/RecipeSaveButton.tsx | 8 +- web-client/src/components/SaveIndicator.tsx | 8 +- web-client/src/components/TagSelector.tsx | 16 +-- web-client/src/components/ThemeToggle.tsx | 102 ++++++++++++++++++ web-client/src/index.css | 14 +++ web-client/src/locales/de.ts | 6 ++ web-client/src/locales/en.ts | 6 ++ web-client/src/locales/hu.ts | 6 ++ web-client/src/pages/GeneratePage.tsx | 16 +-- web-client/src/pages/LibraryPage.tsx | 10 +- web-client/src/pages/LoginPage.tsx | 10 +- web-client/src/pages/NotFoundPage.tsx | 2 +- web-client/src/pages/ProfilePage.tsx | 60 +++++------ web-client/src/pages/RecipePage.tsx | 60 +++++------ web-client/src/theme.ts | 69 ++++++++++++ 21 files changed, 326 insertions(+), 105 deletions(-) create mode 100644 web-client/src/components/ThemeToggle.tsx create mode 100644 web-client/src/theme.ts diff --git a/web-client/index.html b/web-client/index.html index 4786d61..f8f8a38 100644 --- a/web-client/index.html +++ b/web-client/index.html @@ -5,6 +5,16 @@ Cooking Assistant +
diff --git a/web-client/src/components/AppLayout.tsx b/web-client/src/components/AppLayout.tsx index 2c08a7e..b7d42b6 100644 --- a/web-client/src/components/AppLayout.tsx +++ b/web-client/src/components/AppLayout.tsx @@ -1,6 +1,7 @@ import { Outlet, useLocation } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { Nav } from './Nav' +import { ThemeIconToggle } from './ThemeToggle' import { useUserLanguage } from '../useUserLanguage' const titleKeys = { @@ -23,8 +24,9 @@ export function AppLayout() {