const themes = {
  default: {
    primary: '#3B82F6',
    background: '#F9FAFB',
    text: '#111827',
    font: 'Inter, sans-serif'
  },
  midnight: {
    primary: '#60A5FA',
    background: '#0F172A',
    text: '#F1F5F9',
    font: 'Inter, sans-serif'
  }
  // ... other themes
};

function ThemedComponent({ theme = 'default' }) {
  const currentTheme = themes[theme];

  return (
    <div style={{
      backgroundColor: currentTheme.background,
      color: currentTheme.text,
      fontFamily: currentTheme.font,
      padding: '1rem',
      borderRadius: '0.5rem'
    }}>
      <button style={{
        backgroundColor: currentTheme.primary,
        color: 'white',
        padding: '0.5rem 1rem',
        borderRadius: '0.25rem'
      }}>
        Click me
      </button>
    </div>
  );
}

import tkinter as tk

THEMES = {
    'default': {
        'primary': '#3B82F6',
        'background': '#F9FAFB',
        'text': '#111827',
        'font': ('Inter', 12)
    },
    'midnight': {
        'primary': '#60A5FA',
        'background': '#0F172A',
        'text': '#F1F5F9',
        'font': ('Inter', 12)
    }
}

def apply_theme(root, theme_name):
    theme = THEMES[theme_name]
    root.configure(bg=theme['background'])

    # Apply to all widgets
    for widget in root.winfo_children():
        widget.configure(bg=theme['background'], fg=theme['text'])

# Usage
root = tk.Tk()
apply_theme(root, 'midnight')

:root {
  --primary: #3B82F6;
  --background: #F9FAFB;
  --text: #111827;
  --font: 'Inter', sans-serif;
}

[data-theme="midnight"] {
  --primary: #60A5FA;
  --background: #0F172A;
  --text: #F1F5F9;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font);
}

button {
  background-color: var(--primary);
  color: white;
}

import { useState, createContext, useContext } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('default');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="default">Default</option>
      <option value="midnight">Midnight</option>
      <option value="forest">Forest</option>
      {/* ... other options */}
    </select>
  );
}

import { useEffect, useState } from 'react';

function useDarkMode() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDark(mediaQuery.matches);

    const handler = (e) => setIsDark(e.matches);
    mediaQuery.addEventListener('change', handler);

    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return isDark;
}

function AutoTheme() {
  const isDark = useDarkMode();
  const theme = isDark ? 'midnight' : 'default';

  return <ThemedApp theme={theme} />;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
        background: 'var(--background)',
        text: 'var(--text)',
      }
    }
  }
}