Theme System

Our platform uses a simple yet powerful theme system that provides a consistent, beautiful design for all apps. Each app has a single theme that defines its colors, typography, and visual style.

You can fully customize the theme to match your brand identity or design preferences. Our theme system uses HSL color values, which make it easy to create consistent color palettes and maintain visual harmony across your application.

You can import custom themes by providing CSS variables in the proper format. This makes it easy to apply themes from external sources or to reuse themes across different projects.

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83% 53.3%;
  --radius: 0.5rem;
  /* Additional variables as needed */
}

Here are all the CSS custom properties available in our theme system. Each variable serves a specific purpose in creating a cohesive design.

Our theme system follows consistent naming conventions that make it intuitive to work with. Understanding these patterns will help you create harmonious themes.