Uso de temas

Tema personalizado

Para usar um tema personalizado, basta definir seu theme e passá-lo em options. A palette determina as cores do nó raiz até os nós principais, influenciando todo o ramo no Mind Elixir Core. Essa lista de cores é usada de forma cíclica. cssVar reúne as outras opções principais de cor e permite sobrescrever as variáveis CSS originais.

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)

informação

Para a configuração completa, consulte a seção da API de temas.

Você pode experimentar o tema do Mind Elixir Core no Codepen. O exemplo abaixo define a paleta de cores do tema em azul:

Tema padrão

O esquema de cores do tema padrão é inspirado no tema Catppuccin.

Se você precisa voltar ao tema padrão ou alternar entre os temas claro e escuro, use as propriedades estáticas de MindElixir para acessar os temas padrão.

import MindElixir from 'mind-elixir'

MindElixir.THEME = THEME
MindElixir.DARK_THEME = DARK_THEME

O Mind Elixir Core decide entre o tema claro e o escuro com base nas preferências de cor do sistema durante a instanciação.

informação

O Mind Elixir Core não troca de tema automaticamente quando as preferências de cor do sistema mudam. Você precisa implementar isso manualmente com changeTheme.