Theming

Relevant source files

The following files were used as context for generating this wiki page:

• src/core/utils/constants.js
• src/config/constants.js
• TAMAGUI_MIGRATION.md
• BUGS_FIXED_AND_IMPROVEMENTS.md
• TASK_3_SUMMARY.md
• SECURITY_AND_CLEANUP_FIXES.md

Theming in the eefashiondesign application is a system responsible for managing the visual appearance, primarily colors, for both light and dark modes. The system is currently undergoing a significant architectural migration from a decentralized, hardcoded approach to a centralized, token-based system using the Tamagui UI library. This transition aims to resolve inconsistencies, improve maintainability, and enable robust features like easy theme switching.

The legacy system relied on scattered StyleSheet.create instances and multiple conflicting constant files. The new architecture introduces a single source of truth for design tokens in tamagui.config.ts, which provides a consistent and type-safe styling system across the application.

Sources: BUGS_FIXED_AND_IMPROVEMENTS.md, TAMAGUI_MIGRATION.md

Theme Architecture

The application's theming architecture is in a state of transition. Initially, it was characterized by multiple, sometimes conflicting, sources for color and style definitions. The project is now moving towards a unified system powered by Tamagui.

The diagram below illustrates the evolution from the legacy architecture to the modern Tamagui-based approach.

Theme Configuration

Theme configuration is managed through constant files in the legacy system and a dedicated configuration file in the new Tamagui system.

Legacy Color Constants

Two separate files define color palettes, which has been identified as a source of inconsistency. The file src/config/constants.js is marked as deprecated.

Sources: SECURITY_AND_CLEANUP_FIXES.md

src/config/constants.js (Deprecated)

This file defines COLORS for a dark theme and LIGHT_COLORS for a light theme.

Dark Theme Colors (COLORS)

Category	Key	Value
Theme	primary	#6C63FF
Theme	secondary	#4ECDC4
Theme	accent	#FF6B6B
Background	bgDark	#0F0F1E
Background	bgCard	#1A1A2E
Text	textPrimary	#FFFFFF
Text	textSecondary	#888888

Light Theme Colors (LIGHT_COLORS)

Category	Key	Value
Background	bgDark	#FFFFFF
Background	bgCard	#F5F5F5
Text	textPrimary	#000000
Text	textSecondary	#666666

Sources: src/config/constants.js:5-70

src/core/utils/constants.js

This file defines a specific THEME_COLORS object, which was used for the 3D Atelier UI. This demonstrates the previous practice of defining feature-specific color palettes.

// src/core/utils/constants.js:212-243
export const THEME_COLORS = {
  // Background
  background: {
    primary: '#1a1d2e',
    secondary: '#252837',
    tertiary: '#2d3142',
  },
  
  // Accent colors
  accent: {
    blue: '#4A90E2',
    purple: '#6C5CE7',
    teal: '#00D9C0',
    coral: '#FF6B6B',
    mint: '#7FFFD4',
  },
  
  // Text colors
  text: {
    primary: '#FFFFFF',
    secondary: '#B8B9C1',
    tertiary: '#6B6C7E',
  },
  
  // UI elements
  ui: {
    border: '#3A3D4E',
    hover: '#3D4152',
    active: '#4A4D62',
    disabled: '#2A2D3E',
  },
  
  // Gradients
  gradients: {
    saveSync: ['#6C5CE7', '#4A90E2'],
    exportRender: ['#FF6B6B', '#FF8E53'],
    shareCollaborate: ['#00D9C0', '#7FFFD4'],
  },
};

Sources: src/core/utils/constants.js:212-243, TASK_3_SUMMARY.md

Tamagui Theme Configuration

The new, preferred method for theming is through a central tamagui.config.ts file. This file defines design tokens for colors, spacing, fonts, and more, creating a single source of truth. It supports both dark and light theme variants.

Key benefits of this approach include:

• Centralized Management: All theme-related values are in one place.
• Type Safety: Provides TypeScript support for styles.
• Consistency: Ensures a consistent UI across the app.
• Easy Switching: Simplifies the implementation of dark/light mode toggling.

Sources: TAMAGUI_MIGRATION.md, BUGS_FIXED_AND_IMPROVEMENTS.md

Theme Persistence

The user's selected theme preference is persisted to the device's local storage. This is indicated by the STORAGE_KEYS.THEME constant, which is defined with the value '@theme'. The @ prefix is a convention for AsyncStorage in React Native.

Key	Value	Description
THEME	@theme	The key used to save the current theme name (e.g., 'dark' or 'light') in local storage.

This key is defined in both src/config/constants.js and src/core/utils/constants.js, with the former being marked for deprecation.

Sources: src/core/utils/constants.js:255, src/config/constants.js:103, SECURITY_AND_CLEANUP_FIXES.md

Theme Application

How theme values are applied to components differs significantly between the legacy and modern architectures.

Legacy Application (StyleSheet)

Previously, styles were created using StyleSheet.create with hardcoded color values or values imported from the disparate constants files. This led to over 800 StyleSheet instances, making maintenance difficult.

Example of Legacy Styling:

// Before - Hardcoded values everywhere
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#1A1A2E', // Hardcoded
    padding: 16, // Hardcoded
    borderRadius: 12, // Hardcoded
  },
});

Sources: BUGS_FIXED_AND_IMPROVEMENTS.md

Modern Application (Tamagui)

With the migration to Tamagui, the entire application is wrapped in a TamaguiProvider. This provider is configured with the tamagui.config.ts and applies the selected theme (e.g., "dark") to all child components. Components then use theme tokens for styling, resulting in cleaner and more maintainable code.

Example of Tamagui Styling:

// After - Using design tokens
<Container bg="$bgCard" p="$lg" br="$md" />

Sources: TAMAGUI_MIGRATION.md

The following sequence diagram shows how a component receives its styling in the Tamagui architecture.

Conclusion

The theming system in eefashiondesign is evolving towards a more modern, robust, and maintainable architecture with the adoption of Tamagui. By centralizing design tokens in tamagui.config.ts, the project addresses legacy issues of inconsistency and difficult maintenance. This new system provides a solid foundation for consistent UI/UX, easier development with type-safe styles, and straightforward implementation of features like dark/light mode switching. The migration is a key step in improving the overall code quality and developer experience.