css - Radix UI Tema mørk modus blir ikke brukt

Jeg prøver å lage en app ved hjelp av Radix UI. Mørk modus skal aktiveres ved å sette appearance="dark", men alle de nestede komponentene som Box og Card forblir lyse.

Accent-fargeegenskapen fungerer bra, så vel som andre egenskaper, det eneste problemet ser ut til å være med mørk modus.

Dette er koden.

import { Grid, Theme } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';
import './App.css';


function App() {
  return (
    <Theme appearance="dark" accentColor="ruby" radius="large">
      <Grid columns="1" rows="2" align="center">
        <FirstComponent />
        <SecondComponent />
      </Grid>
    </Theme>
  );
}

export default App;

Svar #1

Fungerer ikke for meg heller. Det du gjør burde fungere i henhold til RadixUI Dark Mode-dokumentasjonen. Det finnes flere åpne problemer relatert til at mørk modus ikke fungerer på deres GitHub-side. Radix Themes har nettopp gitt ut 2.0.0, men jeg har bekreftet at dette også er ødelagt på 1.1.2. Jeg har for øyeblikket ingen løsning, men hvis jeg finner en, vil jeg oppdatere svaret mitt.

Rediger: Ett av Github-problemene nevner å aktivere mørk modus permanent ved å legge til dark-klassen på <body>-elementet: <body class="dark">. Du kan veksle denne klassen på og av ved å bruke ren JS (eller et JS-bibliotek som React), selv om jeg vil karakterisere dette som en hack.

Svar #2

En løsning jeg nettopp kom på var å ha en funksjon som la til eller fjernet klassen "dark" fra HTML-bodyen. Legg til funksjonen nedenfor i en onClick-hendelse, og dette bør løse problemet ditt.

const [darkMode, setDarkMode] = useState<boolean>(false);

const toggleDarkMode = () => {
  setDarkMode(!darkMode);
      if (darkMode) {
        document.body.classList.remove("dark");
       } else {
        document.body.classList.add("dark");
     }
  };

Relaterte artikler