How do i set a different background color based on theme ?

[UmbrellaCrow612]

i have the basic nextra theme, with light and dark mode, i added tailwind css but in the styles i want to add

@tailwind base;
@tailwind components;
@tailwind utilities;

::selection {
  @apply bg-pink-400 dark:bg-cyan-300
}

but the dark dose not work ?

Or how do i just apply slightly different styles depending on the theme ?

[UmbrellaCrow612]

@shuding

[UmbrellaCrow612]

i also tried with plain css

[data-theme='dark'] ::selection {
    background-color: pink;
}

[data-theme='light'] ::selection {
    background-color: pink;
}

[UmbrellaCrow612]

@B2o5T

[UmbrellaCrow612]

Found a solution i think

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: "nx-",
  darkMode: ["class", 'html[class~="dark"]'],
  content: [
    "./components/**/*.{ts,tsx}",
    "./pages/**/*.{md,mdx}",
    "./theme.config.tsx",
  ],
};

then _app.mdx

import '../global.css'

export default function App({ Component, pageProps }) {
  return (
    <div className="selection:nx-bg-pink-400 dark:selection:nx-bg-slate-100">
      <Component {...pageProps} />
    </div>
  )
}

seems to work