Skip to content

feat: add framework theme API - #311

Merged
Kinfe123 merged 1 commit into
mainfrom
feat/theme-api
Aug 8, 2026
Merged

feat: add framework theme API#311
Kinfe123 merged 1 commit into
mainfrom
feat/theme-api

Conversation

@Kinfe123

@Kinfe123 Kinfe123 commented Aug 8, 2026

Copy link
Copy Markdown
Member

Summary

  • add typed light, dark, and system theme configuration with cookie-backed SSR state and a pre-paint browser runtime
  • expose client and server theme APIs and connect Tailwind dark: utilities to the framework data-theme selector
  • preserve theme state during SPA navigation, cover production/SSG rendering, enable dark mode in all CLI starters, and add complete documentation

Validation

  • @farm.js/core full suite: 110 files, 917 passed, 1 skipped
  • @farm.js/core type-check and package build
  • production SSG integration tests
  • create-farm-app tests for basic, auth, and better-auth starters
  • documentation navigation check and production build
  • browser verification for dark, light, system, persistence, Tailwind styles, hydration, and console errors

Summary by cubic

Adds an opt-in theme system for light, dark, and system modes with a cookie-backed SSR state and a pre-paint runtime to prevent flashes. Exposes simple client/server APIs and connects Tailwind dark: utilities to a [data-theme] selector; starters and docs are updated.

  • New Features

    • New theme config (default "system") with same-site cookie storage and cross‑tab sync; cookie path respects basePath.
    • Pre-paint bootstrap sets <html data-theme="…"> and color-scheme, persists through SPA navigation and SSG/production output.
    • Client API in @farm.js/core/theme/client: useTheme, getTheme, setTheme, toggleTheme.
    • Server API in @farm.js/core/theme/server: getTheme, getThemeSnapshot for cookie-backed SSR.
    • Tailwind integration auto-creates a dark: variant targeting [data-theme="dark"] (keeps any existing custom @custom-variant dark).
    • Starters enable the feature with a "dark" default; docs add a Themes page and reference updates.
  • Migration

    • Opt-in only. Add theme: { default: "system" | "light" | "dark" } to farm.config.ts to use it; starters now default to "dark".
    • Use Tailwind dark: utilities or [data-theme="dark"] selectors; no change if you already declare a custom @custom-variant dark.
    • If you post-process HTML, allow elements with id="farm-theme-script" and id="farm-theme-style".

Written for commit 2d1844f. Summary will update on new commits.

Review in cubic

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
docs Ready Ready Preview Aug 8, 2026 11:57am
farm.js Ready Ready Preview Aug 8, 2026 11:57am

@Kinfe123
Kinfe123 marked this pull request as ready for review August 8, 2026 20:01
@Kinfe123
Kinfe123 merged commit 7eae582 into main Aug 8, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant