Add dark and light mode variants

[ben-rogerson]

Following the new tailwind darkmode feature, twin has also added the dark mode variant:

Darkmode: Default

tw`dark:bg-black`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "@media (prefers-color-scheme: dark)": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))"
  }
});

Darkmode: Class strategy

If you add { dark: 'class' } to your config:

tw`dark:bg-black`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  ".dark &": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))"
  }
});

With the class strategy, you'll need to add a className of dark on a parent element to make this strategy work (it can be dynamic too):

<div className="dark"><button tw="dark:bg-black">Hi</button></div>

Extra: Light mode

I've also added a light mode variant that works similarly:

Lightmode: Default

tw`light:bg-white`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "@media (prefers-color-scheme: light)": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))"
  }
});

Lightmode: Class strategy

If you add { dark: 'class' } (or { light: 'class' }) to your config:

tw`light:bg-white`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  ".light &": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(255, 255, 255, var(--bg-opacity))"
  }
});

With the class strategy, you'll need to add a className of light on a parent element to make this strategy work (it can be dynamic too):

<div className="light"><button tw="light:bg-white">Hi</button></div>

[timfee]

🎉

[cybervaldez]

I'm currently using the class strategy and grouping them together does not seem to work:

'dark:bg-black dark:text-white' // works
'dark:(bg-black text-white)' // does not work

[ben-rogerson]

I'm currently using the class strategy and grouping them together does not seem to work:

'dark:bg-black dark:text-white' // works
'dark:(bg-black text-white)' // does not work

That's really strange, both have the same output:

import tw from 'twin.macro'

tw`dark:bg-black dark:text-white`
tw`dark:(bg-black text-white)`


// ↓ ↓ ↓ ↓ ↓ ↓

({
  ".dark &": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))",
    "--text-opacity": "1",
    "color": "rgba(255, 255, 255, var(--text-opacity))"
  }
});
({
  ".dark &": {
    "--bg-opacity": "1",
    "backgroundColor": "rgba(0, 0, 0, var(--bg-opacity))",
    "--text-opacity": "1",
    "color": "rgba(255, 255, 255, var(--text-opacity))"
  }
});

Mind making a small demo to demonstrate the issue? You can start with one of these sandboxes.

[cybervaldez]

Sorry! That was a mistake on my part, I forgot my build was using the tailwind dark addon which may have caused the conflict. After disabling that everything's working fine now.

[garand]

@ben-rogerson When I group my dark mode classes I get the error pointing to this page saying "dark" must be added as className, however I don't get that error when I don't group them. I'm handling the dark class separately.

[ben-rogerson]

@garand Could you give me an example - just tested dark:block and dark:(block) without issues.

[garand]

@ben-rogerson Yeah, just realized my problem.. 😞 User error sorry. I neglected the : after dark. Was trying dark(block).