Get theme names from SCSS list variable and use it for dynamic color palette names

[micobarac]

I have color palettes defined inside SCSS file, but I want them to be available to Tailwind, too. Colors are mapped fine by using variables, but getting and parsing theme names from SCSS to dynamically build theme colors doesn't work...

--themes: apple, space, orange, gray, mid-gray, soft-gray, almost-white, sky, neon;

  const themes = 'var(--themes)'.split(',').map((theme) => theme.trim());
  console.log(themes);

The console log:

[ 'var(--themes)' ]

Full code:

const getColors = () => {
  const colors = {};
  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];

  const themes = 'var(--themes)'.split(',').map((theme) => theme.trim());

  themes.forEach((theme) => {
    const tints = {};

    shades.forEach((shade) => {
      tints[shade] = `rgb(var(--${theme}-${shade}) / <alpha-value>)`;
    });

    colors[theme] = tints;
  });

  return colors;
};

I know that like this, the CSS variable is not parsed, it is just a string, so I need a suggestion how to get it right.

[wongjn]

You could consider replacing the 'var(--themes)' parsing with the list of themes as an array:

-const themes = 'var(--themes)'.split(',').map((theme) => theme.trim());
+const themes = [
+  'apple',
+  'space',
+  'orange',
+  'gray',
+  'mid-gray',
+  'soft-gray',
+  'almost-white',
+  'sky',
+  'neo',
+];

[micobarac]

I don't want to define theme names inside Tailwind configuration. I want to get it from SCSS variables defined in SCSS file.

[wongjn]

I'm sorry that you feel that way. Could you elaborate more about how the solution is not helpful to you please?

[wongjn]

I don't want to define theme names inside Tailwind configuration. I want to get it from SCSS variables defined in SCSS file.

I see!

You could read the file and then parse the content manually, like:

const fs = require('node:fs');

const fileContent = fs.readFileSync('./path/to/file.scss', 'utf8');
const themesValue = /\$theme:(.+?);/.exec(fileContent);
const themes = // Extract values from `themesValue` here.

[micobarac]

Not working :(

[wongjn]

You'll need to adapt it to make it work for your project.