Theme Usage

Custom Theme

To use a custom theme, simply define your theme and pass it into the options. The palette determines the colors from the root node to the main nodes, influencing the entire branch in Mind Elixir. This array of colors will be cyclically used. cssVar includes other major color options, allowing you to override the original CSS variables.

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)

info

For a complete configuration, refer to the theme API section.

You can experiment with adjusting the Mind Elixir theme in Codepen. The example below sets the theme's color palette to blue:

Default Theme

The default theme color scheme is inspired by the Catppuccin Theme.

If you need to revert to the default theme or switch between light and dark themes, you can use the static properties of MindElixir to access the default themes.

import MindElixir from 'mind-elixir'

MindElixir.THEME = THEME
MindElixir.DARK_THEME = DARK_THEME

Mind Elixir will determine whether to use the light or dark theme based on the system's current color preferences during instantiation.

info

Mind Elixir does not automatically switch themes when the system color preferences change. You need to implement this functionality manually using changeTheme.