Darkmode style not implemented whenusing styled components variables

[iandjx]

i have a styled component

const Tab = styled.div<{ isActive: boolean }>`
  ${tw`w-1/2 rounded-t-xl text-2xl text-center py-3 cursor-pointer`}

  ${({ isActive }) =>
    isActive
      ? tw`bg-white dark:bg-slate-800`
      : tw`dark:bg-slate-800 bg-neutral-300`}
`

in light mode and the tab is active it's background is white but in dak mode and the tab is active, the background remains transparent.

I expect that the background will be bg-slate-800 but its not the case.

I was thinking of passing isDark as a prop to this component but that would result to a pretty long ternary comparison.

[ben-rogerson]

This is working for me, I'm seeing the bg-slate-800 with dark mode set on my system.

Here's the conversion happening if it helps:

const Tab = styled.div<{ isActive: boolean }>`
  ${({ isActive }) =>
    isActive
      ? tw`bg-white dark:bg-slate-800`
      : tw`dark:bg-slate-800 bg-neutral-300`}
`

// ↓ ↓ ↓ ↓ ↓ ↓

const Tab = _styled.div`
  ${({
  isActive
}) => isActive ? {
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
  "@media (prefers-color-scheme: dark)": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(30 41 59 / var(--tw-bg-opacity))"
  }
} : {
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(212 212 212 / var(--tw-bg-opacity))",
  "@media (prefers-color-scheme: dark)": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(30 41 59 / var(--tw-bg-opacity))"
  }
}}
`;