MkDocs materialの設定をいじってみる

カラースキームの設定

カラースキームとは、ドキュメント全体の色設定みたいなものだとおもってもらえれば良いかと思います。

この設定は、ライトモードとダークモードの２種類の設定ができ、それぞれはmkdocs.ymlで以下のように記述します。

まずはライトモードです。

site_name: MkDocs_Test
theme:
    name: material
    language: ja
    palette:
        scheme: default

そしてダークモード

site_name: MkDocs_Test
theme:
    name: material
    language: ja
    palette:
        scheme: slate

カラーを設定する

カラーの変更は以下のように指定します。

site_name: MkDocs_Test
theme:
    name: material
    language: ja
    palette:
        primary: green
        accent: orange

上のページではaccentを使う部分がないのですが、ボタンやテキストリンクにカーソルをあてた時の色がここで指定した色になります。

指定できる色は以下の通りです。

  • red
  • pink
  • purple
  • deep purple
  • indigo (primary, accent, 共に指定がなかった時のdefaultの色)
  • blue
  • light blue
  • cyan
  • teal
  • green
  • light green
  • lime
  • yellow
  • amber
  • orange
  • deep orange
  • brown
  • grey
  • blue grey
  • black
  • white

フォントを設定する

フォントの変更は以下のように指定します。

site_name: MkDocs_Test
theme:
    name: material
    font:
        text: Fasthand
    language: ja

使えるフォントは以下のサイトで確認できます。

https://fonts.google.com/

おわりに

  • MkDocs materialでカラーやフォントなどの変え方を、実際に触ってみて確認しました。
  • 様々な変更が簡単に出来るのでとても便利そうに感じました。