Saltar al contenido principal

Uso de temas

Tema personalizado​

Para usar un tema personalizado, basta con definir tu theme y pasarlo en options. La palette determina los colores desde el nodo raíz hasta los nodos principales e influye en toda la rama de Mind Elixir Core. Esta lista de colores se usa de forma cíclica. cssVar incluye el resto de opciones de color principales y permite sobrescribir las variables CSS originales.

const theme = {
  name: 'Latte',
  palette: [
    '#dd7878',
    '#ea76cb',
    '#8839ef',
    '#e64553',
    '#fe640b',
    '#df8e1d',
    '#40a02b',
    '#209fb5',
    '#1e66f5',
    '#7287fd',
  ],
  cssVar: {
    '--main-color': '#444446',
    '--main-bgcolor': '#ffffff',
    '--color': '#777777',
    '--bgcolor': '#f6f6f6',
    '--panel-color': '#444446',
    '--panel-bgcolor': '#ffffff',
    '--panel-border-color': '#eaeaea',
  },
}

let options = {
  el: '#map', // or HTMLDivElement
  theme,
}

let mind = new MindElixir(options)

// Change the theme after initialization
mind.changeTheme(theme)
información

Para ver la configuración completa, consulta la sección de la API de temas.

Puedes experimentar con el tema de Mind Elixir Core en Codepen. El siguiente ejemplo pone la paleta de colores del tema en azul:

Tema por defecto​

El esquema de colores del tema por defecto está inspirado en el tema Catppuccin.

Si necesitas volver al tema por defecto o cambiar entre los temas claro y oscuro, puedes acceder a los temas por defecto mediante las propiedades estáticas de MindElixir.

import MindElixir from 'mind-elixir'

MindElixir.THEME = THEME
MindElixir.DARK_THEME = DARK_THEME

Mind Elixir Core decide si usa el tema claro o el oscuro en función de las preferencias de color del sistema durante la instanciación.

información

Mind Elixir Core no cambia de tema automáticamente cuando cambian las preferencias de color del sistema. Debes implementar esta función manualmente con changeTheme.