Darkmode

[rufreakde]

Prerequisites

• I have read the documentation

What theme are you using?

material-ui

What is your question?

How is it possible to enable material-ui 5s darkmode? I googled and also checked the documentation but could not find anything specifically.

Themeprovider does not seem to work when set around the Form component.

https://mui.com/material-ui/customization/dark-mode/#dark-mode-only

import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import { withTheme } from '@rjsf/core'
import { Theme } from '@rjsf/mui'
import validator from '@rjsf/validator-ajv8'
...
const textRootPath = 'rootPath'
const Form = withTheme(Theme)

const darkTheme = createTheme({
  palette: {
    mode: 'dark'
  }
})

....

          <ThemeProvider theme={darkTheme}>
            <CssBaseline />
            <Form
              key={new Date().getTime()}
              //className="readableBackground"
              children={true} // hide submit button
              schema={treeState.customDataHolder?.jsonSchema?.referenceData}
              uiSchema={{}}
              formData={{}}
              validator={validator}
              onChange={onFormChange}
              onSubmit={onSubmit}
              onError={customLog('errors')}
            />
          </ThemeProvider>

[nickgros]

I can't reproduce this, here's a CodeSandbox with it working.

We will need more specific reproduction steps to identify if this is an issue in RJSF.

[rufreakde]

mhm strange let me try to disable all css in my project and see what happens.

okay yeah it seems the default main.css from the electron project I created with vite seems to interfere somehow extremly with the theme!

Thanks for testing this out ticket can be closed after removing all css I at least saw darkmode working :)