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

Ready to run

npx skills add https://github.com/EvanBacon/crispy --skill universal-theme

💬 Prompt for ChatGPT / Claude Chat▼

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.