Infrastructure

Theme Shell, Header/Footer, and Mode Switcher

Initial theming pass with BaseThemeLayout, branded header/footer, and three-mode toggle (light/dark/vibrant).

Claude
Claude Claude
ThemingLayoutComponentsMode-Toggle

Changelog - 2025-12-04 (#1)

Dark Matter Site: Theme Shell, Header/Footer, and Mode Switcher

Overview

Initial theming pass for the Dark Matter site:

  • Introduced a minimal BaseThemeLayout wired to the new Matter theme tokens.
  • Added a branded header and footer that both participate in the theme/mode system.
  • Implemented a three-mode toggle (light, dark, vibrant) and wired it to data-mode on <html>.
  • Standardized Dark Matter trademarks across modes and exposed them via a reusable brand mark wrapper.

Changes by Area

1. Layout & Tailwind Wiring

  • Added a BaseThemeLayout.astro that:
    • Imports src/styles/global.css and src/styles/themes/matter-theme.css.
    • Applies class="theme-matter", data-theme="matter", and data-mode={mode} on <html>.
    • Wraps the page in a semantic shell with bg-background / text-foreground semantics.
  • Updated astro.config.mjs to register Tailwind v4 via @tailwindcss/vite:
    • Follows the Hypernova pattern using a typed vitePlugins array.
    • Ensures Tailwind utilities and semantic classes are generated correctly for Dark Matter.

2. Header + Mode Toggle

  • Created src/components/basics/Header.astro:
    • Renders the Dark Matter brand mark on the left and placeholder nav links (About, Modes, Tokens) on the right.
    • Hosts a ModeToggle button that cycles through light → dark → vibrant.
    • Uses semantic tokens (bg-background, border-border, text-foreground) so it tracks the active mode.
  • Added src/components/ui/ModeToggle.astro:
    • Three icons (sun, moon, star) controlled via data-mode on the button.
    • Stores the current mode in localStorage under dark-matter-mode.
    • On click, updates both document.documentElement.dataset.mode and the button’s own data-mode.

3. Footer

  • Created src/components/basics/Footer.astro:
    • Mirrors the header’s visual language with bg-background and border-border but sits at the bottom of the page.
    • Reuses the Dark Matter brand mark for consistency.
    • Displays a simple copyright line using the current year.
  • Wired the footer into BaseThemeLayout.astro so every page gets a themed header, main, and footer stack.

4. Brand Assets & Brand Mark Wrapper

  • Standardized Dark Matter trademarks in public/trademarks/:
    • Updated appIcon__Dark-Matter--Light-Mode.svg and removed an older unused variant.
    • Added new variants: appIcon__Dark-Matter--Vibrant-Mode.svg and trademark__Dark-Matter--Vibrant-Mode.svg.
  • Added src/components/ui/SiteBrandMarkModeWrapper.astro:
    • Accepts optional className, width, and height props.
    • Renders three trademark variants:
      • trademark__Dark-Matter--Light-Mode.svg as the light logo.
      • trademark__Dark-Matter--Dark-Mode.svg as the dark logo.
      • trademark__Dark-Matter--Vibrant-Mode.svg as the vibrant logo.
    • Uses global CSS to show exactly one variant based on html[data-mode]:
      • Default / light: light trademark.
      • data-mode="dark": dark trademark.
      • data-mode="vibrant": vibrant trademark.

5. Git Submodule & Local Changelog Module

  • Added a .gitmodules entry to track the Dark Matter changelog module for this site.
  • Initialized astro-knots/sites/dark-matter/changelog/ with a README.md that describes this module as the canonical changelog for the matter-site Astro project.

Files Changed Summary (Staged)

New

  • .gitmodules — registers the Dark Matter changelog module.
  • changelog/README.md — describes the Dark Matter changelog module.
  • public/trademarks/appIcon__Dark-Matter--Vibrant-Mode.svg — new app icon variant.
  • public/trademarks/trademark__Dark-Matter--Vibrant-Mode.svg — new vibrant trademark.
  • public/trademarks/trademark__Dark-Matter.afdesign~lock~ — Affinity Designer lock file (tracked with Git LFS config).
  • src/components/basics/Header.astro — themed header shell with brand mark and mode toggle.
  • src/components/basics/Footer.astro — themed footer shell with brand mark and copyright.
  • src/components/ui/ModeToggle.astro — three-mode toggle component.
  • src/components/ui/SiteBrandMarkModeWrapper.astro — brand mark wrapper that swaps trademarks per mode.

Modified

  • astro.config.mjs — wired Tailwind v4 via @tailwindcss/vite using a typed vitePlugins array.
  • public/trademarks/appIcon__Dark-Matter--Light-Mode.svg — updated primary app icon asset.
  • public/trademarks/appIcon__Dark-Matter--Light-Mode2.svg — removed (no longer used).
  • src/layouts/BaseThemeLayout.astro — new Matter-themed layout, now importing Header and Footer and setting data-mode.

Notes / Follow-Ups

  • src/content/ and PDF assets are currently untracked and not part of this changelog entry.
  • Future work may introduce additional content pages and a more structured hero section that uses the same theme tokens.