#Problema con la configuracion del Theme

1 messages · Page 1 of 1 (latest)

grand basin
#

tengo esta configuracion el mi tailwind.config:// tailwind.config.js:
const {nextui} = require("@nextui-org/react");
/** @type {import('tailwindcss').Config} /
module.exports = {
content: ["./node_modules/@nextui-org/theme/dist/**/.{js,ts,jsx,tsx}"],
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'1': '0.5px',
'2': '2px',
'4': '4px',
'6': '6px',
'8': '8px',
},
screens: {
'sm':'640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl':'1536px'
},
colors: {
},
fontFamily: {
poppins:[ 'var(--font-poppins)']
},
extend: {}

},
darkMode: "class",
plugins: [nextui({
themes: {
light: {
colors:{
primary: "#151525",
accent: "#121a2d",
secondary: "#9747ff",
bgPaginator: "#ffffff",
default: "#1f1f36",
grayLight: "#A89C9C",
selectedItem: "#eeeeee",
warning: "#BA3838",
success: "#65FEA2",
white: "#FFFFFF" }},
dark: {
colors: {
primary: "#151525",
accent: "#121a2d",
secondary: "#9747ff",
bgPaginator: "#060d18",
default: "#1f1f36",
grayLight: "#A89C9C",
selectedItem: "#1e2b4f",
warning: "#BA3838",
success: "#65FEA2",
white: "#FFFFFF"} } } })],};

pero cuando aplico en mi provider:<NextUIProvider >
<NextThemesProviders
attribute={'class'}
defaultTheme={'dark'}
>
<main className="dark">
<ToastContainer
autoClose={3000}
transition={Bounce}
theme={'dark'}/>
{children}
</main>
</NextThemesProviders>
</NextUIProvider>
cuando cree mi componente con un swich para cambiar el theme, no pasa los algunos cambian de blanco a negro el resto no se modifica, que hago mal?

compact flareBOT
#

Hi @grand basin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Lo siento, pero no tengo suficiente información en los extractos proporcionados para responder a tu pregunta de manera precisa. Sin embargo, parece que estás teniendo problemas con la configuración de tu tema en Next.js utilizando Tailwind CSS y el paquete @nextui-org/react.

Te recomendaría revisar la documentación oficial de Next.js, Tailwind CSS y @nextui-org/react para asegurarte de que estás siguiendo las mejores prácticas y las instrucciones correctas para configurar tu tema.

Aquí están los enlaces a las documentaciones relevantes:

Espero que esto te ayude a resolver tu problema. Si tienes más detalles o código que puedas compartir, podría ser más fácil identificar el problema.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@grand basin kapa.ai is still learning and improving, please let us know how it did by reacting below

grand basin
#

puedo darte mas codigo para que me ayudes

#

este es mi tailwindconfig:
// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} /
module.exports = {
content: ["./node_modules/@nextui-org/theme/dist/**/.{js,ts,jsx,tsx}"],
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'1': '0.5px',
'2': '2px',
'4': '4px',
'6': '6px',
'8': '8px',
},
screens: {
'sm':'640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl':'1536px'
},
colors: {

},
fontFamily: {
  poppins:[ 'var(--font-poppins)']
},
extend: {}

},
darkMode: "class",
plugins: [nextui({
themes: {
light: {
colors:{
primary: "#151525",
accent: "#121a2d",
secondary: "#9747ff",
bgPaginator: "#ffffff",
default: "#1f1f36",
grayLight: "#A89C9C",
selectedItem: "#eeeeee",
warning: "#BA3838",
success: "#65FEA2",
white: "#FFFFFF"
}

  },
  dark: {
    colors: {
      primary: "#151525",
      accent: "#121a2d",
      secondary: "#9747ff",
      bgPaginator: "#060d18",
      default: "#1f1f36",
      grayLight: "#A89C9C",
      selectedItem: "#1e2b4f",
      warning: "#BA3838",
      success: "#65FEA2",
      white: "#FFFFFF"
    }
  }
}

})],
};

#

este mi providers:
// app/providers.tsx
'use client';

import { NextUIProvider } from '@nextui-org/react';
import React from 'react';
import { Bounce, ToastContainer } from 'react-toastify';
import { ThemeProvider as NextThemesProviders } from 'next-themes'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<NextUIProvider >
<NextThemesProviders
attribute={'class'}
defaultTheme={'dark'}
>
<main className="dark">
<ToastContainer
autoClose={3000}
transition={Bounce}
theme={'dark'}/>
{children}
</main>
</NextThemesProviders>
</NextUIProvider>
);
}