HoS Website: Persistent Light/Dark Theme Toggle

House of Stake
1

Implemented a production-ready light/dark theme for the House of Stake site with a persistent navbar toggle. This is tracked in PR #38

What was built

  • Theme toggle in the UI: an icon-only toggle is integrated into the homepage navbar so users can switch themes from anywhere on the site. The chosen theme is persisted across reloads using localStorage.

  • Global theme tokens: the implementation centralizes styling via CSS variables in src/css/global.css.

    • Base tokens live under :root

    • Dark mode overrides are applied under html[data-theme='dark'] by overriding the relevant Docusaurus/Infima variables (background, surfaces, text, code blocks, sidebar, etc.).

  • Theme-aware component styling: homepage sections (e.g., hero/header/footer + individual homepage modules) use the same shared tokens so the visual system stays consistent.

  • Custom layout control: src/theme/Layout/index.tsx disables Docusaurus’ default navbar/footer (noNavbar: true, noFooter: true) to ensure the site uses the customized HoS components.

2 Likes