es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo establecer un color primario en el tema de Chakra UI?

12 Jul, 2023 Programación

Quiero establecer el color primario y secundario en mi theme.js/theme.ts. ¿Existe alguna forma de hacerlo?

Estoy acostumbrado/a a trabajar con componentes de Material UI en mis proyectos de React.
Es posible establecer una paleta con ‘primary’ y ‘secondary’ allí.

Me refiero a algo como esto:

export const theme = createTheme({
  palette: {
    primary: {
      main: "#7bb9e8"
    },
    secondary: {
      main: "#eb7f7f"
    }
  }
})
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Si estás utilizando Chakra UI en tu proyecto de React, puedes establecer los colores primarios y secundarios en tu archivo theme.js/theme.ts de una manera similar. Aquí tienes un ejemplo:

    import { extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  colors: {
    primary: "#7bb9e8",
    secondary: "#eb7f7f",
  }
})

export default theme;

    Ten en cuenta que en Chakra UI, el objeto colors se utiliza para definir colores personalizados, no palette como en Material UI. Por lo tanto, puedes establecer tus colores primarios y secundarios directamente bajo colors.

    Una vez que hayas definido tu objeto de tema en un archivo separado, puedes importarlo y aplicarlo a tus componentes de Chakra UI de la siguiente manera:

    import { ChakraProvider } from "@chakra-ui/react"
import theme from "./ruta-al-archivo-de-tema/theme"

function App() {
  return (
    <chakraprovider theme="{theme}">
      {/* tus componentes de la aplicación */}
    </chakraprovider>
  )
}

    Al envolver tus componentes con el componente ChakraProvider y pasar tu objeto de tema personalizado como prop, te aseguras de que tus componentes utilicen tus colores primarios y secundarios personalizados.

Comments are closed.