Theming Overview

The app includes a simple theming system with light and dark modes. The theming is built on Tailwind CSS, making it easy to style your components.

Basic Usage

Most components are already theme-aware

All the built-in components automatically adapt to light or dark mode:

// This view will be white in light mode and dark blue in dark mode
<View className="bg-light-primary dark:bg-dark-primary p-4">
  <ThemedText>Hello World</ThemedText>
</View>

Adding the theme toggle button

To let users switch between themes, just add the ThemeToggle component:

import ThemeToggle from '@/components/ThemeToggle';
 
// Add this to your screen or header
<ThemeToggle />

Customizing Colors

Want to change the app's colors? You'll need to update two files:

1. /master-app/tailwind.config.js - For components using Tailwind classes
2. /master-app/app/contexts/ThemeColors.tsx - For components using direct styles

For detailed instructions, check out the Colors page.

Theme Structure

The theming system has these key parts:

1. Color definitions: In tailwind.config.js and ThemeColors.tsx
2. Theme context: Behind-the-scenes management of theme state
3. ThemeToggle: The button users click to switch themes

That's it! The app's theming is designed to be simple and easy to use.