Mientras uso mui react, quiero colorear algunos componentes personalizados de ui no materiales hechos con div usando colores de la paleta principal de mi tema.
Actualmente puedo usar theme.palette.primary.main o los colores .light directamente, incluido theme.palette.text.primary para los colores de los textos.
Pero si cambio el tema al modo oscuro, también tendré que cambiar la referencia de color, revisando theme.mode con condicionales como los siguientes:
<div style={{ backgroundColor: theme.palette.mode == "light" ? theme.palette.primary.dark : theme.palette.primary.light }} > Test </div> Entonces, ¿hay alguna manera de que podamos hacer que esto funcione como en los componentes de la interfaz de usuario del material? ¿Pasar theme.palette.primary funcionará con los cambios de modo de tema?
Tal vez algo más simple como:
<div style={{ backgroundColor: theme.palette.primary }}></div>Puede usar Contexto para guardar la configuración de su tema globalmente y también necesita separar los temas como light y dark .
// SettingsContext.js import React, { createContext, useState } from 'react'; const defaultSettings = { // you could add sort of global settings here theme: 'light' }; const SettingsContext = createContext({ settings: defaultSettings, saveSettings: () => {} }); export const SettingsProvider = ({ settings, children }) => { const [currentSettings, setCurrentSettings] = useState(settings || defaultSettings); return ( <SettingsContext.Provider value={{ settings: currentSettings, }} > {children} </SettingsContext.Provider> ); }; export const SettingsConsumer = SettingsContext.Consumer; export default SettingsContext;Puede crear el contexto de configuración como un enlace, pero puede omitirlo.
// useSettings.js import { useContext } from 'react'; import SettingsContext from './SettingsContext'; const useSettings = () => useContext(SettingsContext); export default useSettings;Y luego intente crear su tema personalizado que incluya el modo oscuro y claro.
// theme.js import { createTheme as createMuiTheme } from '@mui/material/styles'; const themes = { 'light': { ... }, 'dark': { ... } ]; export const createTheme = (name) => { return createMuiTheme(themes[name]); } Después de eso, debe pasar el tema que ha seleccionado en App.js o index.js , sea cual sea el archivo de nivel superior.
// App.js ... import { ThemeProvider } from '@mui/material/styles'; import useSettings from './useSettings'; import { createTheme } from './theme.js'; const App = () => { const { settings } = useSettings(); const theme = createTheme(settings.theme); return ( <ThemeProvider theme={theme}> ... </ThemeProvider> ); }; export default App; ...Eso es todo.
Ahora puede usar el tema seleccionado sin procesamiento condicional en sus componentes.
<div style={{ backgroundColor: theme.palette.primary }}></div>Pero esto no impedirá el tema seleccionado después de una actualización completa.
Entonces, si desea mantener el tema seleccionado incluso después de actualizar su navegador, puede guardar la configuración del tema en localStorage .