[v4] Let's discuss about @theme and @variant to manage light and dark modes easily.

[ParaSpl01t]

This is how I'm managing light and dark modes as of now.

@import 'tailwindcss';

@layer base {
    html {
        @apply bg-white text-slate-900;

        @variant dark {
            @apply bg-slate-900 text-white;
        }
    }
}

@layer components {
    .ui-button {
        @apply bg-slate-100 text-slate-800;

        @variant dark {
            @apply bg-slate-800 text-slate-100;
        }
    }
    /* ... more components below */
}

When the new and shiny css feature, var() was first released. It made managing dark mode really easy, all we had to do was to change the variable value according to prefers-color-scheme. Since @theme is now available in v4, i would love to use something similar in this syntax.

@import 'tailwindcss';

@theme {
    --bg-base: var(--color-white);
    --bg-shade-1: var(--color-slate-100);
    --bg-shade-2: var(--color-slate-200);

    --text-base: var(--color-slate-900);
    --text-shade-1: var(--color-slate-800);
    --text-shade-2: var(--color-slate-700);

    @variant dark {
        --bg-base: var(--color-slate-900);
        --bg-shade-1: var(--color-slate-800);
        --bg-shade-2: var(--color-slate-700);

        --text-base: var(--color-white);
        --text-shade-1: var(--color-slate-100);
        --text-shade-2: var(--color-slate-200);
    }
}

@layer base {
    html {
        @apply bg-base text-base;
    }
}

@layer components {
    .ui-button {
        @apply bg-shade-1 text-shade-1;

    }
    /* ... more components below */
}

I do not believe one way is better over other, but having this just gives users flexiblity to use what they are already fimiliar with. But this does one issue, the @theme is meant to modify tailwind utility classes like --color-slate-*, so --bg-base and --text-base will interfere. but, there might be better ways for me to handle the naming conventions.

What do you think?

[rutajdash]

++
It would be amazing if we could now configure something like this.
A much needed feature, as I usually use color roles (similar to Material Design) and the same variable would differ in light and dark mode.
Example:

@theme {
  --color-primary: #4c662b;
  --color-secondary: #586249;
  --color-tertiary: #386663;
  --color-on-primary: #ffffff;

  @variant dark {
    --color-primary: #b1d18a;
    --color-secondary: #bfcbad;
    --color-tertiary: #a0d0cb;
    --color-on-primary: #1f3701;
  }
}

We would only need to add something like bg-primary text-on-primary and the dark variants would work too.
My current workaround is the latest light-dark() css function. But I'd like if there were other alternatives, especially ones a bit more backwards compatible.