Dark mode at the color pallete config level

[AdsonCicilioti]

TW's current dark mode is already awesome!
But it would be even better if we could define in the tailwind.config.js file the corresponding dark version of a single color or an entire color palette. Thus, whatever the mode of application of the dark mode, class, [attr] or media, TW would have the ability to search for the dark correspondence of the colors defined in the config, without having to use the utility dark: in the class composition of an element.

See the example below where we define 3 default application/site colors:

const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        default: colors.neutral,
        primary: colors.orange,
        secondary: colors.rose,
        foreground: colors.black,
        background: colors.white,
      },
      colorsDark: {
        default: colors.neutral_INVERTED,
        primary: colors.orange_INVERTED,
        secondary: colors.rose_INVERTED,
        foreground: colors.white,
        background: colors.black,
      },
    },
  },
  plugins: [],
};

In the example I assumed that the color object will provide the inverted color palettes to aid in creating color palettes in the dark version. But logically we could adjust one by one or just the color graduations that we want to assume the auto dark behavior... Oops! I think I found a name for this functionality.

Logically, we can already do this through the application's main CSS file, something like:

@layer base {
  .bg-system-100 {
    @apply bg-slate-100 dark:bg-slate-900
  }
  .bg-system-200 {
    @apply bg-slate-200 dark:bg-slate-800
  }
  
}

However, as we can see, it would be too verbose and laborious.
Maybe with a little more study and testing I'll be able to create a script that achieves this behavior, but I leave here the idea and who knows we can collaborate and officially see something in this sense in TailwindCSS.

[wongjn]

Relevant post by Adam Wathan, creator of Tailwind (emphasis mine):

I would define all of my colors as CSS variables and use a parent selector just to change the values of the variables, no need to create tons of custom classes:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

This demo is several versions behind so some things are out of date but should communicate the idea clearly at least:

https://github.com/adamwathan/theming-tailwind-demo

Personally I think doing dark mode this way is seductive but not as practical as you expect. Tons of situations where you end up swapping the same color in light mode for two different colors in dark mode depending on how it’s used, and then you need to come up with different names for those two colors and it quickly becomes a very big project.

[AdsonCicilioti]

Oh nice!

I don't know about <alpha-value> special placeholder. Thats game changer!

Thanks @wongjn !