ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
53 lines
1.8 KiB
Markdown
53 lines
1.8 KiB
Markdown
# Dark Mode
|
|
|
|
Dark mode is a first-class theme, not an invert filter. It is a deep teal-neutral palette defined under `.dark` in `app/globals.css`.
|
|
|
|
## Mechanism
|
|
|
|
| Piece | Detail |
|
|
| --- | --- |
|
|
| Strategy | `class` on `html` via `next-themes` |
|
|
| Provider | `components/theme-provider.tsx` |
|
|
| Default | `light` |
|
|
| System | `enableSystem` |
|
|
| Variant | `@custom-variant dark (&:is(.dark *));` |
|
|
| Toggle | `components/theme-toggle.tsx` |
|
|
|
|
## Palette intent
|
|
|
|
| Role | Light | Dark |
|
|
| --- | --- | --- |
|
|
| Canvas | `#ffffff` | `#141818` |
|
|
| Card / popover | `#ffffff` | `#1c2424` |
|
|
| Surface | `#f7f7f7` | `#1a2222` |
|
|
| Primary | `#29a19c` (unchanged) | `#29a19c` |
|
|
| Secondary | `#044343` | `#243535` |
|
|
| Borders | `#e4e4e4` | white @ ~12% alpha |
|
|
| Muted text | `#5c5c5c` | `#999999` |
|
|
|
|
Primary brand teal stays constant for recognition; surrounding neutrals shift.
|
|
|
|
## Implementation rules
|
|
|
|
1. Style with semantic tokens only (`bg-background`, `text-muted-foreground`, `border-border`, …).
|
|
2. Use `dark:` variants only when semantic tokens are insufficient (e.g. `dark:hover:shadow-glow-primary`, header glass tweaks).
|
|
3. Never gate entire components behind duplicated light/dark markup trees unless media differs (`next/image` theme backgrounds).
|
|
4. Test both themes before shipping UI.
|
|
5. Charts and decorative strokes should use `chart-*` or primary mixes that remain visible on dark surfaces.
|
|
|
|
## Transitions
|
|
|
|
Body background/color transitions use `0.3s ease`. Do not disable theme transitions globally (`disableTransitionOnChange={false}`).
|
|
|
|
## Forbidden
|
|
|
|
- `bg-white text-black` hardcodes.
|
|
- `dark:bg-black` overrides that fight the teal-neutral system.
|
|
- Assuming pure inversion of light colors will look correct.
|
|
|
|
## Related
|
|
|
|
- [colors.md](./colors.md)
|
|
- [accessibility.md](./accessibility.md)
|
|
- [gradients.md](./gradients.md)
|