Journal · Example article
Light and dark without losing craft
Example guide to themeable portfolios with accessible contrast. Demo post for Noctyra buyers.
- Theme
- Accessibility
- Example
Dual mode is a design problem
Dark mode is not an invert filter. Surfaces, borders, and accents need separate decisions so text stays readable and images keep their weight.
Noctyra ships with CSS variables for canvas, ink, muted, accent, and line colors. Edit them in src/styles/global.css.
Contrast reminders (example)
- Body text should stay clearly above the background in both modes.
- Muted text is secondary — never the only way to convey meaning.
- Accent buttons need matching foreground tokens (
accent-fg).
Replace this post with your own accessibility standards or client guidelines.