I want to use the logo 'logo' when in light theme and logoDark when in dark theme. Can I change image src based on theme? BTW I am using the dashboard Layout from toolpad core (MUI)

import { AppProvider } from "@toolpad/core";
import React from "react";
import { Outlet } from "react-router-dom";
import { ConnectWithoutContact, ViewList } from '@mui/icons-material';
import DashboardIcon from '@mui/icons-material/Dashboard';
import LayersIcon from '@mui/icons-material/Layers';
import SettingsIcon from '@mui/icons-material/Settings';
import logo from './assets/logo.png';
import logoDark from './assets/logo_white.png';
import { extendTheme } from "@mui/material";
import { useAuth } from "./components/Auth/AuthProvider";

const NAVIGATION = [ //my navigation
];

const colors = {
    // my colors
};

// Define the theme, adding custom colors to the palette
const dhandhoTheme = extendTheme({
    colorSchemes: { light: true, dark: true },
    colorSchemeSelector: 'class',
    customColors: colors,
    palette: {
        primary: {
            main: '#20A4F3', // #20A4F3
        },
        success: {
            main: '#2EEE80', // #2EEE80
        },
        // other colors
    },
});

// Define the branding object
const branding = {
    logo: <img src={logo} alt="Logo" />,
    title: '',
    homeUrl: '/',
};


export default function App() {
    const { session, authentication } = useAuth();
    return (
        <AppProvider
            navigation={NAVIGATION}
            branding={branding}
            theme={dhandhoTheme}
            session={session}
            authentication={authentication}
        >
            <Outlet />
        </AppProvider>
    );
}

I tried using useTheme() but when logged I found that theme.palette.mode is always light no matter what. And thus changing logo based on it didn't work.

I want to use the logo 'logo' when in light theme and logoDark when in dark theme. Can I change image src based on theme? BTW I am using the dashboard Layout from toolpad core (MUI)

import { AppProvider } from "@toolpad/core";
import React from "react";
import { Outlet } from "react-router-dom";
import { ConnectWithoutContact, ViewList } from '@mui/icons-material';
import DashboardIcon from '@mui/icons-material/Dashboard';
import LayersIcon from '@mui/icons-material/Layers';
import SettingsIcon from '@mui/icons-material/Settings';
import logo from './assets/logo.png';
import logoDark from './assets/logo_white.png';
import { extendTheme } from "@mui/material";
import { useAuth } from "./components/Auth/AuthProvider";

const NAVIGATION = [ //my navigation
];

const colors = {
    // my colors
};

// Define the theme, adding custom colors to the palette
const dhandhoTheme = extendTheme({
    colorSchemes: { light: true, dark: true },
    colorSchemeSelector: 'class',
    customColors: colors,
    palette: {
        primary: {
            main: '#20A4F3', // #20A4F3
        },
        success: {
            main: '#2EEE80', // #2EEE80
        },
        // other colors
    },
});

// Define the branding object
const branding = {
    logo: <img src={logo} alt="Logo" />,
    title: '',
    homeUrl: '/',
};


export default function App() {
    const { session, authentication } = useAuth();
    return (
        <AppProvider
            navigation={NAVIGATION}
            branding={branding}
            theme={dhandhoTheme}
            session={session}
            authentication={authentication}
        >
            <Outlet />
        </AppProvider>
    );
}

I tried using useTheme() but when logged I found that theme.palette.mode is always light no matter what. And thus changing logo based on it didn't work.

• reactjs
• material-ui
• themes

1 Answer 1

Here's a solution using useColorScheme from MUI:

import { useColorScheme } from '@mui/material/styles';  
import React, { useMemo } from 'react';  
import { AppProvider } from "@toolpad/core";  
import logo from './assets/logo.png';  
import logoDark from './assets/logo_white.png';  

export default function App() {  
const { mode } = useColorScheme();  

const branding = useMemo(() => ({  
    logo: <img   
        src={mode === 'dark' ? logoDark : logo}   
        alt="Logo"   
        style={{ height: '40px' }} 
    />,  
    title: '',  
    homeUrl: '/',  
}), [mode]);  

const { session, authentication } = useAuth();  

return (  
    <AppProvider  
        navigation={NAVIGATION}  
        branding={branding}  
        theme={dhandhoTheme}  
        session={session}  
        authentication={authentication}  
    >  
        <Outlet />  
    </AppProvider>  
);  

}

You can also try this:

const [mode, setMode] = useState<'light' | 'dark'>('light');  

const branding = {  
logo: <img   
    src={mode === 'dark' ? logoDark : logo}   
    alt="Logo"   
/>,  
// ...other properties  
};  

// Add a theme toggle function  
 const toggleTheme = () => {  
 setMode(prevMode => prevMode === 'light' ? 'dark' : 
'light');  
 };