Universal Theme Handling for Expo

This guide covers implementing proper light/dark/system theme handling across all platforms while respecting web static rendering. This is specifically for projects using universal CSS (Tailwind v4 + react-native-css).

Overview

The approach uses:

• CSS color-scheme - For automatic system preference detection via prefers-color-scheme
• CSS classes (.light/.dark) - For manual theme override (shadcn/ui pattern)
• React Native Appearance API - For native platform theme control
• ThemeContextProvider - Unified React context for theme state management
• ThemeScript - Inline script to prevent flash of incorrect theme (FOUC) on page load
• localStorage persistence - Theme preference persists across sessions
• Cross-tab sync - Theme changes sync across browser tabs

CSS Setup

Theme Control in CSS