# Theme

## Purpose

Frontend theme configuration is centralized so visual tokens, runtime theme state, and Tailwind mappings do not drift apart.

## Files

- `frontend/src/shared/constants/theme.ts` owns theme names, default theme values, CSS class names, and media query constants.
- `frontend/src/shared/constants/storage.ts` owns the local storage key used to persist the user theme preference.
- `frontend/src/components/theme-context.ts` owns the React context type and hook only.
- `frontend/src/components/theme-provider.tsx` owns runtime theme application to `document.documentElement`.
- `frontend/src/index.css` owns global CSS variables for light and dark theme tokens.
- `frontend/tailwind.config.ts` maps Tailwind color tokens to the CSS variables from `index.css`.

## Rules

- Do not hardcode theme names such as `dark`, `light`, or `system` outside `frontend/src/shared/constants/theme.ts`.
- Do not hardcode the theme storage key outside `frontend/src/shared/constants/storage.ts`.
- Add new design tokens as CSS variables in `frontend/src/index.css`, then expose them through `frontend/tailwind.config.ts` when Tailwind classes need them.
- Keep one-off module status colors in module constants only when they are domain semantics, not global theme tokens.