Theming

To start theming your project, you'll first need to understand the structure of our theming system. Our themes are designed to be comprehensive yet customizable, covering all aspects of styling from colors and fonts to spacing and layout.

Our platform leverages Tailwind CSS along with powerful CSS variables to offer a dynamic and highly customizable theming system. This allows you to easily tailor the appearance of your application to match your branding and design requirements. This guide will walk you through the process of setting up and customizing your theme using these tools.

We use CSS variables in our project to define and reuse colors, border radius, and other properties throughout the application. These variables are defined in the assets/css/tailwind.css file. Below is how we define and adjust these variables for both light and dark themes:

:root {
  --background: 0 0% 100%;
  --primary: 0 0% 0%;
  --primary-contrast: 0 0% 100%;
  --secondary: 240 4.8% 95.9%;
  --secondary-contrast: 0 0% 0%;
  --disabled: 0 0% 96.08%;
  --disabled-contrast: 0 0% 83.14%;
  --border: 0 0% 89.8%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 10%;
  --primary: 0 0% 100%;
  --primary-contrast: 0 0% 0%;
  --secondary: 0 0% 18%;
  --secondary-contrast: 0 0% 100%;
  --disabled: 0 0% 25.1%;
  --disabled-contrast: 0 0% 63.92%;
  --border: 0 0% 32.16%;
}