Skip to main content

Theme Structure

Understanding the CSS variables and structure of a LibreApps Desktop theme.

Overview​

Each theme in LibreApps Desktop is defined by a set of CSS variables that map to Tailwind CSS utility classes. These variables control colors, border radius, and other visual properties.

CSS Variables​

A typical theme index.css file looks like this:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... other dark mode variables */
}

OKLCH Format​

For OKLCH themes, the variables use the oklch() function:

:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --primary: oklch(60% 0.15 250);
  /* ... */
}

Directory Organization​

Themes are stored in rebrand/themer/[ThemeName]/:

  • index.css: The main theme definition.
  • metadata.json: (Optional) Information about the theme for the Gallery.

Best Practices​

  • ✅ Do this: Always provide both light and dark mode variables in your theme.
  • ✅ Do this: Use the --primary variable for your main brand color.
  • ❌ Don't do this: Hardcode pixel values for radius; use the --radius variable to maintain consistency.