Dark Mode Generator

:root {
  /* Light Theme */
  --color-background: #ffffff;
  --color-surface: #f5f5f5;
  --color-primary: #4a90e2;
  --color-text-primary: #1a1a1a;
  --color-border: #e0e0e0;
}

[data-theme="dark"] {
  --color-background: #262626;
  --color-surface: #333333;
  --color-surface-variant: #404040;
  --color-primary: #4691e7;
  --color-primary-variant: #94bae6;
  --color-text-primary: #e6e6e6;
  --color-text-secondary: #b3b3b3;
  --color-text-disabled: #737373;
  --color-border: #4d4d4d;
  --color-divider: #404040;
  --color-error: #ea312e;
  --color-success: #57c15d;
  --color-warning: #ff981a;
}

// Dark Mode SCSS Variables
$dark-background: #262626;
$dark-surface: #333333;
$dark-surface-variant: #404040;
$dark-primary: #4691e7;
$dark-primary-variant: #94bae6;
$dark-text-primary: #e6e6e6;
$dark-text-secondary: #b3b3b3;
$dark-text-disabled: #737373;
$dark-border: #4d4d4d;
$dark-divider: #404040;
$dark-error: #ea312e;
$dark-success: #57c15d;
$dark-warning: #ff981a;

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        dark: {
          bg: '#262626',
          surface: '#333333',
          'surface-variant': '#404040',
          primary: '#4691e7',
          'primary-variant': '#94bae6',
          'text-primary': '#e6e6e6',
          'text-secondary': '#b3b3b3',
          border: '#4d4d4d',
          divider: '#404040',
        }
      }
    }
  }
}