مضامین ایمن از نوع در Tailwind CSS با استفاده از متغیرهای CSS و TypeScript

module.exports = {
  theme: {
    colors: {
      primary: '#571089',
      accent: '#ea698b',
    }
  }
}

export const theme = {
  mode: 'light',
  light: {
    color: {
      primary: '#571089',
      primary_light: ['#6411ad', '#6d23b6'],
      primary_deep: ['#47126b'],
      background: '#ffffff',
    },
    font: {
      primary: 'ui-sans-serif, system-ui, sans-serif',
    }
  },
  dark: {
    color: {
      primary: '#571089',
      primary_light: ['#6411ad', '#6d23b6'],
      primary_deep: ['#47126b'],
      background: '#0a0f1c',
    },
    font: {
      primary: 'ui-sans-serif, system-ui, sans-serif',
    }
  }
} as const;

// theme-generator.ts
import { buildSync } from 'esbuild';
import fs from 'fs';
import path from 'path';

const result = buildSync({
  entryPoints: ['src/config/theme/theme.ts'],
  bundle: true,
  platform: 'node',
  write: false,
  format: 'cjs',
});

const compiled = result.outputFiles[0].text;
const module = { exports: {} };
const func = new Function('module', 'exports', compiled);
func(module, module.exports);
const theme = module.exports.default || module.exports.theme || module.exports;

if (!theme || !theme.light || !theme.dark) {
  console.error('Theme format invalid or missing colors');
  process.exit(1);
}

let css = '/* Do not edit this file, this will be automatically replaced by system */\n@import "tailwindcss";\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n';

const flatten = (prefix, value, isDark = false) => {
  const convertedPrefix = prefix.split("_").join("-");
  if (Array.isArray(value)) {
    value.forEach((v, i) => {
      css += `    --${convertedPrefix}-${i}${isDark ? '-dark' : ''}: ${v};\n`;
    });
  } else if (typeof value === 'object') {
    Object.entries(value).forEach(([k, v]) => {
      flatten(`${convertedPrefix}-${k}`, v, isDark);
    });
  } else {
    css += `    --${convertedPrefix}${isDark ? '-dark' : ''}: ${value};\n`;
  }
};

Object.entries(theme.light).forEach(([key, value]) => flatten(key, value));
Object.entries(theme.dark).forEach(([key, value]) => flatten(key, value, true));

css += '}';

fs.mkdirSync(path.join('src'), { recursive: true });
fs.writeFileSync(path.join('src', 'tailwind.css'), css);
console.log('✅ Tailwind theme generated at: src/tailwind.css');

/* Do not edit this file, this will be automatically replaced by system */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-primary: #571089;
    --color-primary-light-0: #6411ad;
    --color-primary-light-1: #6d23b6;
    --color-primary-light-2: #822faf;
    --color-primary-light-3: #973aa8;
    --color-primary-light-4: #ac46a1;
    --color-primary-deep-0: #47126b;
    --color-accent: #ea698b;
    --color-accent-deep-0: #d55d92;
    --color-accent-deep-1: #c05299;
    --color-accent-deep-2: #c05299;
    --color-background: #ffffff;
    --font-primary: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-primary-dark: #571089;
    --color-primary-light-0-dark: #6411ad;
    --color-primary-light-1-dark: #6d23b6;
    --color-primary-light-2-dark: #822faf;
    --color-primary-light-3-dark: #973aa8;
    --color-primary-light-4-dark: #ac46a1;
    --color-primary-deep-0-dark: #47126b;
    --color-accent-dark: #ea698b;
    --color-accent-deep-0-dark: #d55d92;
    --color-accent-deep-1-dark: #c05299;
    --color-accent-deep-2-dark: #c05299;
    --color-background-dark: #0a0f1c;
    --font-primary-dark: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

 class="bg-primary dark:bg-primary-deep text-accent dark:text-accent-deep">
  Hello themed world!