Joy UI - Dark mode in only one section of an app

Question

I am using MUI Joy UI, and enjoying it. My overall app is in light mode, however I want one section of the app (the sidebar) to use darker colours. I am trying to set only that section of the app to use dark mode, keeping the rest of the app in light mode.

I have a root CssVarsProvider defaulting to light mode working correctly. I have tried

• Adding a second CssVarsProvider wrapping the side bar, set to dark mode
• Setting a different modeStorageKey on the second CssVarsProvider
• Setting disableNestedContext on the second CssVarsProvider

These changes have not resulted in any noticeable difference to the app. I have tried clearing local storage.

I have found examples of doing this for Material UI but not for Joy UI.

How can I use dark mode in a section of a light mode app, or is there a better way to achieve the same outcome?

Update:

I found the following extra documentation but I haven't got it to work yet

https://github.com/mui/material-ui/pull/35277

Answer 1

I have found a way to do what I want. I suspect it is not the best way, but perhaps it might be useful to someone.

I have a root CssVarsProvider as usual

<CssVarsProvider>
    <CssBaseline />
    <App />
</CssVarsProvider>

Then in my sidebar component somewhere within my App, I have something like

import { CssVarsProvider, extendTheme } from "@mui/joy";

const baseTheme = extendTheme();

const darkOnlyTheme = extendTheme({
    cssVarPrefix: "sidebar_",
    colorSchemes: {
        light: baseTheme.colorSchemes.dark,
        dark: baseTheme.colorSchemes.dark,
    },
});

export default function Sidebar() {
    return (
        <CssVarsProvider theme={darkOnlyTheme}>
            {/* My sidebar layout here... */}
        </CssVarsProvider>
    );
}