Themes and variants

A variant is a complete skin over the same data model. It can change composition, animation and components, but must not silently remove a shared capability.

The six experiences

Open the live interactive preview to compare the same posts with shareable settings, or run bun run preview:all to validate local source changes.

In organique, hold a Knowledge Graph node to move it. Tag-derived links follow its position live; the active node, its neighbours and unrelated relationships receive distinct visual states. The pointer aura and graph use the current accent and react to light or dark mode.

Landing showcases

Every public variant now opens with a bilingual profile-oriented showcase before its editorial feed. Motion Primitives, Cult UI, Aceternity, ReactBits and Organique adapt the shared DemoProfileHero; H4X0R keeps a code-native ProfileHero shaped for its terminal HUD. The information contract stays aligned while layout, motion and controls remain variant-owned.

Organique also demonstrates two additive bilingual surfaces: /certifications with a three-post certification series, and /friends with a local blogroll. Their English mirrors live at /en/certifications and /en/friends. The certification posts themselves stay in shared/content/blog/<locale>/, so every variant renders them even though the two showcase pages are Organique-specific.

CSS tokens

The theme uses semantic variables:

1
:root {
2
  --background: oklch(1 0 0);
3
  --foreground: oklch(0.145 0 0);
4
  --accent: oklch(0.527 0.154 150.1);
5
  --border: oklch(0.922 0 0);
6
}
7

8
.dark {
9
  --background: oklch(0 0 0);
10
  --foreground: oklch(0.985 0 0);
11
}

Change roles, not occurrences. A component uses var(--color-muted-foreground), never an arbitrary gray.

Reader accent

The accent picker stores a color in localStorage and checks its contrast in light and dark modes. The site.accent value from lisible.config.json remains the initial fallback.

Appearance lifecycle

Each layout mounts the shared AppearanceBootstrap.astro before the page becomes visible. It resolves system/light/dark mode, applies an accessible accent, reacts to operating-system and cross-tab changes, then reapplies the same state after Astro swaps. Theme and accent therefore stay stable without a wrong-theme flash, including inside the live previewer.

Print and PDF

shared/print.css is imported last by every variant, so it wins over variant styling. Printing a page drops the chrome, the navigation and the decoration, forces ink on paper regardless of the active theme, spells out the destination of external links, and keeps headings, tables and code blocks from splitting across pages. A blog built for reading has to survive being printed.

Variant contract

• identical shared baseline routes and frontmatter;
• additive variant routes remain bilingual, accessible and never replace the baseline;
• complete French and English dictionaries;
• visible focus and keyboard access;
• respect for prefers-reduced-motion;
• reinitialization on astro:page-load;
• identical feature-flag behavior.

References

• Styles and CSS in Astro
• Tailwind with Astro