Generate themed CSS variables

by maxell4o

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.6.0/tinycolor.min.js"></script>

JavaScript

let themeConfig = {
  mode: 'light',
  themes: {
    light: {
      palette: {
        primary: '#6366F1',
        secondary: '#059669',
        neutral: '#64748B',
      },
      layout: {
        'body-bg': '#0F172A',
        'surface-bg': '#1E293B',
        'text-color': '#F8FAFC',
      },
      footer: {
        bg: '#1E293B',
      },
      header: {
        bg: '#6366F1',
        gradient: 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
        'text-color': '#FFFFFF',
        'accent-color': '#F7CB48',
      },
      buttons: {
        primary: {
          bg: '#6366F1',
          gradient: 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)',
          'text-color': '#FFFFFF',
        },
        secondary: {
          bg: '#059669',
          'text-color': '#FFFFFF',
        },
      },
    },
  },
  seat: {
    1: '/regular.png',
    10: '/handicap_space.png',
  },
};

const theme = themeConfig.themes[themeConfig.mode || 'light'];
const prefix = '--bp';
const vars = {};

const generateColorScale = (color) => {
  return {
    100: tinycolor(color).lighten(45).toHexString(),
    200: tinycolor(color).lighten(35).toHexString(),
    300: tinycolor(color).lighten(25).toHexString(),
    400: tinycolor(color).lighten(12).toHexString(),
    500: tinycolor(color).toHexString(),
    600: tinycolor(color).darken(8).toHexString(),
    700: tinycolor(color).darken(16).toHexString(),
    800: tinycolor(color).darken(24).toHexString(),
    900: tinycolor(color).darken(32).toHexString(),
  };
};

// Palette
for (const [k, v] of Object.entries(theme.palette)) {
  for (const [j, y] of Object.entries(generateColorScale(v))) {
    vars[`${prefix}-${k}-${j}`] = y;
  }
  vars[`${prefix}-${k}`] = v;
}
// Layout
for (const [k, v] of Object.entries(theme.layout)) {
  vars[`${prefix}-${k}`] = v;
}
// Header
for (const [k, v] of Object.entries(theme.header)) {
  vars[`${prefix}-header-${k}`] = v;
}
//...