Skip to content

Latest commit

 

History

History
37 lines (20 loc) · 1.89 KB

README.md

File metadata and controls

37 lines (20 loc) · 1.89 KB
Raw

🎨 Angular Dynamic Theming Demo

demo.webm

🤔 Why does this matter?

In B2B software development, adapting app styles to match clients' branding is crucial. But managing separate CSS files for each client quickly becomes impractical.

With database-driven themes, updating branding is as simple as a database edit, saving hours of development time and enabling clients to manage their own themes (through the UI) for a seamless user experience.

🏃 Getting started

  1. Run npm install to install dependencies.

  2. Run npm run server to start the backend server (server.ts) on port 3000. The server keeps an in-memory database of the client themes and products.

  3. In another terminal, run npm start to start the Angular dev server on port 4200.

  4. Navigate to http://localhost:4200/

🔑 Key takeaways

  • Instant Branding Updates: By storing themes in the database, developers can effortlessly update branding with a simple row edit, eliminating the need for extensive development cycles.

  • Seamless User Experience: Since themes are just data, we can create an API and UI for users to update their own branding without the need for developer intervention.

  • Dynamic CSS Variables: Leveraging document.documentElement.style.setProperty(), we can dynamically set CSS variables at runtime.

  • Dynamic Font Loading: Utilizing dynamically-generated <link> elements, we can import Google Fonts (or any other fonts) at runtime.

  • Route Resolver: Avoid a "flash of unstyled content" by loading the theme in a route resolver, before components are rendered.

🔭 Files to explore