Tailwind Auto Dark Mode

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light colors */
    --color-light-surface-100: #ffffff;
    --color-light-surface-200: #fafafa;
    --color-light-surface-300: #f6f6f6;
    --color-light-surface-400: #f1f2f3;
    --color-light-surface-500: #e6e8ea;
    --color-light-surface-600: #d0d4d7;
    --color-light-surface-inversed: #17191a;
    --color-light-onSurface-primary: #3a3d3f;
    --color-light-onSurface-secondary: #4e5255;
    --color-light-onSurface-tertiary: #62666a;
    --color-light-onSurface-disabled: #b8bbbf;
    --color-light-primary: #5cad8b;
    --color-light-primary-dark: #509175;
    --color-light-primary-light: #73bf9f;
    --color-light-primary-disabled: #afe3cd;
    --color-light-primary-inversed: #17191a;
    --color-light-secondary: #515aad;
    --color-light-destructive-bg: #e74c3c;
    --color-light-destructive-fg: #ffffff;
    /* Dark colors */
    --color-dark-surface-100: #090909;
    --color-dark-surface-200: #0f0f0f;
    --color-dark-surface-300: #141414;
    --color-dark-surface-400: #19191a;
    --color-dark-surface-500: #212121;
    --color-dark-surface-600: #343536;
    --color-dark-surface-inversed: #ffffff;
    --color-dark-onSurface-primary: #b0b8bf;
    --color-dark-onSurface-secondary: #9da4ab;
    --color-dark-onSurface-tertiary: #888e94;
    --color-dark-onSurface-disabled: #3d3e40;
    --color-dark-primary: #509175;
    --color-dark-primary-dark: #509175;
    --color-dark-primary-dark: #73bf9f;
    --color-dark-primary-disabled: #182e25;
    --color-dark-primary-inversed: #ffffff;
    --color-dark-secondary: #515aad;
    --color-dark-destructive-bg: #e74c3c;
    --color-dark-destructive-fg: #ffffff;
  }

  html {
    --color-surface-100: var(--color-light-surface-100);
    --color-surface-200: var(--color-light-surface-200);
    --color-surface-300: var(--color-light-surface-300);
    --color-surface-400: var(--color-light-surface-400);
    --color-surface-500: var(--color-light-surface-500);
    --color-surface-600: var(--color-light-surface-600);
    --color-surface-inversed: var(--color-light-surface-inversed);
    --color-onSurface-primary: var(--color-light-onSurface-primary);
    --color-onSurface-secondary: var(--color-light-onSurface-secondary);
    --color-onSurface-tertiary: var(--color-light-onSurface-tertiary);
    --color-onSurface-disabled: var(--color-light-onSurface-disabled);
    --color-primary: var(--color-light-primary);
    --color-primary-dark: var(--color-light-primary-dark);
    --color-primary-light: var(--color-light-primary-light);
    --color-primary-disabled: var(--color-light-primary-disabled);
    --color-primary-inversed: var(--color-light-primary-inversed);
    --color-secondary: var(--color-light-secondary);
    --color-destructive-bg: var(--color-light-destructive-bg);
    --color-destructive-fg: var(--color-light-destructive-fg);

    @media (prefers-color-scheme: dark) {
      --color-surface-100: var(--color-dark-surface-100);
      --color-surface-200: var(--color-dark-surface-200);
      --color-surface-300: var(--color-dark-surface-300);
      --color-surface-400: var(--color-dark-surface-400);
      --color-surface-500: var(--color-dark-surface-500);
      --color-surface-600: var(--color-dark-surface-600);
      --color-surface-inversed: var(--color-dark-surface-inversed);
      --color-onSurface-primary: var(--color-dark-onSurface-primary);
      --color-onSurface-secondary: var(--color-dark-onSurface-secondary);
      --color-onSurface-tertiary: var(--color-dark-onSurface-tertiary);
      --color-onSurface-disabled: var(--color-dark-onSurface-disabled);
      --color-primary: var(--color-dark-primary);
      --color-primary-dark: var(--color-dark-primary-dark);
      --color-primary-light: var(--color-dark-primary-dark);
      --color-primary-disabled: var(--color-dark-primary-disabled);
      --color-primary-inversed: var(--color-dark-primary-inversed);
      --color-secondary: var(--color-dark-secondary);
      --color-destructive-bg: var(--color-dark-destructive-bg);
      --color-destructive-fg: var(--color-dark-destructive-fg);
    }
  }

  body {
    @apply text-onSurface-primary;
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        surface: {
          100: "var(--color-surface-100)",
          200: "var(--color-surface-200)",
          300: "var(--color-surface-300)",
          400: "var(--color-surface-400)",
          500: "var(--color-surface-500)",
          600: "var(--color-surface-600)",
          inversed: "var(--color-surface-inversed)",
        },
        onSurface: {
          primary: "var(--color-onSurface-primary)",
          secondary: "var(--color-onSurface-secondary)",
          tertiary: "var(--color-onSurface-tertiary)",
          disabled: "var(--color-onSurface-disabled)",
        },
        primary: {
          DEFAULT: "var(--color-primary)",
          dark: "var(--color-primary-dark)",
          light: "var(--color-primary-light)",
          disabled: "var(--color-primary-disabled)",
          inversed: "var(--color-primary-inversed)",
        },
        secondary: "var(--color-secondary)",
        destructive: {
          DEFAULT: "var(--color-destructive-bg)",
          foreground: "var(--color-destructive-fg)",
        },
      },
    },
  },
};