Dark/Light Mode Toggle Button is not showing up after update from v. 0.8.1 to 0.9.0

[Petar-Dimitrov-AXA]

Search keywords

theming toggle dark mode light mode

Latest version

• I have tested the latest version

Steps to reproduce

After I updated @toolpad/core lib to version 0.9.0 form version, the Dark/Light toggle button ist not appearing anymore.

Setting the dark/light mode programmatically is working. #see setMode(defaultMode);

Here is my Layout Component where I use the the AppProvider and the DashboardLayout:

export const Layout: FC<ExtendedLayoutProps> = (props: ExtendedLayoutProps) => {
  const {
    logInUrl,
    logOutUrl,
    username,
    stage,
    isUserLoggedIn,
    logoutUser,
    routes,
    NotLoggedInNode,
    loginMessage = 'Please login',
    setLanguage,
    concatSupportTranslationKey,
    supportEmailTranslationKey,
  } = props;

  const theme: AppTheme = useTheme();
  const { t } = useTranslation();
  const { jsxRoutes, sidebarConfig }: RoutingConfig = createRoutingConfig(routes, t);
  const { setMode } = useColorScheme();

  useEffect(() => {
    // handle default theming
    const storedMode: string | null = localStorage.getItem('toolpad-mode');

    const defaultMode: 'dark' | 'light' | 'system' =
      storedMode === 'dark' || storedMode === 'light' || storedMode === 'system'
        ? storedMode
        : 'system';

    setMode(defaultMode);
  });

  const handleLogin = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    window.location.href = `${logInUrl}`;
  };

  const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    logoutUser();
    let logoutUrl = logOutUrl;

    if (stage === 'local') {
      const at = getAT();
      logoutUrl = `${logoutUrl}?at=${at}`;
      deleteAtCookie();
    }

    let redirectLogoutUrl = logoutUrl;

    if (!redirectLogoutUrl?.includes('redirect_uri')) {
      redirectLogoutUrl = `${logoutUrl}?redirect_uri=${window.location.href}`;
    }

    window.location.href = redirectLogoutUrl;
  };

  const logo = <img src={LightModeLogo} alt="logo" />;

  const logout = () => (
    <IconButton onClick={isUserLoggedIn ? handleLogout : handleLogin}>
      {isUserLoggedIn ? <LogoutIcon /> : <LoginIcon />}
    </IconButton>
  );

  return (
    <Fragment>
      <AppProvider navigation={sidebarConfig} theme={theme} branding={{ title: '', logo }}>
        <Header isUserLoggedIn={isUserLoggedIn} stage={stage} username={username} />

        <DashboardLayout
          slots={{ toolbarActions: logout }}
          hideNavigation={!isUserLoggedIn}
          className="root"
        >
          <PageContainer className="page-container">
            {isUserLoggedIn ? (
              <Routes>
                {...jsxRoutes}
                <Route path="/logout" element={<PublicPage />} />
                <Route path="*" element={<Welcome />} />
              </Routes>
            ) : NotLoggedInNode ? (
              { ...NotLoggedInNode }
            ) : (
              <Typography variant="h5">{loginMessage}</Typography>
            )}
          </PageContainer>
        </DashboardLayout>

        <Footer
          setLanguage={setLanguage}
          concatSupportTranslationKey={concatSupportTranslationKey}
          supportEmailTranslationKey={supportEmailTranslationKey}
        />
      </AppProvider>
    </Fragment>
  );
};

And here is my theming config:

export function createTheme(reactRoot: Element) {
  return createTheme({
    cssVariables: {
      colorSchemeSelector: 'data-toolpad-color-scheme',
    },
    colorSchemes: {
      dark: {
        palette: {
          background: {
            default: 'rgba(83,82,82,0.43)',
            paper: 'rgba(90,90,90,0.61)',
          },
          primary: {
            main: '#ffffff',
          },
        },
      },
      light: {
        palette: {
          background: {
            default: '#FFFFFF',
            paper: '#FAFAFA',
          },
          primary: {
            main: '#00008F',
          },
          secondary: {
            main: '#d24723',
          },
          info: {
            main: '#4976BA',
          },
          error: {
            main: '#c91432',
          },
          warning: {
            main: '#ffbc11',
            contrastText: '#000',
          },
          text: {
            primary: '#333',
          },
          offerContent: {
            main: '#f1f3f5',
            dark: '#dee2e6',
          },
        },
      },
    },
    typography: .................
    }
   });

What can be wrong? Is there anything what I can do to fix this? It was working on the previous version...

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

Those are my dependencies:

  "dependencies": {
    "@mui/system": "^6.1.7",
    "@toolpad/core": "^0.9.0"
  },
  "peerDependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@mui/icons-material": "^6.1.7",
    "@mui/material": "^6.1.7",
    "@mui/x-data-grid": "^7.22.2",
    "@mui/x-data-grid-pro": "^7.22.2",
    "@mui/x-date-pickers-pro": "^7.22.2",
    "@mui/x-license-pro": "^6.10.2",
    }

[bharatkashyap]

This is most likely because you're using the toolbarActions slot, which changed in #4340 to allow you to compose the ThemeSwitcher with other components.

What you need to do is to simply import the ThemeSwitcher component and pass that into your custom logout component, and it should most likely work. Ref this demo in the docs: https://mui.com/toolpad/core/react-dashboard-layout/#slots

[Petar-Dimitrov-AXA]

@bharatkashyap This helped! Thanks a lot!

One more question and I will close this issue. Is there a way to disable the branding title? Now if I don't need a title in the header, I need to pass empty string. It will be great remove the the default title "Toolpad".

[bharatkashyap]

One more question and I will close this issue. Is there a way to disable the branding title? Now if I don't need a title in the header, I need to pass empty string. It will be great remove the the default title "Toolpad".

This is where it's set https://github.com/mui/toolpad/blob/master/packages/toolpad-core/src/shared/branding.ts#L6 - feel free to make a small PR removing this and replacing it with an empty string. I see no objections in removing this default since almost everyone will most likely want to override it. On the PR we can gather the others' opinions

[Petar-Dimitrov-AXA]

OK, thanks a lot! I will do it, probably tomorrow.
Hava a nice day!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Petar-Dimitrov-AXA How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.