Skip to main content

Theme System Overview

A deep dive into LibreApps Desktop's sophisticated theming capabilities.

Overview​

LibreApps Desktop features a robust theme system that supports both legacy HSL and modern OKLCH color spaces. It allows for instant theme switching in the browser and automated theme injection during the build process.

Key Components​

A built-in UI for previewing and applying themes live. It serves as a playground for designers and developers to test different brand identities.

2. Themer Directory (rebrand/themer/)​

This directory stores the CSS definitions for all available themes. Each theme has its own folder containing an index.css file.

3. Class-Based Themes​

Themes are applied via CSS classes (e.g., theme-candy, theme-default). This enables instant switching without a full page reload or rebuild.

4. OKLCH Support​

LibreApps Desktop is one of the first dashboard templates to fully embrace the OKLCH color space, providing better perceptual consistency and more vibrant colors.

How Themes are Applied​

  1. Build-Time: The rebrand engine injects the chosen theme's CSS into the main application stylesheet.
  2. Runtime: The Theme Gallery can dynamically toggle CSS classes on the <body> or <html> element to switch between pre-defined themes.

Best Practices​

  • ✅ Do this: Use OKLCH for new themes to take advantage of modern browser color capabilities.
  • ✅ Do this: Keep your theme CSS organized in the rebrand/themer/ directory.
  • ❌ Don't do this: Modify the core Tailwind configuration for brand-specific colors; use CSS variables instead.