create-rn-starter-kit/template/src/components/ThemeSwitcher/styles.ts

Interactive CLI for creating modular React Native apps with Expo

import { StyleSheet } from 'react-native';
import { ProcessedTheme } from '../../theme/tokenProcessor';

export const styles = (theme: ProcessedTheme) =>
  StyleSheet.create({
    container: {
      backgroundColor: theme.colors.surface,
      borderColor: theme.colors.border,
      borderWidth: 1,
      padding: theme.spacing.md,
      margin: theme.spacing.md,
      borderRadius: theme.borderRadius.md,
    },
    title: {
      color: theme.colors.text,
      fontSize: theme.fontSize.lg,
      fontWeight: '600',
      marginBottom: theme.spacing.md,
      textAlign: 'center',
    },
    button: {
      backgroundColor: theme.colors.primary[500],
      padding: theme.spacing.md,
      borderRadius: theme.borderRadius.md,
      marginBottom: theme.spacing.md,
      alignItems: 'center',
    },
    buttonText: {
      color: theme.colors.neutral[50],
      fontSize: theme.fontSize.base,
      fontWeight: '600',
    },
    brandRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: theme.spacing.md,
    },
    brandButton: {
      flex: 1,
      backgroundColor: theme.colors.surface,
      borderColor: theme.colors.border,
      borderWidth: 1,
      padding: theme.spacing.sm,
      marginHorizontal: 2,
      borderRadius: theme.borderRadius.sm,
      alignItems: 'center',
    },
    brandButtonActive: {
      backgroundColor: theme.colors.primary[500],
    },
    brandText: {
      color: theme.colors.text,
      fontSize: theme.fontSize.sm,
      fontWeight: '500',
    },
    brandTextActive: {
      color: theme.colors.neutral[50],
    },
    info: {
      color: theme.colors.textSecondary,
      fontSize: theme.fontSize.sm,
      textAlign: 'center',
    },
  });