テーマの使用

カスタムテーマ

カスタムテーマを使用するには、独自の theme を定義し、それを options に渡すだけです。palette はルートノードから主要ノードへの接続線であり、Mind Elixir はこの配列の色をループして使用します。cssVar は他の主要な色のオプションであり、元の CSS 変数をオーバーライドできます。

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', // または HTMLDivElement
  theme,
}

let mind = new MindElixir(options)

// 初期化後にテーマを変更
mind.changeTheme(theme)

備考

完全な構成はtheme API セクションを参照してください。

Codepen で Mind Elixir のテーマを調整する例を以下に示します。この例では、テーマの調色板を青色に設定しています：

デフォルトのテーマ

デフォルトのテーマのカラーリングは Catppuccin Theme から取得しています。

デフォルトのテーマを使用する必要がある場合や、ライトモードとダークモードのテーマを切り替える必要がある場合、MindElixir の静的プロパティを使用してデフォルトのテーマを取得できます。

import MindElixir from 'mind-elixir'

MindElixir.THEME = THEME
MindElixir.DARK_THEME = DARK_THEME

Mind Elixir はインスタンス化時に、システムの現在のカラープリファレンスに基づいてライトモードまたはダークモードのテーマを使用するかを決定します。

備考

Mind Elixir 自体はシステムのカラープリファレンスの変更を監視しておらず、言い換えれば、システムのカラースキームが変更されたときに Mind Elixir は自動的にテーマを切り替えません。関連する機能は、changeThemeを使用して自分で実装してください。