How to create a dynamic CSS system in a Vue 3 application?

Question

I'm developing an application that will be used by many different clients, but "themes" cannot be shared between clients because their color schemes are considered proprietary and confidential, although I know this sounds ridiculous.

Now, the colors are defined in the main App.vue component, without <style> instead of <stylescoped>, and then downstream Components are scoped.

The current way it works is that I use CSS variables to define colors and gradients.

I'm more or less looking for a solution that does something like pseudocode:

const clientName = import.meta.env.CLIENT_NAME

if (clientName === 'abc') {

  :root {
    --background-color: #f3f3f3;
    --default-font-color: #000000;
    --primary: #8c4799;
    --secondary: #d22630;
    --gradient-primary: rgba(140, 71, 153, 0.2) 4.55%;
    --gradient-secondary: rgba(210, 38, 48, 0.02) 105.67%;
    --failure-color: #b94527;
    --badge1: #419bbe;
    --badge1text: #ffffff;
    --c-white: #f2f2f2;
  }

} else if (clientName === 'def') {
    --background-color: #0c0c0c;
    --default-font-color: #ffffff;
    --primary: #c1fc3d;
    --secondary: #d22630;
    --gradient-primary: rgba(110, 71, 153, 0.2) 3%;
    --gradient-secondary: rgba(190, 38, 48, 0.02) 50%;
    --failure-color: #b94527;
    --badge1: #419bbe;
    --badge1text: #ffffff;
    --c-white: #ffffff;
}

Keep in mind that all downstream components use these variables and it is a very large application.

I'm using Vite for bundling (if that works).

Answer 1

You can create a .css file to export these css variables for each client. Then, on the main.js entry point, you can import the file corresponding to that client:

const clientName = import.meta.env.CLIENT_NAME

import `@/assets/themes/${clientName}.css`;