feat: manual theme toggle and incrementing base versioning#7
Merged
Conversation
Add a manual light/dark/system theme toggle to the layout template on top of the existing prefers-color-scheme support, and give web-base a single incrementing version that apps can track. Layout: - ThemeToggle (auto-mounted in the header) + useTheme hook with localStorage persistence via data-theme on <html>, plus themeInitScript to avoid FOUC - theme.css: three-state dark mode (system/forced) as plain custom-property overrides, and a @custom-variant dark so Tailwind dark: utilities follow the manual choice Versioning: - cli/src/version.ts as the single source of truth (WEB_BASE_VERSION), with a drift-guard test against package.json; bump to 0.2.0 - stampWebBaseVersion writes webBase.version into apps on init/add/update --apply - update reports current/behind/ahead/unstamped - add CHANGELOG.md Specs (04-layout-system, 02-cli, 00-overview, skill reference) updated to match. https://claude.ai/code/session_01S635TVHdM8Fwy2f6Nja8Nz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Was & warum
Zwei zusammenhängende Anliegen:
prefers-color-scheme. Jetzt liegt ein manueller Umschalter (Hell/Dunkel/System)mit Persistenz darüber — Default bleibt System.
hochzählende Version. Apps werden mit der zuletzt gezogenen Version gestempelt,
sodass
web-base updatemelden kann, ob eine App hinterherhinkt.Layout-Template
ThemeToggle(cli/templates/layout/ThemeToggle.tsx) — Ghost-Button, derSystem → Hell → Dunkel zykliert (
Monitor/Sun/Moon, deutsche Labels).Von
AppShellautomatisch im Header gemountet, vor demInstallButton(immer sichtbares Control → kein Layout-Sprung).
useTheme(useTheme.ts) —{ theme, resolvedTheme, setTheme },Persistenz in
localStorage(Keytheme) viadata-themeam<html>,live-Tracking der System-Präferenz. SSR-sicher.
themeInitScript— Inline-Script gegen FOUC (impostInstalldokumentiert).theme.css— Drei-Zustands-Dark-Mode als plain Custom-Property-Overrides(
@themegeht nur Top-Level) +@custom-variant dark, damit Tailwindsdark:-Utilities der manuellen Wahl folgen statt nur der System-Pref.Versionierung
cli/src/version.ts—WEB_BASE_VERSIONals Single Source of Truth +compareVersions. Drift-Guard-Test gegenpackage.json. Bump auf 0.2.0.stampWebBaseVersion(pkg.ts) schreibtwebBase.versionin dieApp-
package.jsonbeiinit/add/update --apply(additiv).updatemeldetcurrent/behind (X → Y)/ahead/unstamped.CHANGELOG.md(Keep a Changelog).Specs
04-layout-system.md,02-cli.md,00-overview.mdundskill/references/layout-system.mdim selben PR aktualisiert (spec-driven).Verifikation
bun run typecheck/lint/testgrün (37 Tests, inkl. neuerversion.test.ts+ Stamping-Tests inpkg.test.ts).bun run build && node cli/dist/index.js --version→0.2.0.initstempeltwebBase.version;updateauf ungestempelter Appmeldet
unstamped,--applystempelt, danachcurrent; gesetztes0.1.0meldet
behind (0.1.0 → 0.2.0).https://claude.ai/code/session_01S635TVHdM8Fwy2f6Nja8Nz
Generated by Claude Code