MKDocsのMaterialで配色を切り替えられるようにしてみる

はじめに

これは「Material for MkDocs」で配色を切り替えられるよう、手元で試したことをまとめ自分への備忘録として記事にしたものです。

カラースキームを切り替えられるようにする

早速ですが、mkdocs.ymlでテーマを以下のように書きました。

theme:
    name: material
    palette:
        - scheme: default
          toggle:
              icon: material/toggle-switch-off-outline
              name: ダークモードに切り替えます。
        - scheme: slate
          toggle:
              icon: material/toggle-switch
              name: ライトモードに切り替えます。

さて、これでドキュメントを開くとどうなるか見てみましょう

右上を見てください。虫眼鏡のアイコンの隣にトグルボタンが付いてるかと思います。

このトグルボタンをクリックすると

画像のようにカラースキームが切り替わります。

カラースキームだけでなく配色も変えるようにする

上の例ではボタンによりカラースキームだけが切り替わりましたが、基本色なども変えることができます。

実際にやってみましょう。mkdocs.ymlでテーマを以下のようにしてみます。

theme:
    name: material
    palette:
        - scheme: default
          primary: green
          toggle:
              icon: material/toggle-switch-off-outline
              name: ダークモードに切り替えます。
        - scheme: slate
          primary: red
          toggle:
              icon: material/toggle-switch
              name: ライトモードに切り替えます。

この記述でドキュメントを開いた場合、以下のようになります。