Theming

This document describes how theming and styling are managed in the project, including how to define and update themes.

---

Theming Approach

• The project uses a theme provider (e.g., Material-UI ThemeProvider, styled-components ThemeProvider, or custom context) for consistent styling.
• Theme variables (colors, spacing, typography, etc.) are defined in a central file (e.g., src/theme/ or src/styles/theme.ts).

---

Adding or Updating Theme Variables

1. Locate the theme file (e.g., src/theme/index.ts or src/styles/theme.ts).
2. Add or update variables (e.g., colors, font sizes, spacing).
3. Use theme variables in components via hooks (e.g., useTheme()) or styled components.
4. Test changes across light/dark modes if supported.

---

Best Practices

• Use theme variables instead of hardcoded values.
• Keep theme definitions organized (colors, typography, spacing, etc.).
• Support dark mode if possible.
• Use consistent naming for theme variables.
• Document any custom theme extensions.

---

For more, see ARCHITECTURE.md or ask a maintainer.