如何根据我的主题更改徽标？

Question

我想在“灯光主题”中使用徽标“徽标”，而在黑暗主题中进行logodark。我可以根据主题更改图像SRC吗？顺便说一句，我正在使用工具手柄核心（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>
    );
}

我尝试使用usetheme（），但是当记录时，我找到了theme.palette.mode，无论如何模式总是光线。因此，基于它更改徽标无效。

使用MUI的UseColorScheme是一个解决方案：

Answer 1

}

您也可以尝试以下方法：

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');  
 };