Lossless Changelog
product

Theme Shell, Header/Footer, and Mode Switcher

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

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.

  • 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.