skills.rest
EvanBacon
EvanBaconCOMMUNITY
Explore all skills by this author →
Website𝕏@baconbrixGitHub

universal-theme

Automate cross-platform theme management for iOS, Android, and Web apps.

571|24|Updated Dec 26, 2024
Search Tags:#theme#react-native#web#expo#dark-mode
One-click install
npx skills add https://github.com/EvanBacon/crispy --skill universal-theme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: universal-theme
Source: https://github.com/EvanBacon/crispy/tree/main/.claude/skills/universal-theme
Command: npx skills add https://github.com/EvanBacon/crispy --skill universal-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables consistent light/dark/system theming across iOS, Android, and Web in Expo/React Native projects, preventing UI flashes and theme mismatches.

Core Features & Use Cases

  • Unified Theme State: centralizes mode (system, light, dark) and resolves the active theme per platform.
  • Web Integration: uses CSS color-scheme and .light/.dark classes to prevent layout shifts and support early theme application.
  • Native Consistency: leverages React Native Appearance API and useColorScheme for live theme updates.

Quick Start

Install and integrate a ThemeProvider and ThemeScript into your app. Wrap your app with ThemeContextProvider and include ThemeScript in your root layout to apply the correct theme on load and toggle modes with setMode.

Frequently Asked Questions about universal-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent dark mode flash of unstyled content (FOUC) in an Expo web app?▼

To prevent dark mode FOUC in Expo web apps, inject a ThemeScript into the root layout to apply the correct CSS color-scheme and HTML class toggles before the UI renders. This ensures the persisted user preference loads instantly without layout shifts.

What is the best way to sync React Native Appearance API light and dark themes with web?▼

The best way to sync cross-platform themes is using a unified ThemeContextProvider that resolves the active mode and leverages the React Native Appearance API. It centralizes system, light, and dark state to deliver consistent live updates across native and web.

Does universal-theme work for iOS, Android, and Web without extra native dependencies?▼

Yes, this cross-platform theming solution works for iOS, Android, and Web without external dependencies. It applies CSS color-scheme for web and the React Native Appearance API for native platforms to manage theme state natively.

How do I set up a ThemeContextProvider in an Expo React Native project?▼

To set up theming in an Expo project, wrap your application with ThemeContextProvider and include ThemeScript in the root layout. Use the setMode function to toggle between system, light, and dark modes and persist user preferences across app launches.

Why does my system theme mode not update live across iOS and Android in React Native?▼

System theme mode fails to update live when not properly hooked into the React Native Appearance API. Implementing the useColorScheme hook within a ThemeContextProvider captures native appearance changes and delivers runtime theme updates immediately.

Are there limitations to using CSS color-scheme for Expo cross-platform dark mode?▼

Using CSS color-scheme for Expo dark mode is limited to web platforms and cannot drive native UI components. It must be paired with React Native Appearance API integration to achieve unified light, dark, and system theming across iOS and Android.

Related Skills

Explore More Software Engineering Skills→
soham2008xyzsoham2008xyz

setup-react-native-storybook

Configure Storybook for React Native projects with bundler integration and conditional rendering.

Community
Intermediate
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
Arnutt-NArnutt-N

theme-manager

Detect system preferences and persist user-selected color modes for Next.js and Tailwind applications.

Community
Advanced
flybirdxxflybirdxx

tailwind-patterns

Configure Tailwind CSS v4 with CSS-first settings and responsive design.

Community
Advanced