Skip to content

feat: add reatomThemePreference reusable#18

Open
Guria wants to merge 1 commit into
mainfrom
feat/reatom-theme-preference
Open

feat: add reatomThemePreference reusable#18
Guria wants to merge 1 commit into
mainfrom
feat/reatom-theme-preference

Conversation

@Guria

@Guria Guria commented Jul 12, 2026

Copy link
Copy Markdown
Collaborator

Adds reatomThemePreference — a factory for the ubiquitous 'system' | 'light' | 'dark' theme preference model.

  • reatomEnum persisted via withLocalStorage (configurable key, invalid snapshots coerce to 'system').
  • resolved computed maps 'system' through reatomMediaQuery('(prefers-color-scheme: dark)') to a concrete 'light' | 'dark'; explicit preferences pass through.
  • Extracted from a production app (guria/modern-stack src/shared/model/theme.ts).
  • Browser tests cover defaults, persistence keys, garbage-value coercion, explicit-over-OS priority, and media-query resolution for both branches.

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings July 12, 2026 21:36

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Reatom reusable reatomThemePreference that models a persisted three-state theme preference ('system' | 'light' | 'dark') and exposes a derived resolved computed ('light' | 'dark') based on (prefers-color-scheme: dark) when the preference is 'system'.

Changes:

  • Introduces reatomThemePreference factory with localStorage persistence and a resolved computed.
  • Adds browser tests, usage example, and documentation for the new reusable.
  • Registers the reusable in registry.json via a corresponding *.meta.ts entry.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/reusables/theme/reatom-theme-preference.ts Implements the persisted theme preference atom and resolved computed.
src/reusables/theme/reatom-theme-preference.browser.test.ts Adds browser-focused tests covering defaults, persistence, coercion, and resolution behavior.
src/reusables/theme/reatom-theme-preference.md Documents API, usage, and DOM-application patterns for the resolved theme.
src/reusables/theme/reatom-theme-preference.example.ts Provides a runnable usage example demonstrating persistence and DOM updates.
src/reusables/theme/reatom-theme-preference.meta.ts Declares the reusable’s registry metadata (files, roles).
registry.json Adds the new reusable entry to the generated registry.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/reusables/theme/reatom-theme-preference.md
@Guria

Guria commented Jul 13, 2026

Copy link
Copy Markdown
Collaborator Author

/rebuild-registry

@github-actions

Copy link
Copy Markdown

ℹ️ registry.json was already up to date; nothing to push.

A factory that creates a persisted three-state theme-preference atom
('system' | 'light' | 'dark') backed by localStorage, extended with a
'resolved' computed that maps the 'system' preference through the
(prefers-color-scheme: dark) media query to a concrete 'light' | 'dark'
theme. Invalid persisted values coerce back to 'system'.

(gate run via 'corepack pnpm'; pre-commit hook uses bare 'pnpm' which the
mise shim cannot resolve in this worktree)
@Guria
Guria force-pushed the feat/reatom-theme-preference branch from d426dbd to 318809e Compare July 13, 2026 23:48
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.

2 participants