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
  • Typography Integration: Custom DM Sans font family with multiple weights
  • Dark Mode Support: Automatic light/dark theme switching
  • Healthcare Colors: Semantic colors for success, error, and warning states
  • TypeScript Support: Full type safety throughout the theming system
  • Performance Optimized: Memoized theme generation and efficient re-renders

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, 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: 4,
  borderRadiusMultiplier: 4,
};

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​

Each color family includes 11 shades (25, 50, 100-1000):

  • 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(1), // 4px - Subtle rounding
    borderRadius: theme.borderRadius(2), // 8px - Standard cards
    borderRadius: theme.borderRadius(3), // 12px - Prominent elements
    borderRadius: theme.borderRadius(4), // 16px - Large components
  }}
>

Typography Integration​

The theme includes DM Sans font family with proper weight variants:

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 theme automatically handles light and dark mode switching:

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

Dark mode automatically:

  • Switches base MD3 theme to dark variant
  • Maintains color accessibility contrast
  • Preserves semantic color meanings
  • Keeps custom color overrides