Skip to main content

ShadcnThemer Integration

Leverage the power of ShadcnThemer to create and import custom themes.

Overview​

LibreApps Desktop is fully integrated with ShadcnThemer, a popular tool for designing themes for shadcn/ui components. This integration allows you to design a theme visually and import it into LibreApps Desktop with a single URL.

How it Works​

The rebrand engine includes a specialized script that can fetch theme definitions from the ShadcnThemer API. When you provide a ShadcnThemer URL in your settings.md, the engine:

  1. Downloads the theme JSON.
  2. Converts it into the CSS variable format used by LibreApps Desktop.
  3. Saves it to the rebrand/themer/ directory.
  4. Injects it into the application build.

Importing a Theme​

1. Design Your Theme​

Visit shadcnthemer.com and use the visual editor to customize your colors, radius, and other properties.

2. Get the Theme URL​

Once you're happy with your design, click the "Share" or "Export" button and copy the provided URL. It should look something like this:

https://shadcnthemer.com/r/themes/26f36512-7e14-406f-87e5-9b3355ac06e8.json

3. Update Settings​

Paste the URL into your rebrand/settings.md file:

- **Theme Name**: MyCustomTheme
- **Shadcn Theme URL**: https://shadcnthemer.com/r/themes/26f36512-7e14-406f-87e5-9b3355ac06e8.json

4. Run the Rebrand Engine​

./scripts/build-rebrand.sh

Best Practices​

  • ✅ Do this: Use ShadcnThemer for rapid prototyping of new brand identities.
  • ✅ Do this: Save the generated CSS locally in rebrand/themer/ for offline builds and version control.
  • ❌ Don't do this: Rely on the remote URL for production builds; the rebrand engine will automatically create a local copy for you.