javascript - Material ui use palette primary color based on selected theme mode - Stack Overflow

admin管理员组

文章数量:1435497

While using mui react, I want to color some non material ui custom ponents made with div using colors from my theme's primary palette.

I currently can use theme.palette.primary.main or the .light colors directly, including the theme.palette.text.primary for texts colors.

But if I change the theme to dark mode, I will have to change the color reference as well, by checking on theme.mode with conditionals like the following:

  <div
    style={{
      backgroundColor:
        theme.palette.mode == "light"
          ? theme.palette.primary.dark
          : theme.palette.primary.light
    }}
  >
    Test
  </div>

So is there a way we can make this work just like in the material ui ponents? Passing theme.palette.primary will work with theme mode changes?

Maybe something simpler like:

<div style={{ backgroundColor: theme.palette.primary }}></div>

While using mui react, I want to color some non material ui custom ponents made with div using colors from my theme's primary palette.

I currently can use theme.palette.primary.main or the .light colors directly, including the theme.palette.text.primary for texts colors.

But if I change the theme to dark mode, I will have to change the color reference as well, by checking on theme.mode with conditionals like the following:

  <div
    style={{
      backgroundColor:
        theme.palette.mode == "light"
          ? theme.palette.primary.dark
          : theme.palette.primary.light
    }}
  >
    Test
  </div>

So is there a way we can make this work just like in the material ui ponents? Passing theme.palette.primary will work with theme mode changes?

Maybe something simpler like:

<div style={{ backgroundColor: theme.palette.primary }}></div>

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jun 2, 2023 at 14:47 NearHuscarl 82.2k2424 gold badges320320 silver badges283283 bronze badges asked Nov 30, 2021 at 16:00 AbrahamAbraham 15.9k1111 gold badges8585 silver badges121121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You could use Context to save your theme setting globally and also you need to separate the themes like light and 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;

You can build the settings context as a hook but you can skip this.

// useSettings.js
import { useContext } from 'react'; 
import SettingsContext from './SettingsContext';

const useSettings = () => useContext(SettingsContext);

export default useSettings;

And then try to create your custom theme which includes the dark and light mode.

// theme.js
import { createTheme as createMuiTheme } from '@mui/material/styles';

const themes = {
  'light': {
    ...
  },
  'dark': {
    ...
  }
];

export const createTheme = (name) => {
  return createMuiTheme(themes[name]);
}

After that, you need to pass the theme which you have selected in App.js or index.js whatever top level file.

// 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;
...

That's all.

Now you can use the selected theme without conditional render in your ponents.

<div style={{ backgroundColor: theme.palette.primary }}></div>

But this will not prevent the selected theme after hard refresh.

So if you want to keep the theme as selected even after refresh your browser, then you could save the theme setting in the localStorage.

本文标签： javascriptMaterial ui use palette primary color based on selected theme modeStack Overflow