Skip to main content

Quick Rebrand Tutorial

Learn how to rebrand your dashboard in less than 2 minutes.

Overview​

This tutorial will guide you through a basic rebranding process, changing the app name, primary theme, and logo.

Step-by-Step Guide​

1. Update Settings​

Open rebrand/settings.md and update the core information:

## Core Information
- **App Name**: MyAwesomeDash
- **Company Name**: AwesomeCorp
- **Theme Name**: Candy

Place your new logo in rebrand/assets/logo.svg. The engine will automatically pick it up and inject it into the build.

3. Run the Rebrand Engine​

From the root of the project, execute the rebrand script:

./scripts/build-rebrand.sh

4. Run the Rebranded Build​

The engine creates a production-ready build in rebrand/web/full-kit/. Run it with:

./scripts/start-rebrand.sh

This starts the rebranded server at http://localhost:3002.

Development Mode

For active development on the rebrand, use:

cd rebrand/web/full-kit
pnpm dev

What Just Happened?​

The rebrand engine performed the following tasks:

  1. String Replacement: Replaced all instances of "LibreApps Desktop" with "MyAwesomeDash".
  2. Theme Injection: Applied the "Candy" theme (OKLCH-based) to the application.
  3. Asset Management: Replaced the default logo with your custom logo.svg.
  4. Configuration Update: Updated the internal configuration files to reflect your new brand identity.

Best Practices​

  • ✅ Do this: Use SVG for logos to ensure they look sharp at any size.
  • ✅ Do this: Check the terminal output for any warnings or errors during the rebrand process.
  • ❌ Don't do this: Manually edit the files in build/web/rebranded/ if you plan to run the rebrand engine again; your changes will be overwritten.