Dark Mode Switcher

[bnhr]

I'm curious, but how do you guys create theme switcher using twin.macro? And also how to support tailwindcss/typography with dark mode?

[ben-rogerson]

Hey there, check out this resource on how to create a theme switcher.

Regarding @tailwindcss/typography, you'll need to overwrite the color classes with css variables for your theme. Check their readme for instructions on that.

[RasenGUY]

seems code-sandboxes here are not available anymore

[ben-rogerson]

They hadn't been updated in quite a while, I'd suggest taking a look online for some newer methods on how best to define a theme switcher with tailwind+[insert css-in-js-lib-here].

[irg1008]

Be aware this solution disables any background opacity in colors with css variables.

[ben-rogerson]

Here's how you add css opacity:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: ({ opacityVariable, opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(var(--color-primary), ${opacityValue})`
        }
        if (opacityVariable !== undefined) {
          return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
        }
        return `rgb(var(--color-primary))`
      },
    },
  },
  // ...
}

Then use rgb values for your colors:

:root {
  --color-primary: 37, 99, 235;
  --color-secondary: 253, 224, 71;
}