Skip to main content

Creating Custom Themes

Learn how to build and integrate your own custom themes into LibreApps Desktop.

Overview​

Creating a custom theme involves defining a set of CSS variables and placing them in the correct directory. You can also use external tools like ShadcnThemer to generate these variables for you.

Manual Creation​

1. Create a Theme Directory​

Create a new folder in rebrand/themer/ with your theme name.

mkdir rebrand/themer/MyCustomTheme

2. Define CSS Variables​

Create an index.css file inside your new directory and add your variable definitions.

:root {
  --primary: oklch(65% 0.2 280);
  /* ... other variables */
}

3. Register the Theme​

Update rebrand/settings.md to use your new theme.

- **Theme Name**: MyCustomTheme

Using ShadcnThemer​

ShadcnThemer is a powerful tool for generating themes.

  1. Design your theme on the ShadcnThemer website.
  2. Copy the JSON or CSS output.
  3. Paste the URL into rebrand/settings.md: 
    - **Shadcn Theme URL**: https://shadcnthemer.com/r/themes/...
  4. Run ./scripts/build-rebrand.sh. The engine will fetch the theme and save it to rebrand/themer/[ThemeName]/index.css.

Best Practices​

  • ✅ Do this: Start by copying an existing theme like Candy or Core as a template.
  • ✅ Do this: Use the Theme Gallery to test your custom theme in real-time.
  • ❌ Don't do this: Forget to include the .dark class variables; otherwise, your theme will look broken in dark mode.