Using dark mode with an alternate color palette

[vitto]

I'm trying to find a way to use my dynamically generated palette inside tailwind. I've used @adobe/leonardo and style-dictionaryto generate my palette, which builds something like this:

const paletteLight = {
  'blue': {
    '01': '#032d52',
    '02': '#033560',
    '03': '#044176',
    '04': '#044d8c',
    '05': '#0559a4',
    'DEFAULT': '#0559a3'
}
const paletteDark = {
  'blue': {
    '01': '#aed8fd',
    '02': '#97cdfc',
    '03': '#74bcfb',
    '04': '#51abfa',
    '05': '#2b98f9',
    'DEFAULT': '#0559a3'
}

basically, this palette concept is to use one blue with the same contrast ratios for light and dark mode, but in light palette with white color base and dark palette with black color base.

I've found a workaround in this:

/* vars.css */
:root {
  --blue-01: #032d52;
  --blue-02: #033560;
  --blue-03: #044176;
  --blue-04: #044d8c;
  --blue-05: #0559a4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue-01: #aed8fd;
    --blue-02: #97cdfc;
    --blue-03: #74bcfb;
    --blue-04: #51abfa;
    --blue-05: #2b98f9;
  }
}

and so in my tailwind config:

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue:
        '01': 'var(--blue-01)',
        '02': 'var(--blue-02)',
        '03': 'var(--blue-03)',
        '04': 'var(--blue-04)',
        '05': 'var(--blue-05)'
    },
  ...
}

Pros:

• I could use selector classes like blue-03 dark:blue-04 in a better dark mode way, thanks to @adobe/leonardo

Cons:

• I cannot automatically remove unused colors from vars.css, or maybe I don't know if there is a way to do it inside tailwind

This wouldn't be a problem with 10 colors palette size, but due to the huge size of the company where I work, (we have something like 100+ editorial sites, 40+ software products) I have a huge centralized colour palette, also because in many cases these products are related.

Does exists some way to integrate this color palette better, or maybe I'm just doing it all wrong?

[vitto]

I've found a solution, I can use PurgeCSS config directly in Tailwind, I was missing it was possible:

module.exports = {
purge: {
    content: [ './src/**/*.{js,jsx}' ],
    variables: true,
  },
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue:
        '01': 'var(--blue-01)',
        '02': 'var(--blue-02)',
        '03': 'var(--blue-03)',
        '04': 'var(--blue-04)',
        '05': 'var(--blue-05)'
    },
  ...
}

In facts, in PurgeCSS config, there is an option variables that do the trick.