Change Theme Primary Color at Runtime

[tworkool]

Hello,
I would like to change the primary color of my current theme during runtime, but just setting the theme.primaryColor to the color I want does not work...
I have the following workflow:

1. define new color in theme "dynamicPrimary"
2. update theme.primaryColor to "dynamicPrimary"

// main.jsx

const theme = createTheme({
  "colors": {
    "dynamicPrimary": [
      "#000",
     ...
      "#000",
    ],
  },
  "primaryColor": "blue",
});

// state_manager.jsx

  const { current: currentSettings } = useSettingsStore();
  const theme = useMantineTheme();

  useLayoutEffect(() => {
    theme.colors["dynamicPrimary"] = [
      currentSettings.primaryDashboardColor, // use the same color for all shades for simplicity
      ...
      currentSettings.primaryDashboardColor,
    ];
    theme.primaryColor = "dynamicPrimary";
  }, [currentSettings, theme]);

However, when I do this using the useMantineTheme it is not updating the color. Only when I toggle the colorScheme...

Has anybody tried to do the same and has a good approach?

[rtivital]

To update values dynamically you need to use state in react, properties assignment won't work.

[tworkool]

Got it working using Zustand in React. In case anybody needs it, I will post the code for a custom theme provider below. It is quite a lot of boilerplate code though, so maybe in the future, it would really be nice to have a hook provided in mantine by default. Nontheless, thanks for this great design system, it is awesome!

// create mantine theme overrride
const theme = createTheme({ ... });

// create app state management hook for theme with 'Zustand'
interface IUseThemeStore {
  theme: MantineThemeOverride;
  updateTheme: (updatedProperties: MantineThemeOverride) => void;
}
const useThemeStore = create<IUseThemeStore>((set) => ({
  theme: theme,
  updateTheme: (updatedProperties: MantineThemeOverride) => {
    set(previousState => ({ 
      theme: mergeThemeOverrides(previousState.theme, updatedProperties) 
    }));
  },
}));

// create react component with lifecycle for theme management using the custom hook
const ThemeProvider = (props: {children: ReactNode}) => {
  const { theme } = useThemeStore();

  return (
    <MantineProvider theme={theme} >
      {props.children}
    </MantineProvider>
  );
};

Then you can use it in any component like this:

const StateManager = () => {
  const { current: currentSettings } = useSettingsStore();
  const { updateTheme } = useThemeStore();

  // react to color theme update from settings and update theme using the hook with partial properties from the theme
  useLayoutEffect(() => {
    updateTheme({
      colors: {
        "dynamicPrimary": [
          currentSettings.primaryDashboardColor, // use the same color for all shades for simplicity
          ....
          currentSettings.primaryDashboardColor,
        ]
      },
      primaryColor: "dynamicPrimary",
    });
  }, [currentSettings, updateTheme]);

  return null;
};