Anyone else get multiple themes stuck in the top level class? When switching themes? #2608

leongaban · 2024-03-29T16:31:09Z

leongaban
Mar 29, 2024

When I change themes, I expect <html lang="en" class="theme1" to only contain the theme I switch too.

However when I start changing the theme multiple times, I need up with at least 2 themes stuck in the top level class, ie:

<html lang="en" class="theme1 theme2" // <-- this is terrible, I only expect 1 theme here

Which forces me to add !important on the classes I want to enforce, but why is this happening?

My tailwind.config

// tailwind.config.js
const { nextui } = require('@nextui-org/react');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {},
  darkMode: 'class',
  plugins: [
    nextui({
      themes: {
        light: {
          layout: {}, // light theme layout tokens
          colors: {}, // light theme colors
        },
        acme: {
          colors: {
            background: '#740b78',
            foreground: '#f6f6f6',
            secondary: '#f2499d',
            primary: {
              DEFAULT: '#ec49f2',
            },
          },
          layout: {
            disabledOpacity: '0.3',
            radius: {
              small: '2px',
              medium: '4px',
              large: '8px',
            },
            borderWidth: {
              small: '1px',
              medium: '2px',
              large: '3px',
            },
          },
        },
        bounty: {
          colors: {
            background: '#0f485a', // --dark-blue
            foreground: '#f6f6f6', // --f6
            secondary: '#0492b7', // --bountyjobs-med-blue
            primary: {
              DEFAULT: '#9f1e54',
            },
          },
          layout: {
            disabledOpacity: '0.3',
            radius: {
              small: '2px',
              medium: '4px',
              large: '8px',
            },
            borderWidth: {
              small: '1px',
              medium: '2px',
              large: '3px',
            },
          },
        },
      },
    }),
  ],
};

ThemeSwitcher

'use client';

import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';

import { Button } from '@nextui-org/button';

export default function ThemeSwitcher() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="flex gap-4">
      <Button size="sm" variant="flat" onClick={() => setTheme('light')}>
        Light
      </Button>
      <Button size="sm" variant="flat" onClick={() => setTheme('acme')}>
        Acme
      </Button>
      <Button size="sm" variant="flat" onClick={() => setTheme('bounty')}>
        Modern
      </Button>
    </div>
  );
}

leongaban · 2024-03-29T16:38:40Z

leongaban
Mar 29, 2024
Author

I have to use vanilla JS to clear out the previous class, but should't NextThemes do this by default? Why are my classes stacking?

const handleThemeChange = (selectedTheme: string) => {
  // Remove all theme classes from the HTML element
  document.documentElement.classList.remove('light', 'acme', 'bounty');

  // Set the new theme
  setTheme(selectedTheme);

  // Add the class for the selected theme
  document.documentElement.classList.add(selectedTheme);
};

onClick={() => handleThemeChange('acme')}

0 replies

lssbq · 2024-05-22T04:38:47Z

lssbq
May 22, 2024

I found it could be resolved once I specify themes attribute in , hope it also resolves the issue in your application as well.

<NextThemesProvider attribute="class" defaultTheme="dark" themes={["dark", "light", "mytheme"]}>
        <Layout fontClass={`${inter.className}`}>
          <Component {...pageProps} />
        </Layout>
</NextThemesProvider>

Refer:
https://github.com/pacocoursey/next-themes/blob/main/next-themes/src/script.ts#L14

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Anyone else get multiple themes stuck in the top level class? When switching themes? #2608

{{title}}

Replies: 2 comments

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Anyone else get multiple themes stuck in the top level class? When switching themes? #2608

leongaban Mar 29, 2024

Replies: 2 comments

leongaban Mar 29, 2024 Author

lssbq May 22, 2024

leongaban
Mar 29, 2024

leongaban
Mar 29, 2024
Author

lssbq
May 22, 2024