Skip to main content

Theme

The Theme module provides a comprehensive theming system built on Material Design 3 with custom color palettes, responsive spacing, and typography. It enables consistent design across your healthcare application with support for both light and dark modes.

Overview​

The Theme module integrates with React Native Paper to provide a powerful, flexible theming system that supports:

Key Features​

  • Material Design 3: Built on React Native Paper's MD3 implementation
  • Custom Color System: Extended color palettes with semantic healthcare colors
  • Responsive Spacing: Multiplier-based spacing system for consistent layouts
  • Font loading: Loads DM Sans variants before rendering children; Paper typography is not automatically rewired
  • Dark Mode Support: Uses the dark value supplied by the app; custom colors are used as supplied and are not contrast-adjusted automatically
  • Healthcare Colors: Semantic colors for success, error, and warning states
  • TypeScript Support: Full type safety throughout the theming system
  • Performance Optimized: Memoized theme generation

Architecture​

The theming system consists of several key components:

Core Components​

  • ThemeProvider - Root provider component for theming context
  • useAppTheme - Hook for accessing theme values in components

Utilities & Configuration​

  • Colors - Comprehensive color system and palettes
  • Multipliers - Spacing and border radius configuration

Theme Configuration​

Basic Theme Setup​

import {
  DEFAULT_COLORS,
  DEFAULT_MULTIPLIERS,
  ThemeProvider,
} from "@ovok/native";
import { Text } from "react-native-paper";

const themeConfig = {
  colors: {
    ...DEFAULT_COLORS,
    // Override specific colors
    primary: "#2563EB",
    secondary: "#7C3AED",
  },
  dark: false,
  spacingMultiplier: DEFAULT_MULTIPLIERS.spacing,
  borderRadiusMultiplier: DEFAULT_MULTIPLIERS.borderRadius,
};

const App = () => (
  <ThemeProvider theme={themeConfig}>
    <Text>Themed Text</Text>
  </ThemeProvider>
);

export default App;

Color System​

The theme provides an extensive color system with semantic meaning:

Primary Colors​

  • Primary: Main brand color for actions and highlights
  • Secondary: Supporting brand color for accents
  • Tertiary: Additional brand color for variety

Semantic Colors​

  • Success: #15B05D - Positive health indicators, completed actions
  • Error: #ED3D31 - Critical alerts, dangerous values, errors
  • Warning: #FBEE37 - Attention needed, caution states

Extended Palettes​

Blue, purple, pink, cyan, green, red, orange, and yellow each include 12 shades (25, 50, and 100-1000). Gray includes those 12 plus the optional 1100 shade:

  • Gray: Neutral colors for text and backgrounds
  • Blue: Primary brand variations
  • Green: Success and health indicators
  • Red: Error and danger states
  • Orange: Warning and attention colors
  • Purple, Pink, Cyan, Yellow: Additional accent colors

Spacing System​

The theme uses a multiplier-based spacing system for consistency:

const theme = useAppTheme();

// Usage patterns
<View
  style={{
    padding: theme.spacing(4),        // 16px (4 * 4)
    marginBottom: theme.spacing(3),   // 12px (3 * 4)
    gap: theme.spacing(2),           // 8px (2 * 4)
  }}
>

Common Spacing Values​

  • theme.spacing(1) - 4px - Tight spacing
  • theme.spacing(2) - 8px - Small gaps
  • theme.spacing(3) - 12px - Medium spacing
  • theme.spacing(4) - 16px - Standard padding
  • theme.spacing(6) - 24px - Large spacing
  • theme.spacing(8) - 32px - Section spacing

Border Radius System​

Consistent border radius for visual hierarchy:

<View
  style={{
    borderRadius: theme.borderRadius(2), // 8px - Standard cards
  }}
>

Typography Integration​

ThemeProvider requires the @expo-google-fonts/dm-sans peer dependency and loads the DM Sans font assets before rendering children. Install it with npx expo install @expo-google-fonts/dm-sans. Loading the assets does not replace React Native Paper's typography configuration; set a fontFamily yourself when a Paper text variant should use one of these faces.

Available Font Weights​

  • DMSans_400Regular - Body text, descriptions
  • DMSans_400Regular_Italic - Emphasized body text
  • DMSans_500Medium - Subheadings, labels
  • DMSans_500Medium_Italic - Emphasized labels
  • DMSans_700Bold - Headings, titles
  • DMSans_700Bold_Italic - Emphasized headings

Usage with React Native Paper​

import { Text } from "react-native-paper";

<Text variant="titleLarge">Heading Text</Text>
<Text variant="bodyMedium">Body content</Text>
<Text variant="labelSmall">Small labels</Text>

Dark Mode Support​

The app selects light or dark mode by passing dark:

const themeConfig = {
  colors: DEFAULT_COLORS,
  dark: true, // Enable dark mode
  spacingMultiplier: 4,
  borderRadiusMultiplier: 4,
};

Dark mode automatically:

  • Switches base MD3 theme to dark variant
  • Uses dark MD3 base tokens for values the app does not override; test custom colors for contrast in both light and dark mode
  • Preserves semantic color meanings
  • Keeps custom color overrides