dark mode doesn't work with vite

jd-carroll commented 1 year ago

@bkyerv I've documented the potential issue your facing in #22 with this comment

However, there is no way to assess your problem as you didn't even bother providing a description

diboune commented 1 year ago

same here, on a brand new Tauri project with Vite React, Dark mode is not working.

balintd commented 1 year ago

I have the same issue with Radix and Vite as well. I just started a project with the react-ts vite template and added Radix Themes. Every other theme configuration works properly except for appearance which does nothing and defaults to light.

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Theme } from '@radix-ui/themes'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Theme
      appearance='dark'
      accentColor='violet'
      grayColor='mauve'
      panelBackground='translucent'
      radius='small'
    >
      <App />
    </Theme>
  </React.StrictMode>,
)

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

vgrafe commented 1 year ago

Here's a solution using https://usehooks-ts.com/react-hook/use-dark-mode:

first, copy the hook source to your code.
add document.body.classList.toggle('dark', isDarkOS); to the hook's logic. It can be anywhere as long as it's outside of the useEffect.

on your app root component where the Theme component is rendered, import your new hook, and edit as follow:

function App() {
const { isDarkMode } = useDarkMode();
return (
<Theme
  appearance={isDarkMode ? 'dark' : 'light'}
>
// etc...

Jes015 commented 12 months ago

There are some "hacks" to fix this. Check out issue #22 . Resume: <body class="dark">

radix-ui / themes

dark mode doesn't work with vite #26