Dynamically update theme primary color #782

gorgekara · 2022-09-22T20:38:21Z

gorgekara
Sep 22, 2022

The idea is simple - once you create a theme (createTheme) you should be able to modify dynamically parts of it (for example - primary color) so its applied instantly to buttons, modals etc.

Not sure if this is part of nextui yet but if it isn't i believe it would be a good feature to have.

Example:

// _app.tsx

const theme = createTheme({
  theme: {
    colors: {
      primary: '#0088FF',
    }
  }
});

...

return (
   <NextUIProvider theme={theme}>
      <Component {...pageProps} />
   </NextUIProvider>
);

// ComponentA.tsx

import { changeTheme } from '@nextui-org/react';
const ComponentA = ({ dynamicColor }) => {
  React.useEffect(() => {
     changeTheme({
       colors: {
         primary: dynamicColor,
       }
     });
  }, []);

  return (
    <>
      ...next ui buttons, modals etc...
    </>
  );
};

Component.getInitialProps = async () => {
   const dynamicColor = await fetchDynamicColor();
   return { dynamicColor };
};

shawnmclean · 2025-05-19T12:18:50Z

shawnmclean
May 19, 2025

Do we have any way of doing this now? I want to pull theme from database.

0 replies

fillobotto · 2025-06-04T17:39:52Z

fillobotto
Jun 4, 2025

This is should get way more attention

0 replies

muneeb-r · 2025-06-21T19:50:14Z

muneeb-r
Jun 21, 2025

@shawnmclean how about you define themes statically in the code and referrence them into you DB and change dynamically?

0 replies

ChromeGG · 2025-07-03T08:07:52Z

ChromeGG
Jul 3, 2025

Bump, I also need this feature. For now, I'll try with workaround described by @muneeb-r , but if everything goes well and I'll get more customers, this solution will be unscalable

2 replies

muneeb-r Jul 7, 2025

@ChromeGG May be you can just utilize db and store theme in localstorage afterwards

ChromeGG Jul 7, 2025

I have multi-tenant app, every tenant has custom domain. Storing themes in localstorage is not an option.

lassschr · 2025-10-09T09:03:16Z

lassschr
Oct 9, 2025

Any news regarding this feature? ➕

5 replies

ChromeGG Oct 9, 2025

@lassschr I made workaround like that:

// layout.tsx
import Color from 'color';
import { getPalette } from 'tailwindcss-palette-generator/getPalette';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) { 
  // API request
  const brandingColor = query.body.branding.ui.light.colors.primary;
  const palette = query.body.branding.ui.light.colors;

  const rawPalette = getPalette([{ name: 'primary', color: primarySeedColor }]);

  const primaryPalette = rawPalette['primary'] as Record<string, string>;
  const cssVariables: string[] = [];

  for (const shade in primaryPalette) {
    if (shade === 'DEFAULT') {
      continue;
    }
    const colorValue = primaryPalette[shade];
    const [h, s, l] = Color(colorValue).hsl().round().array();
    cssVariables.push(`--heroui-primary-${shade}: ${h} ${s}% ${l}%;`);
  }

  const defaultColor = Color(primaryPalette['DEFAULT']);
  const [h, s, l] = defaultColor.hsl().round().array();

  cssVariables.push(`--heroui-primary: ${h} ${s}% ${l}%;`);
  cssVariables.push(`--heroui-content1: ${palette['content1']};`);
  cssVariables.push(`--heroui-content2: ${palette['content2']};`);
  // ...
  cssVariables.push(`--heroui-divider: ${palette['divider']};`);

  cssVariables.push(`--heroui-focus: ${palette['focus']};`);

  return (
    <head>
          {/* ! inject css variables */}
          <style>{`:root { ${cssVariables.join('\n')} }`}</style>
          <link
            rel="apple-touch-icon"
            href="https://dev-assets.theplatform.pl/devstyle/favicon-192x192.png"
          />
        </head>
)

With a little help of LLM, it's possible to achieve 😄

lassschr Oct 9, 2025

Hi, thank you for your comment! I have been having something similar as a backup plan 😁 Was hoping to avoid manually overwriting styles if possible - but thank you for sharing 🥇

umutnacak Oct 9, 2025

@ChromeGG Hi, have you tried changing variables other than colors? I tried it for demo purposes (--spacing), but I wonder if it will cause problems in the future. LLM tells me to avoid it if possible, but when I give my reason, it shows this solution.

ChromeGG Oct 10, 2025

@umutnacak Hmm, I haven't tried with other properties than colors. But I believe it should behave in the same way, they are just CSS variables under the hood as colors are

umutnacak Oct 10, 2025

@ChromeGG Thanks for the reply. Yes, but one needs to be careful. Since I'm not a designer, the UI breaks down very quickly and I don't know what I'm doing. Thanks again and good luck with your app.

Uh oh!

Dynamically update theme primary color #782

Uh oh!

Uh oh!

Replies: 5 comments · 7 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 7 replies