27 lines
1.1 KiB
Markdown
27 lines
1.1 KiB
Markdown
# Central color theme
|
|
|
|
The application uses one cohesive blue/navy theme. All colors are centralized in `static/src/tailwind.css`; templates do not define brand hex colors.
|
|
|
|
## Palette and roles
|
|
|
|
- `--color-ink: #08376b` — navigation, headings and structural contrast
|
|
- `--color-sea: #0693e3` — primary actions, links and active states
|
|
- `--color-sea-dark: #1977ce` — depth, secondary blue and hover states
|
|
- `--color-coral: #fa9f00` — selective attention, highlights and warnings
|
|
- `--color-cream: #eeeeee` — page background
|
|
- `--color-soft: #eaeaea` — secondary surfaces and conversation canvas
|
|
- `--color-paper: #ffffff` — elevated cards
|
|
- `--color-mint`, `--color-sun` — supporting light-blue and warm tints
|
|
|
|
Conversation surfaces and shadows are also variables in the same `:root` block.
|
|
|
|
## Changing the theme later
|
|
|
|
Edit only the `@theme` and `:root` token values near the top of `static/src/tailwind.css`, then run:
|
|
|
|
```powershell
|
|
npm run css:build
|
|
```
|
|
|
|
Component rules consume semantic names such as `ink`, `sea`, `coral`, and `paper`, so no template rewrite is required.
|