sgw-owner-app/components/theme-example.tsx

/**
 * Example component demonstrating theme usage
 * Shows different ways to use the theme system
 */

import React from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { useAppTheme } from "@/hooks/use-app-theme";
import { useThemeColor } from "@/hooks/use-theme-color";

export function ThemeExampleComponent() {
  const { colors, styles, utils } = useAppTheme();

  // Example of using useThemeColor hook
  const customTextColor = useThemeColor({}, "textSecondary");
  const customBackgroundColor = useThemeColor({}, "surfaceSecondary");

  return (
    <ScrollView style={styles.container}>
      <ThemedView style={styles.surface}>
        <ThemedText type="title">Theme Examples</ThemedText>

        {/* Using themed components */}
        <ThemedText type="subtitle">Themed Components</ThemedText>
        <ThemedView style={styles.card}>
          <ThemedText>This is a themed text</ThemedText>
          <ThemedText type="defaultSemiBold">
            This is bold themed text
          </ThemedText>
        </ThemedView>

        {/* Using theme colors directly */}
        <ThemedText type="subtitle">Direct Color Usage</ThemedText>
        <View
          style={[styles.card, { borderColor: colors.primary, borderWidth: 2 }]}
        >
          <Text style={{ color: colors.text, fontSize: 16 }}>
            Using colors.text directly
          </Text>
          <Text
            style={{ color: colors.primary, fontSize: 14, fontWeight: "600" }}
          >
            Primary color text
          </Text>
        </View>

        {/* Using pre-styled components */}
        <ThemedText type="subtitle">Pre-styled Components</ThemedText>
        <View style={styles.card}>
          <TouchableOpacity style={styles.primaryButton}>
            <Text style={styles.primaryButtonText}>Primary Button</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.secondaryButton}>
            <Text style={styles.secondaryButtonText}>Secondary Button</Text>
          </TouchableOpacity>
        </View>

        {/* Status containers */}
        <ThemedText type="subtitle">Status Indicators</ThemedText>
        <View style={styles.card}>
          <View style={styles.successContainer}>
            <Text style={{ color: colors.success, fontWeight: "600" }}>
              Success Message
            </Text>
          </View>

          <View style={styles.warningContainer}>
            <Text style={{ color: colors.warning, fontWeight: "600" }}>
              Warning Message
            </Text>
          </View>

          <View style={styles.errorContainer}>
            <Text style={{ color: colors.error, fontWeight: "600" }}>
              Error Message
            </Text>
          </View>
        </View>

        {/* Using opacity colors */}
        <ThemedText type="subtitle">Opacity Colors</ThemedText>
        <View style={styles.card}>
          <View
            style={[
              styles.surface,
              { backgroundColor: utils.getOpacityColor("primary", 0.1) },
            ]}
          >
            <Text style={{ color: colors.primary }}>
              Primary with 10% opacity background
            </Text>
          </View>

          <View
            style={[
              styles.surface,
              { backgroundColor: utils.getOpacityColor("error", 0.2) },
            ]}
          >
            <Text style={{ color: colors.error }}>
              Error with 20% opacity background
            </Text>
          </View>
        </View>

        {/* Theme utilities */}
        <ThemedText type="subtitle">Theme Utilities</ThemedText>
        <View style={styles.card}>
          <Text style={{ color: colors.text }}>
            Is Dark Mode: {utils.isDark ? "Yes" : "No"}
          </Text>
          <Text style={{ color: colors.text }}>
            Is Light Mode: {utils.isLight ? "Yes" : "No"}
          </Text>

          <TouchableOpacity
            style={[styles.primaryButton, { marginTop: 10 }]}
            onPress={utils.toggleTheme}
          >
            <Text style={styles.primaryButtonText}>
              Toggle Theme (Light/Dark)
            </Text>
          </TouchableOpacity>
        </View>

        {/* Custom themed component example */}
        <ThemedText type="subtitle">Custom Component</ThemedText>
        <View
          style={[
            styles.card,
            {
              backgroundColor: customBackgroundColor,
              borderColor: colors.border,
              borderWidth: 1,
            },
          ]}
        >
          <Text
            style={{
              color: customTextColor,
              fontSize: 16,
              textAlign: "center",
            }}
          >
            Custom component using useThemeColor
          </Text>
        </View>
      </ThemedView>
    </ScrollView>
  );
}