From 17c77e28d77b96dc539f8aed8365d3fcb403a0ea Mon Sep 17 00:00:00 2001
From: fyui001 <yun.cod@gmail.com>
Date: Fri, 10 Jul 2026 01:44:17 +0900
Subject: [PATCH 1/3] Refresh design tokens on a neutral zinc palette

Unify the color system on zinc, dropping the blue-tinted primary.
Add class-based dark variant wiring, color-scheme declarations,
success/warning/info and table-header tokens, a high-contrast focus
ring, readable destructive foreground in both modes, and a
number-input spinner reset.
---
 app/globals.css | 137 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 91 insertions(+), 46 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index b3415a2..f94d9fa 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @layer base {
   *,
   ::after,
@@ -14,65 +16,100 @@
     color: var(--color-foreground);
   }
 
+  input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /*
+   * shadcn/ui "new-york" / zinc base color (Tailwind v4 CSS variables).
+   * Extended with success / warning / info and table-header tokens.
+   * --ring is set to the primary color so focus rings keep a >= 3:1 contrast
+   * ratio (WCAG 2.4.11) instead of the low-contrast neutral default.
+   */
   :root {
+    color-scheme: light;
     --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0.004 285.823);
+    --foreground: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0.004 285.823);
+    --card-foreground: oklch(0.141 0.005 285.823);
     --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0.004 285.823);
-    --primary: oklch(0.205 0.042 265.755);
-    --primary-foreground: oklch(0.985 0.002 285.823);
-    --secondary: oklch(0.97 0.001 285.823);
-    --secondary-foreground: oklch(0.205 0.042 265.755);
-    --muted: oklch(0.97 0.001 285.823);
-    --muted-foreground: oklch(0.556 0.016 285.938);
-    --accent: oklch(0.97 0.001 285.823);
-    --accent-foreground: oklch(0.205 0.042 265.755);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.21 0.006 285.885);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
     --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0.004 285.823);
-    --input: oklch(0.922 0.004 285.823);
-    --ring: oklch(0.708 0.028 285.823);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.21 0.006 285.885);
     --radius: 0.625rem;
-    --sidebar-background: oklch(0.985 0.002 285.823);
-    --sidebar-foreground: oklch(0.145 0.004 285.823);
-    --sidebar-primary: oklch(0.205 0.042 265.755);
-    --sidebar-primary-foreground: oklch(0.985 0.002 285.823);
-    --sidebar-accent: oklch(0.97 0.001 285.823);
-    --sidebar-accent-foreground: oklch(0.205 0.042 265.755);
-    --sidebar-border: oklch(0.922 0.004 285.823);
-    --sidebar-ring: oklch(0.708 0.028 285.823);
+    --success: oklch(0.448 0.119 151.328);
+    --success-foreground: oklch(1 0 0);
+    --warning: oklch(0.769 0.188 70.08);
+    --warning-foreground: oklch(0.344 0.065 58.147);
+    --info: oklch(0.541 0.1 222.717);
+    --info-foreground: oklch(1 0 0);
+    --table-header: oklch(0.985 0.002 247.858);
+    --table-header-foreground: oklch(0.208 0.042 265.755);
+    --sidebar-background: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.141 0.005 285.823);
+    --sidebar-primary: oklch(0.21 0.006 285.885);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-border: oklch(0.92 0.004 286.32);
+    --sidebar-ring: oklch(0.21 0.006 285.885);
   }
 
   .dark {
-    --background: oklch(0.145 0.004 285.823);
-    --foreground: oklch(0.985 0.002 285.823);
-    --card: oklch(0.205 0.006 285.885);
-    --card-foreground: oklch(0.985 0.002 285.823);
-    --popover: oklch(0.205 0.006 285.885);
-    --popover-foreground: oklch(0.985 0.002 285.823);
-    --primary: oklch(0.985 0.002 285.823);
-    --primary-foreground: oklch(0.205 0.042 265.755);
-    --secondary: oklch(0.274 0.006 285.885);
-    --secondary-foreground: oklch(0.985 0.002 285.823);
-    --muted: oklch(0.274 0.006 285.885);
-    --muted-foreground: oklch(0.655 0.015 285.823);
-    --accent: oklch(0.335 0.006 285.885);
-    --accent-foreground: oklch(0.985 0.002 285.823);
+    color-scheme: dark;
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0.01 285.885);
-    --sidebar-background: oklch(0.175 0.004 285.823);
-    --sidebar-foreground: oklch(0.985 0.002 285.823);
-    --sidebar-primary: oklch(0.985 0.002 285.823);
-    --sidebar-primary-foreground: oklch(0.205 0.006 285.885);
-    --sidebar-accent: oklch(0.274 0.006 285.885);
-    --sidebar-accent-foreground: oklch(0.985 0.002 285.823);
+    --ring: oklch(0.92 0.004 286.32);
+    --success: oklch(0.596 0.145 151.328);
+    --success-foreground: oklch(0.145 0.03 151.328);
+    --warning: oklch(0.82 0.14 70.08);
+    --warning-foreground: oklch(0.2 0.04 70.08);
+    --info: oklch(0.646 0.116 222.717);
+    --info-foreground: oklch(0.145 0.03 222.717);
+    --table-header: oklch(0.22 0.015 249.2);
+    --table-header-foreground: oklch(0.85 0.02 249.2);
+    --sidebar-background: oklch(0.18 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.92 0.004 286.32);
+    --sidebar-primary-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.5 0.01 285.885);
+    --sidebar-ring: oklch(0.92 0.004 286.32);
   }
 }
 
@@ -96,6 +133,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-table-header: var(--table-header);
+  --color-table-header-foreground: var(--table-header-foreground);
   --color-sidebar: var(--sidebar-background);
   --color-sidebar-background: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);

From a05be46bcabea25739e6bc06d9d65f48bc2ee520 Mon Sep 17 00:00:00 2001
From: fyui001 <yun.cod@gmail.com>
Date: Fri, 10 Jul 2026 01:52:56 +0900
Subject: [PATCH 2/3] Add system theme preference with SSR no-flash wiring

Extend the theme from a light/dark toggle to a light/dark/system
preference. The middleware forwards the cookie on every page (the
login page previously never received the theme header and always
rendered light), the layout sets the dark class at SSR for explicit
choices, and an inline no-flash script resolves the OS scheme before
hydration when the preference is system.

The header toggle becomes a three-option dropdown, the display
settings switch becomes a select, and Storybook gains a light/dark
toolbar plus the a11y addon.
---
 .storybook/main.ts                            |  1 +
 .storybook/preview.tsx                        | 53 +++++++++++-
 app/layout.tsx                                | 27 ++++--
 components/layout/AppShell.tsx                | 18 +---
 components/page-component/SettingsPage.tsx    |  7 +-
 components/settings/DisplaySettings.tsx       | 51 +++++++----
 components/theme/ThemeProvider.tsx            | 73 ++++++++++++----
 components/theme/ThemeToggle.tsx              | 85 +++++++++++++++++++
 components/theme/noFlashThemeScript.ts        | 17 ++++
 middleware.ts                                 | 15 +++-
 package.json                                  |  1 +
 stories/decorators.tsx                        | 15 +---
 stories/layout/AppShell.stories.tsx           |  2 -
 stories/settings/AccountSettings.stories.tsx  |  2 -
 stories/settings/DisplaySettings.stories.tsx  | 21 +++--
 .../ExternalServiceSettings.stories.tsx       |  2 -
 stories/settings/SettingsPage.stories.tsx     |  3 +-
 stories/theme/ThemeToggle.stories.tsx         | 21 +++++
 yarn.lock                                     | 10 ++-
 19 files changed, 335 insertions(+), 89 deletions(-)
 create mode 100644 components/theme/ThemeToggle.tsx
 create mode 100644 components/theme/noFlashThemeScript.ts
 create mode 100644 stories/theme/ThemeToggle.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1bed9c0..4239a54 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+  addons: ['@storybook/addon-a11y'],
   framework: {
     name: '@storybook/nextjs',
     options: {},
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index bc5e780..7c5ffda 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,10 +1,33 @@
 import React, { useEffect } from 'react'
 import type { Preview } from '@storybook/react'
 import '../app/globals.css'
-import { ThemeProvider } from '../components/theme/ThemeProvider'
+import {
+  ThemeProvider,
+  type ThemePreference,
+} from '../components/theme/ThemeProvider'
+
+/**
+ * Storybook ツールバーの `theme` グローバルに応じて preview ドキュメントに
+ * `dark` クラスを適用し、ThemeProvider でラップする。実アプリでは SSR の
+ * layout が <html> に初期クラスを設定するが、Storybook に SSR は無いため
+ * ここで設定する。
+ */
+function WithTheme({
+  theme,
+  children,
+}: {
+  theme: ThemePreference
+  children: React.ReactNode
+}) {
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+  }, [theme])
+
+  return <ThemeProvider initialPreference={theme}>{children}</ThemeProvider>
+}
 
 const globalDecorators: Preview['decorators'] = [
-  (Story) => {
+  (Story, context) => {
     useEffect(() => {
       const handler = (e: MouseEvent) => {
         const anchor = (e.target as HTMLElement).closest('a[href]')
@@ -20,10 +43,13 @@ const globalDecorators: Preview['decorators'] = [
       document.addEventListener('click', handler, true)
       return () => document.removeEventListener('click', handler, true)
     }, [])
+
+    const theme: ThemePreference =
+      context.globals.theme === 'dark' ? 'dark' : 'light'
     return (
-      <ThemeProvider initialMode="light">
+      <WithTheme theme={theme}>
         <Story />
-      </ThemeProvider>
+      </WithTheme>
     )
   },
 ]
@@ -43,6 +69,25 @@ const preview: Preview = {
         pathname: '/',
       },
     },
+    a11y: {
+      // a11y 違反は UI 上に表示するだけで、まだ実行は失敗させない
+      test: 'todo',
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'テーマ',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'sun',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
   },
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 0f57bc1..f29de53 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { headers } from 'next/headers'
 import './globals.css'
 import { ThemeProvider } from 'components/theme/ThemeProvider'
+import { NO_FLASH_THEME_SCRIPT } from 'components/theme/noFlashThemeScript'
 
 export const metadata: Metadata = {
   title: 'Grace',
@@ -14,13 +15,29 @@ export default async function RootLayout({
   children: React.ReactNode
 }>) {
   const headerStore = await headers()
-  const initialMode =
-    headerStore.get('x-theme-mode') === 'dark' ? 'dark' : 'light'
+  const themeHeader = headerStore.get('x-theme-mode')
+  const explicitMode: 'light' | 'dark' | null =
+    themeHeader === 'dark' ? 'dark' : themeHeader === 'light' ? 'light' : null
+  const initialPreference: 'light' | 'dark' | 'system' =
+    explicitMode ?? 'system'
 
   return (
-    <html lang="ja" className={initialMode === 'dark' ? 'dark' : ''}>
-      <body>
-        <ThemeProvider initialMode={initialMode}>{children}</ThemeProvider>
+    <html
+      lang="ja"
+      className={explicitMode === 'dark' ? 'dark' : undefined}
+      suppressHydrationWarning
+    >
+      <body suppressHydrationWarning>
+        {explicitMode === null && (
+          // 定数のちらつき防止スクリプトを注入（ユーザー入力なし・XSS リスクなし）
+          <script
+            id="no-flash-theme-init"
+            dangerouslySetInnerHTML={{ __html: NO_FLASH_THEME_SCRIPT }}
+          />
+        )}
+        <ThemeProvider initialPreference={initialPreference}>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/components/layout/AppShell.tsx b/components/layout/AppShell.tsx
index b63a3b8..e7d62ad 100644
--- a/components/layout/AppShell.tsx
+++ b/components/layout/AppShell.tsx
@@ -27,8 +27,6 @@ import {
   ChevronDown,
   ChevronRight,
   User,
-  Sun,
-  Moon,
   Settings,
   LogOut,
   X,
@@ -36,7 +34,7 @@ import {
   Pill,
   ClipboardList,
 } from 'lucide-react'
-import { useTheme } from 'components/theme/ThemeProvider'
+import { ThemeToggle } from 'components/theme/ThemeToggle'
 import { cn } from '@/lib/utils'
 
 const SIDEBAR_WIDTH = 280
@@ -115,7 +113,6 @@ export default function AppShell({
   const pathname = usePathname()
   const router = useRouter()
   const isMobile = useIsMobile()
-  const { mode, toggleMode } = useTheme()
   const [sidebarOpen, setSidebarOpenState] = useState(initialSidebarOpen)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [groupOpen, setGroupOpen] = useState(true)
@@ -314,18 +311,7 @@ export default function AppShell({
           </Link>
           <div className="flex-1" />
           <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="テーマ切替"
-              onClick={toggleMode}
-            >
-              {mode === 'dark' ? (
-                <Sun className="size-4" />
-              ) : (
-                <Moon className="size-4" />
-              )}
-            </Button>
+            <ThemeToggle />
             {user && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
diff --git a/components/page-component/SettingsPage.tsx b/components/page-component/SettingsPage.tsx
index bc3da5a..b9afa1c 100644
--- a/components/page-component/SettingsPage.tsx
+++ b/components/page-component/SettingsPage.tsx
@@ -14,7 +14,7 @@ interface SettingsPageProps {
 }
 
 export default function SettingsPage({ userName }: SettingsPageProps) {
-  const { mode, toggleMode } = useTheme()
+  const { preference, setPreference } = useTheme()
 
   const apiClient = useApiClient()
   const [discordUserId, setDiscordUserId] = useState<string | null>(null)
@@ -52,7 +52,10 @@ export default function SettingsPage({ userName }: SettingsPageProps) {
     <div className="flex flex-col gap-5">
       <h1 className="text-2xl font-bold">設定</h1>
 
-      <DisplaySettings mode={mode} onToggle={toggleMode} />
+      <DisplaySettings
+        preference={preference}
+        onChangePreference={setPreference}
+      />
 
       <ExternalServiceSettings
         discordUserId={discordUserId}
diff --git a/components/settings/DisplaySettings.tsx b/components/settings/DisplaySettings.tsx
index 7f5268d..5376afd 100644
--- a/components/settings/DisplaySettings.tsx
+++ b/components/settings/DisplaySettings.tsx
@@ -1,14 +1,28 @@
 import { Card, CardContent, CardHeader, CardTitle } from 'components/ui/card'
-import { Switch } from 'components/ui/switch'
+import { Label } from 'components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'components/ui/select'
+import type { ThemePreference } from 'components/theme/ThemeProvider'
 
 interface DisplaySettingsProps {
-  mode: 'light' | 'dark'
-  onToggle: () => void
+  preference: ThemePreference
+  onChangePreference: (preference: ThemePreference) => void
 }
 
+const THEME_OPTIONS: { value: ThemePreference; label: string }[] = [
+  { value: 'light', label: 'ライト' },
+  { value: 'dark', label: 'ダーク' },
+  { value: 'system', label: 'システム' },
+]
+
 export default function DisplaySettings({
-  mode,
-  onToggle,
+  preference,
+  onChangePreference,
 }: DisplaySettingsProps) {
   return (
     <Card>
@@ -17,17 +31,24 @@ export default function DisplaySettings({
       </CardHeader>
       <CardContent>
         <div className="flex items-center gap-3">
-          <Switch
-            id="dark-mode"
-            checked={mode === 'dark'}
-            onCheckedChange={onToggle}
-          />
-          <label
-            htmlFor="dark-mode"
-            className="text-sm cursor-pointer select-none"
+          <Label htmlFor="theme-preference">テーマ</Label>
+          <Select
+            value={preference}
+            onValueChange={(value) =>
+              onChangePreference(value as ThemePreference)
+            }
           >
-            ダークモード
-          </label>
+            <SelectTrigger id="theme-preference" className="w-40">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {THEME_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       </CardContent>
     </Card>
diff --git a/components/theme/ThemeProvider.tsx b/components/theme/ThemeProvider.tsx
index fea396c..fe575c8 100644
--- a/components/theme/ThemeProvider.tsx
+++ b/components/theme/ThemeProvider.tsx
@@ -2,26 +2,34 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
+  useEffect,
   useState,
-  useCallback,
   type ReactNode,
 } from 'react'
 
 type ThemeMode = 'light' | 'dark'
+export type ThemePreference = ThemeMode | 'system'
 
 interface ThemeContextValue {
+  /** 実際に適用されているテーマ（`system` 時は matchMedia の解決結果） */
   mode: ThemeMode
-  toggleMode: () => void
+  /** ユーザーの選択（`light` / `dark` / `system`） */
+  preference: ThemePreference
+  /** 選択を変更する（Cookie に永続化） */
+  setPreference: (pref: ThemePreference) => void
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 const COOKIE_KEY = 'grace-theme-mode'
 
-function applyTheme(mode: ThemeMode) {
-  document.cookie = `${COOKIE_KEY}=${mode};path=/;max-age=31536000`
+function writeCookie(value: ThemePreference) {
+  document.cookie = `${COOKIE_KEY}=${value};path=/;max-age=31536000;SameSite=Lax`
+}
 
+function applyClass(mode: ThemeMode) {
   if (mode === 'dark') {
     document.documentElement.classList.add('dark')
   } else {
@@ -29,25 +37,60 @@ function applyTheme(mode: ThemeMode) {
   }
 }
 
+function resolveSystemMode(): ThemeMode {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
 export function ThemeProvider({
   children,
-  initialMode,
+  initialPreference,
 }: {
   children: ReactNode
-  initialMode: ThemeMode
+  initialPreference: ThemePreference
 }) {
-  const [mode, setMode] = useState<ThemeMode>(initialMode)
-
-  const toggleMode = useCallback(() => {
-    setMode((prev) => {
-      const next = prev === 'light' ? 'dark' : 'light'
-      applyTheme(next)
-      return next
-    })
+  const [preference, setPreferenceState] =
+    useState<ThemePreference>(initialPreference)
+  const [mode, setMode] = useState<ThemeMode>(() =>
+    initialPreference === 'dark' ? 'dark' : 'light',
+  )
+
+  // useEffect の例外: ブラウザ API (window.matchMedia) の購読とクリーンアップ
+  useEffect(() => {
+    if (preference !== 'system') return
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const apply = (matches: boolean) => {
+      const next: ThemeMode = matches ? 'dark' : 'light'
+      setMode(next)
+      applyClass(next)
+    }
+
+    apply(mediaQuery.matches)
+
+    const listener = (e: MediaQueryListEvent) => apply(e.matches)
+    mediaQuery.addEventListener('change', listener)
+    return () => mediaQuery.removeEventListener('change', listener)
+  }, [preference])
+
+  const setPreference = useCallback((next: ThemePreference) => {
+    setPreferenceState(next)
+    writeCookie(next)
+
+    if (next === 'system') {
+      // effect でも反映されるが、選択直後の描画を速くするためここでも適用する
+      const resolved = resolveSystemMode()
+      setMode(resolved)
+      applyClass(resolved)
+    } else {
+      setMode(next)
+      applyClass(next)
+    }
   }, [])
 
   return (
-    <ThemeContext.Provider value={{ mode, toggleMode }}>
+    <ThemeContext.Provider value={{ mode, preference, setPreference }}>
       {children}
     </ThemeContext.Provider>
   )
diff --git a/components/theme/ThemeToggle.tsx b/components/theme/ThemeToggle.tsx
new file mode 100644
index 0000000..b9aabde
--- /dev/null
+++ b/components/theme/ThemeToggle.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { Laptop, Moon, Sun, Check, type LucideIcon } from 'lucide-react'
+import { Button } from 'components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'components/ui/dropdown-menu'
+import { useTheme, type ThemePreference } from 'components/theme/ThemeProvider'
+
+interface ThemeToggleProps {
+  className?: string
+  variant?: React.ComponentProps<typeof Button>['variant']
+  size?: React.ComponentProps<typeof Button>['size']
+}
+
+const OPTIONS: { value: ThemePreference; label: string; Icon: LucideIcon }[] = [
+  { value: 'light', label: 'ライト', Icon: Sun },
+  { value: 'dark', label: 'ダーク', Icon: Moon },
+  { value: 'system', label: 'システム', Icon: Laptop },
+]
+
+const MODE_LABELS: Record<ThemePreference, string> = {
+  light: 'ライト',
+  dark: 'ダーク',
+  system: 'システム',
+}
+
+/**
+ * テーマ切替。ライト / ダーク / システムの3択。
+ * トリガーアイコンは `preference` に追従する（`system` 選択時は Laptop）。
+ */
+export function ThemeToggle({
+  className,
+  variant = 'ghost',
+  size = 'icon-sm',
+}: ThemeToggleProps) {
+  const { mode, preference, setPreference } = useTheme()
+
+  const TriggerIcon =
+    preference === 'light' ? Sun : preference === 'dark' ? Moon : Laptop
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant={variant}
+          size={size}
+          aria-label="テーマ切替"
+          className={className}
+        >
+          <TriggerIcon className="size-4" />
+          <span className="sr-only">
+            現在のテーマ: {MODE_LABELS[preference]}（表示は {MODE_LABELS[mode]}
+            ）
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuLabel>テーマ</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {OPTIONS.map(({ value, label, Icon }) => {
+          const selected = preference === value
+          return (
+            <DropdownMenuItem
+              key={value}
+              onSelect={() => setPreference(value)}
+              className="flex items-center justify-between"
+            >
+              <span className="flex items-center gap-2">
+                <Icon className="size-4" />
+                {label}
+              </span>
+              {selected && <Check className="size-4" aria-hidden="true" />}
+            </DropdownMenuItem>
+          )
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/components/theme/noFlashThemeScript.ts b/components/theme/noFlashThemeScript.ts
new file mode 100644
index 0000000..c1e598b
--- /dev/null
+++ b/components/theme/noFlashThemeScript.ts
@@ -0,0 +1,17 @@
+/**
+ * テーマ設定が `system`（Cookie 未設定または `system`）のとき、SSR では
+ * `prefers-color-scheme` を読めないため、hydration 前にこのインラインスクリプトで
+ * `dark` クラスを適用する。「ライトで描画→mount 後にダークへ切替」のちらつき防止。
+ * 明示的な light/dark が選択されていない場合のみ layout が注入する。
+ *
+ * 内容はユーザー入力を含まない定数文字列のため XSS リスクはない。
+ */
+export const NO_FLASH_THEME_SCRIPT = `
+(function(){
+  try {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.classList.add('dark');
+    }
+  } catch (_) {}
+})();
+`
diff --git a/middleware.ts b/middleware.ts
index 1aacea4..84f0bea 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -10,10 +10,19 @@ function redirectToLoginPage(request: NextRequest) {
 }
 
 export async function middleware(request: NextRequest) {
-  const themeMode = request.cookies.get('grace-theme-mode')?.value ?? 'light'
+  // テーマ設定 Cookie を x-theme-mode ヘッダーとして転送し、layout が SSR 時点で
+  // 初期テーマを確定できるようにする。未設定・不明値は `system`（クライアントで
+  // prefers-color-scheme を解決）。
+  const themeCookie = request.cookies.get('grace-theme-mode')?.value
+  const themeMode =
+    themeCookie === 'dark' ||
+    themeCookie === 'light' ||
+    themeCookie === 'system'
+      ? themeCookie
+      : 'system'
   const sidebarOpen = request.cookies.get('grace-sidebar-open')?.value ?? 'true'
   const requestHeaders = new Headers(request.headers)
-  requestHeaders.set('x-theme-mode', themeMode === 'dark' ? 'dark' : 'light')
+  requestHeaders.set('x-theme-mode', themeMode)
   requestHeaders.set(
     'x-sidebar-open',
     sidebarOpen === 'false' ? 'false' : 'true',
@@ -53,5 +62,5 @@ export async function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/(dashboard|settings|medication)(/?.*)', '/setup'],
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
 }
diff --git a/package.json b/package.json
index f5c0bc3..02c461e 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
+    "@storybook/addon-a11y": "^10.2.8",
     "@storybook/nextjs": "^10.2.8",
     "@storybook/react": "^10.2.8",
     "@types/node": "^25.0.3",
diff --git a/stories/decorators.tsx b/stories/decorators.tsx
index e8f89db..f741814 100644
--- a/stories/decorators.tsx
+++ b/stories/decorators.tsx
@@ -1,5 +1,4 @@
 import type { Decorator } from '@storybook/react'
-import { ThemeProvider } from '../components/theme/ThemeProvider'
 import AppShell from '../components/layout/AppShell'
 
 const sampleUser = {
@@ -7,16 +6,8 @@ const sampleUser = {
   iconUrl: null,
 }
 
-export const withThemeProvider: Decorator = (Story) => (
-  <ThemeProvider initialMode="light">
-    <Story />
-  </ThemeProvider>
-)
-
 export const withAppShell: Decorator = (Story) => (
-  <ThemeProvider initialMode="light">
-    <AppShell user={sampleUser}>
-      <Story />
-    </AppShell>
-  </ThemeProvider>
+  <AppShell user={sampleUser}>
+    <Story />
+  </AppShell>
 )
diff --git a/stories/layout/AppShell.stories.tsx b/stories/layout/AppShell.stories.tsx
index db79d07..021895e 100644
--- a/stories/layout/AppShell.stories.tsx
+++ b/stories/layout/AppShell.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import AppShell from '../../components/layout/AppShell'
-import { withThemeProvider } from '../decorators'
 
 const sampleUser = {
   name: 'テストユーザー',
@@ -10,7 +9,6 @@ const sampleUser = {
 const meta = {
   title: 'Layout/AppShell',
   component: AppShell,
-  decorators: [withThemeProvider],
   parameters: {
     layout: 'fullscreen',
     nextjs: {
diff --git a/stories/settings/AccountSettings.stories.tsx b/stories/settings/AccountSettings.stories.tsx
index d9809b3..8f4daeb 100644
--- a/stories/settings/AccountSettings.stories.tsx
+++ b/stories/settings/AccountSettings.stories.tsx
@@ -1,11 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import AccountSettings from '../../components/settings/AccountSettings'
-import { withThemeProvider } from '../decorators'
 
 const meta = {
   title: 'Components/AccountSettings',
   component: AccountSettings,
-  decorators: [withThemeProvider],
   parameters: {
     layout: 'padded',
   },
diff --git a/stories/settings/DisplaySettings.stories.tsx b/stories/settings/DisplaySettings.stories.tsx
index 577443e..072da3a 100644
--- a/stories/settings/DisplaySettings.stories.tsx
+++ b/stories/settings/DisplaySettings.stories.tsx
@@ -1,11 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import DisplaySettings from '../../components/settings/DisplaySettings'
-import { withThemeProvider } from '../decorators'
 
 const meta = {
   title: 'Components/DisplaySettings',
   component: DisplaySettings,
-  decorators: [withThemeProvider],
   parameters: {
     layout: 'padded',
   },
@@ -14,16 +12,23 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const LightMode: Story = {
+export const Light: Story = {
   args: {
-    mode: 'light',
-    onToggle: () => {},
+    preference: 'light',
+    onChangePreference: () => {},
   },
 }
 
-export const DarkMode: Story = {
+export const Dark: Story = {
   args: {
-    mode: 'dark',
-    onToggle: () => {},
+    preference: 'dark',
+    onChangePreference: () => {},
+  },
+}
+
+export const System: Story = {
+  args: {
+    preference: 'system',
+    onChangePreference: () => {},
   },
 }
diff --git a/stories/settings/ExternalServiceSettings.stories.tsx b/stories/settings/ExternalServiceSettings.stories.tsx
index ba0699d..176cc47 100644
--- a/stories/settings/ExternalServiceSettings.stories.tsx
+++ b/stories/settings/ExternalServiceSettings.stories.tsx
@@ -1,11 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import ExternalServiceSettings from '../../components/settings/ExternalServiceSettings'
-import { withThemeProvider } from '../decorators'
 
 const meta = {
   title: 'Components/ExternalServiceSettings',
   component: ExternalServiceSettings,
-  decorators: [withThemeProvider],
   parameters: {
     layout: 'padded',
   },
diff --git a/stories/settings/SettingsPage.stories.tsx b/stories/settings/SettingsPage.stories.tsx
index c6ee642..54fb217 100644
--- a/stories/settings/SettingsPage.stories.tsx
+++ b/stories/settings/SettingsPage.stories.tsx
@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import SettingsPage from '../../components/page-component/SettingsPage'
-import { withAppShell, withThemeProvider } from '../decorators'
+import { withAppShell } from '../decorators'
 
 const meta = {
   title: 'Pages/Settings',
   component: SettingsPage,
-  decorators: [withThemeProvider],
   parameters: {
     layout: 'fullscreen',
     nextjs: {
diff --git a/stories/theme/ThemeToggle.stories.tsx b/stories/theme/ThemeToggle.stories.tsx
new file mode 100644
index 0000000..9d301f3
--- /dev/null
+++ b/stories/theme/ThemeToggle.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ThemeToggle } from '../../components/theme/ThemeToggle'
+
+const meta = {
+  title: 'Components/ThemeToggle',
+  component: ThemeToggle,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ThemeToggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+  },
+}
diff --git a/yarn.lock b/yarn.lock
index c4642f1..a5d8265 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2598,6 +2598,14 @@
   resolved "https://registry.yarnpkg.com/@standard-schema/utils/-/utils-0.3.0.tgz#3d5e608f16c2390c10528e98e59aef6bf73cae7b"
   integrity sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==
 
+"@storybook/addon-a11y@^10.2.8":
+  version "10.4.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-10.4.6.tgz#eb5acd538a711d1fa0529d3a46731de021149228"
+  integrity sha512-XCJy+f0DFOiCgUU9knRDlLDxVFI+AAQ3/wE/NF85zB9iDPPS2DwkSN+mas3zDgHt66zhN8Cq3/UiyCDUweV9Zw==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+    axe-core "^4.2.0"
+
 "@storybook/builder-webpack5@10.4.6":
   version "10.4.6"
   resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-10.4.6.tgz#11b570c0cb084bb129a482043d3f3bc01d29d7eb"
@@ -3846,7 +3854,7 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
-axe-core@^4.10.0:
+axe-core@^4.10.0, axe-core@^4.2.0:
   version "4.12.1"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.12.1.tgz#69fe2bf6dfc0b24973af91b1d8e945f79e1b7c44"
   integrity sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==

From a49fda216a139f0af6020dbffbcfcd44ce4ed0f0 Mon Sep 17 00:00:00 2001
From: fyui001 <yun.cod@gmail.com>
Date: Fri, 10 Jul 2026 01:59:18 +0900
Subject: [PATCH 3/3] Apply review fixes: remount Storybook provider on toolbar
 switch

Key the preview ThemeProvider by the toolbar theme so its state
re-initializes when switching, and add SameSite=Lax to the sidebar
cookie for parity with the theme cookie.
---
 .storybook/preview.tsx         | 7 ++++++-
 components/layout/AppShell.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 7c5ffda..8bac484 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -23,7 +23,12 @@ function WithTheme({
     document.documentElement.classList.toggle('dark', theme === 'dark')
   }, [theme])
 
-  return <ThemeProvider initialPreference={theme}>{children}</ThemeProvider>
+  // key でツールバー切替時に remount し、Provider の state を初期化し直す
+  return (
+    <ThemeProvider key={theme} initialPreference={theme}>
+      {children}
+    </ThemeProvider>
+  )
 }
 
 const globalDecorators: Preview['decorators'] = [
diff --git a/components/layout/AppShell.tsx b/components/layout/AppShell.tsx
index e7d62ad..892db14 100644
--- a/components/layout/AppShell.tsx
+++ b/components/layout/AppShell.tsx
@@ -119,7 +119,7 @@ export default function AppShell({
 
   const setSidebarOpen = useCallback((open: boolean) => {
     setSidebarOpenState(open)
-    document.cookie = `grace-sidebar-open=${open}; path=/; max-age=31536000`
+    document.cookie = `grace-sidebar-open=${open}; path=/; max-age=31536000; SameSite=Lax`
   }, [])
 
   const activeHref = pathname.startsWith('/medication/drugs')