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 cambiar el color del borde predeterminado en el tema oscuro de TailwindCSS?

10 Jun, 2023 Programación

Estoy usando TailwindCSS para mi proyecto y quiero establecer un color de borde predeterminado. Para el tema normal, lo hice a través de:

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Color de borde predeterminado para tema claro
        dark: {
          DEFAULT: theme("colors.gray.800"), // Color de borde predeterminado para tema oscuro NO FUNCIONA
        },
      }),
      // ...
    }
  }
}

Para el tema claro, funciona bien, sin embargo, para el tema oscuro, no puedo encontrar la manera de aplicar un valor predeterminado, ¿alguien tiene ideas de cómo hacerlo funcionar?

¡Muchas gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que podría haber un problema con el fragmento de código proporcionado. La propiedad extend está omitiendo un signo de llave de cierre }.

    Dicho esto, para establecer un color de borde predeterminado para el tema oscuro, podría intentar algo como:

    module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Color de borde predeterminado para el tema claro
        dark: {
          DEFAULT: theme("colors.gray.800"), // Color de borde predeterminado para el tema oscuro
        },
      }),
      backgroundColor: (theme) => ({
        ...theme("colors"),
        body: theme("colors.gray.900"), // Color de fondo para el tema oscuro
      }),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

    Asegúrese de que la configuración de su tema oscuro esté configurada correctamente en su archivo tailwind.config.js. La propiedad darkMode debería estar establecida en "class", y debería aplicar clases dark a cualquier elemento que necesite actualizar sus estilos para el tema oscuro.

    Si esto no funciona, intente buscar cualquier otra personalización o anulación en su CSS que pueda estar afectando el color de borde predeterminado para el tema oscuro. Comience desde cero y pruebe agregar solo los cambios necesarios en su archivo tailwind.config.js, luego pruebe para ver si funcionan como se espera antes de agregar cualquier otra cosa.

Comments are closed.