how to change the color depending on Theme

[elverdavid-dev]

How do I change the color depending on the topic the light or dark in Nextjs

[imskyleen]

Hello @elverdavid-dev, what do you use to manage the theme? maybe next-themes?

[elverdavid-dev]

yes

[imskyleen]

You can do something like this:

'use client';
 
import { ProgressProvider } from '@bprogress/next/app';
 
const Providers = ({ children }: { children: React.ReactNode }) => {
  const { resolvedTheme } = useTheme();

  return (
    <ProgressProvider 
      height="4px"
      color={resolvedTheme === "light" ? "#fff" : "#000"}
      options={{ showSpinner: false }}
      shallowRouting
    >
      {children}
    </ProgressProvider>
  );
};
 
export default Providers;

Or simpler (and recommended), you can simply set the color CSS variable for the dark theme with something like this:

html.dark {
  --bprogress-color: #29d;
}

(Make sure to use version 3.0.10 or higher of @bprogress/next to use CSS variables)

[kachkaev]

Found an even simpler solution in a shadcn-based project that uses next-themes. It should work in any project where CSS vars depend on theme.

    <ProgressProvider 
-       color="#000"
+       color="var(--foreground)"

That's it!