[Feature proposal] Add an alternate color palette for dark mode

[vitto]

It would be nice to add the possibility to add a dark color palette theme, which can be switched with tailwind dark-mode config.

Why this request?

This whould be a killer feature for who wants to use the same contrast ratios for light and dark theme and gain in accessibility:

Contrast ratio	Color	HEX	Base
14	blue-01	#032D52	#FFFFFF
5.75	blue-02	#0559A4	#FFFFFF
2.25	blue-03	#3EA1F9	#FFFFFF
1.32	blue-04	#B8DDFD	#FFFFFF
1.05	blue-05	#F3F9FF	#FFFFFF
14	blue-01	#AED8FD	#000000
5.75	blue-02	#2B98F9	#000000
2.25	blue-03	#055398	#000000
1.32	blue-04	#02294A	#000000
1.05	blue-05	#010911	#000000

Blue #0559a3 with #FFFFFF color base example.
Blue #0559a3 with #000000 color base example.

Dark mode color would bring these benefits

• Dark mode can be enabled automatically, reducing your codebase, without adding manual declarations in the markup, and you'd still use manual declarations to adjust small variations if needed;
• This would be nice for accessibilty, because the same contrast ratio means readable also for people with optical desease;
• This is a true dark mode, due to the same contrast ratio with light and dark theme colors.

These articles can be useful to explain why color would work better in this way:
Creating contrast based themes with Leonardo
Leonardo: an open source contrast-based color generator

---

Just as basic example, in the confing it could be something like this:

module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{js,jsx}'
  ],
  darkMode: 'media',
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        '00': '#032D52',
        '02': '#0559A4',
        '03': '#3EA1F9',
        '04': '#B8DDFD',
        '05': '#F3F9FF',
      },
    },
    darkModeColors: {
      blue: {
        '00': '#AED8FD',
        '02': '#2B98F9',
        '03': '#055398',
        '04': '#02294A',
        '05': '#010911',
      },
    },
    extend: { },
  },
  variants: {
    extend: { },
  },
  plugins: [],
}

I cannot imagine myself without Tailwind in my stack, and I think this would be a very useful feature for it.

[boyankostov]

I was looking for the same feature. That would ideally allow me to not have to write separate dark: styles for each component. Hope it's planned for the future. It would allow building more intelligent dark palettes like the ones IBM and Adobe have, the latter one based on the same tool made by @NateBaldwinDesign mentioned above.

[wongjn]

Generally, the maintainers don't really recommend this approach and thus is probably why there is not a more "built-in" way of achieving this.

For example, from Simon Vrachliotis:

When implementing dark mode interfaces, you likely don't always want to just "swap" or invert colors, and often need much more "fine control", to make contextual decisions on a lot of parts of the UI.

And from Adam Wathan:

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.