Dark theme does not work with React Stitches

510 Views Asked by darkhorse At 21 October 2024 at 06:42

I'm using Stitches in React to handle my CSS and theming. I have the following code:

import React from 'react'
import { createStitches, globalCss } from '@stitches/react'

const { theme, createTheme } = createStitches({
  theme: {
    colors: {
      text: 'blue',
      bodyBg: 'lightgray',
    },
  },
})

const darkTheme = createTheme('dark-theme', {
  colors: {
    bodyBg: 'black',
  },
})

const globalStyles = globalCss({
  'body': {
    color: '$text',
    backgroundColor: '$bodyBg'
  },
});

function App() {
  globalStyles()
  return (
    <div className='App'>
      <h1>Hello World!</h1>
    </div>
  )
}

export default App

As you can see, I have a default theme, and then a dark theme that extends the default theme while overriding some properties (in this case, the bodyBg). I'm applying these styles directly in my <body>. The default theme works fine, but the dark theme does not. When I add the .dark-theme class to my <html>, nothing changes (the background should turn black). What exactly am I doing wrong here?

Original Q&A

There are 1 best solutions below

Цветан Иванов On 10 September 2022 at 13:20 BEST ANSWER

You are probably trying to add the class directly to the body in the developer tools which doesn't work.

I managed to make it work with a button onClick event:

const darkTheme = createTheme('dark-theme', {
  colors: {
    bodyBg: 'black',
  },
})

function App() {

  const setBlackTheme = () => {
    document.body.classList.remove(...document.body.classList);

    // Here we set the darkTheme as a class to the body tag
    document.body.classList.add(darkTheme);
  }

  globalStyles()
  return (
    <div className='App'>
      <button onClick={setBlackTheme}>Dark Theme</button>
      <h1>Hello World!</h1>
    </div>
  )
}

export default App

Try it and let's see if it works for you as well.

Dark theme does not work with React Stitches

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in STYLED-COMPONENTS

Related Questions in STITCHES

Trending Questions

Popular # Hahtags

Popular Questions