Tommy D. Rossi
44b367a927
Dark mode fix: import liveline.css and liveline-prism.css via CSS @import in globals.css instead of JS import in the route file. This brings them into the Tailwind compilation chain so @variant dark works. @variant dark silently fails in CSS files imported only via JS — documented this constraint in website/AGENTS.md. - Prism dark colors use CSS variables on :root with @variant dark - liveline.css dark overrides use @variant dark nested inside selectors - Table cells use --ll-text-primary for full contrast in both modes - Prose paragraphs at 0.82 opacity, bold and inline code punch through to full opacity for visual hierarchy - Prose line-height increased to 22px - Add website/AGENTS.md documenting dark mode rules
55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
# Website
|
|
|
|
## Tailwind dark mode
|
|
|
|
Dark mode uses `prefers-color-scheme` media query, configured in `globals.css`:
|
|
|
|
```css
|
|
@custom-variant dark (@media (prefers-color-scheme: dark));
|
|
```
|
|
|
|
### `@variant dark` rules
|
|
|
|
1. **Must be nested inside a selector**, never at the top level:
|
|
|
|
```css
|
|
/* WRONG - silently produces no output */
|
|
@variant dark {
|
|
.my-class { color: white; }
|
|
}
|
|
|
|
/* CORRECT - nest inside the selector */
|
|
.my-class {
|
|
@variant dark {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* CORRECT - define variables inside :root */
|
|
:root {
|
|
@variant dark {
|
|
--my-var: white;
|
|
}
|
|
}
|
|
```
|
|
|
|
2. **Only works in CSS files that are part of the Tailwind compilation chain.** Files must be imported via CSS `@import` from `globals.css` (which has `@import "tailwindcss"`). JS/TS `import "file.css"` in route files does NOT go through Tailwind — `@variant dark` will silently fail.
|
|
|
|
```css
|
|
/* globals.css — this is the Tailwind entry point */
|
|
@import "tailwindcss";
|
|
@import "./liveline.css"; /* these get Tailwind processing */
|
|
@import "./liveline-prism.css";
|
|
@custom-variant dark (@media (prefers-color-scheme: dark));
|
|
```
|
|
|
|
If you create a new CSS file that needs `@variant dark`, add it as a CSS `@import` in `globals.css`. Do NOT import it from a `.tsx` file.
|
|
|
|
### For many dark overrides, use CSS variables on `:root`
|
|
|
|
For files with many dark mode selectors (like prism syntax colors), define CSS variables in `:root { @variant dark { ... } }` and reference them in selectors. This avoids repeating `@variant dark` in every rule.
|
|
|
|
## No localStorage dark mode toggle
|
|
|
|
There is no JS-based `.dark` class toggle. Do not add inline scripts to toggle `.dark` on `<html>`. The site follows the OS preference only via `prefers-color-scheme`.
|