@54vie/kit Theme

ThemeProvider

The ThemeProvider component wraps your application and provides theme context to all child components.

interface ThemeProviderProps {
  theme?: Theme;
  colorMode?: 'light' | 'dark' | 'system';
  children: React.ReactNode;
}

Props

Prop	Type	Default	Description
theme	Theme	defaultTheme	Custom theme object
colorMode	'light' | 'dark' | 'system'	'system'	Initial color mode
children	React.ReactNode	-	Application components

Usage

import { ThemeProvider } from '@54vie/kit';

function App() {
  return (
    <ThemeProvider colorMode="system">
      <YourApp />
    </ThemeProvider>
  );
}

createTheme

Creates a custom theme by merging your overrides with the default theme.

function createTheme(options: ThemeOptions): Theme;

interface ThemeOptions {
  colors?: Partial<ThemeColors>;
  fonts?: Partial<ThemeFonts>;
  spacing?: Partial<ThemeSpacing>;
  roundness?: number;
  dark?: {
    colors?: Partial<ThemeColors>;
  };
}

Usage

import { createTheme } from '@54vie/kit';

const theme = createTheme({
  colors: {
    primary: '#6200EE',
    secondary: '#03DAC6',
  },
  roundness: 8,
});

Theme Interface

Theme

interface Theme {
  colors: ThemeColors;
  fonts: ThemeFonts;
  spacing: ThemeSpacing;
  roundness: number;
  dark: boolean;
}

ThemeColors

interface ThemeColors {
  // Brand colors
  primary: string;
  primaryContainer: string;
  onPrimary: string;
  onPrimaryContainer: string;
  secondary: string;
  secondaryContainer: string;
  onSecondary: string;
  onSecondaryContainer: string;
  tertiary: string;
  tertiaryContainer: string;
  onTertiary: string;
  onTertiaryContainer: string;

  // Background colors
  background: string;
  onBackground: string;
  surface: string;
  surfaceVariant: string;
  onSurface: string;
  onSurfaceVariant: string;

  // Text colors
  text: string;
  textSecondary: string;
  textDisabled: string;

  // Status colors
  error: string;
  errorContainer: string;
  onError: string;
  onErrorContainer: string;
  success: string;
  successContainer: string;
  warning: string;
  warningContainer: string;
  info: string;
  infoContainer: string;

  // Utility colors
  outline: string;
  outlineVariant: string;
  shadow: string;
  scrim: string;
  inverseSurface: string;
  inverseOnSurface: string;
  inversePrimary: string;
}

ThemeFonts

interface ThemeFonts {
  regular: {
    fontFamily: string;
    fontWeight: '400';
  };
  medium: {
    fontFamily: string;
    fontWeight: '500';
  };
  bold: {
    fontFamily: string;
    fontWeight: '700';
  };
  sizes: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    xxl: number;
  };
}

ThemeSpacing

interface ThemeSpacing {
  xs: number;  // 4
  sm: number;  // 8
  md: number;  // 16
  lg: number;  // 24
  xl: number;  // 32
  xxl: number; // 48
}

Dark/Light Mode Configuration

System Color Mode

Follow the device's color scheme automatically:

import { ThemeProvider } from '@54vie/kit';

function App() {
  return (
    <ThemeProvider colorMode="system">
      <YourApp />
    </ThemeProvider>
  );
}

Manual Color Mode Control

Use the useColorMode hook to programmatically control the color mode:

import { useColorMode } from '@54vie/kit';

function SettingsScreen() {
  const { colorMode, setColorMode, toggleColorMode } = useColorMode();

  return (
    <View>
      <Text>Current mode: {colorMode}</Text>
      <Button onPress={() => setColorMode('light')}>Light</Button>
      <Button onPress={() => setColorMode('dark')}>Dark</Button>
      <Button onPress={toggleColorMode}>Toggle</Button>
    </View>
  );
}

Custom Dark Mode Colors

Define separate colors for dark mode in your theme:

import { createTheme } from '@54vie/kit';

const theme = createTheme({
  colors: {
    primary: '#6200EE',
    background: '#FFFFFF',
    surface: '#F5F5F5',
  },
  dark: {
    colors: {
      primary: '#BB86FC',
      background: '#121212',
      surface: '#1E1E1E',
    },
  },
});

Custom Theme Example

Complete example of a custom theme with brand colors:

import { createTheme, ThemeProvider } from '@54vie/kit';

const customTheme = createTheme({
  colors: {
    // Brand colors
    primary: '#FF6B35',
    primaryContainer: '#FFE8DE',
    onPrimary: '#FFFFFF',
    onPrimaryContainer: '#3D1500',
    secondary: '#004E64',
    secondaryContainer: '#C5E7F3',
    onSecondary: '#FFFFFF',
    onSecondaryContainer: '#001F28',
    tertiary: '#9A8C98',
    tertiaryContainer: '#F2E9E4',

    // Status colors
    error: '#BA1A1A',
    success: '#2E7D32',
    warning: '#F57C00',
    info: '#0288D1',
  },
  fonts: {
    regular: {
      fontFamily: 'Inter-Regular',
      fontWeight: '400',
    },
    medium: {
      fontFamily: 'Inter-Medium',
      fontWeight: '500',
    },
    bold: {
      fontFamily: 'Inter-Bold',
      fontWeight: '700',
    },
    sizes: {
      xs: 10,
      sm: 12,
      md: 14,
      lg: 16,
      xl: 20,
      xxl: 28,
    },
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 48,
  },
  roundness: 12,
  dark: {
    colors: {
      primary: '#FFB59A',
      primaryContainer: '#8B3300',
      onPrimary: '#5C2300',
      onPrimaryContainer: '#FFE8DE',
      secondary: '#8DCFE5',
      secondaryContainer: '#003544',
      background: '#1A1A1A',
      surface: '#2D2D2D',
      text: '#FFFFFF',
      textSecondary: '#B3B3B3',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme} colorMode="system">
      <YourApp />
    </ThemeProvider>
  );
}

Using Theme Values in Components

Access theme values using the useTheme hook:

import { useTheme } from '@54vie/kit';
import { StyleSheet, View, Text } from 'react-native';

function CustomComponent() {
  const theme = useTheme();

  const styles = StyleSheet.create({
    container: {
      backgroundColor: theme.colors.surface,
      padding: theme.spacing.md,
      borderRadius: theme.roundness,
    },
    title: {
      color: theme.colors.text,
      fontFamily: theme.fonts.bold.fontFamily,
      fontSize: theme.fonts.sizes.lg,
    },
    subtitle: {
      color: theme.colors.textSecondary,
      fontFamily: theme.fonts.regular.fontFamily,
      fontSize: theme.fonts.sizes.sm,
      marginTop: theme.spacing.xs,
    },
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.subtitle}>Card subtitle text</Text>
    </View>
  );
}