Quartoサイトにダークモードと切り替えボタンを追加する
このサイトにダークモードを追加しました。ナビゲーションにある明暗切り替えアイコンから、ライトモードとダークモードを切り替えられます。 この記事では、既存の明るい配色を残しながら導入する手順をまとめます。
Quarto標準の切り替えを使う
Quartoでは、HTMLのテーマに light と dark を指定すると、切り替えコントロールが自動で生成されます。ウェブサイトではナビゲーションに配置されるため、独自のボタンやJavaScriptを追加する必要はありません。 詳しくは公式ドキュメントのDark Modeを参照してください。
このサイトの _quarto.yml は次のように変更しました。
format:
html:
theme:
light: [default, custom.scss]
dark: [darkly, custom-dark.scss]
respect-user-color-scheme: truelight には従来の default と custom.scss を指定し、クリーム色の背景を維持しています。dark には組み込みの darkly と、暗い配色専用のSCSSを指定しました。
respect-user-color-scheme: true により、初回表示ではOSやブラウザーの配色設定を尊重します。利用者が切り替えた設定の保存と復元もQuartoに任せます。保存領域を利用できない環境では、設定が保持されない場合があります。 このオプションはQuarto 1.7以降の機能で、JavaScriptが無効な場合は先に指定したライトテーマで表示されます。
配色ファイルを分ける
従来の custom.scss には明るい背景色が書かれているため、そのままダークテーマにも読み込むと、暗いテーマの背景を上書きしてしまいます。 今回はファイルを分け、custom-dark.scss を次のようにしました。
/*-- scss:defaults --*/
$body-bg: #1c1b1a;
$body-color: #e6e4dc;
$navbar-bg: #282726;
$footer-bg: #282726;
$link-color: #8dc8f8;
$code-color: #e9b4d0;
/*-- scss:rules --*/
.language-switch {
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
body.quarto-dark {
color-scheme: dark;
}scss:defaults でSass変数を設定すると、Bootstrapの部品にも配色が反映されます。本文だけでなく、ナビゲーション、フッター、リンク、インラインコードも調整できます。 scss:rules は通常のCSSを書く場所です。言語切り替えリンクの余白はライト側とそろえ、color-scheme でブラウザー標準のフォーム部品などにも暗い配色を伝えています。
Quartoは表示中のモードに応じて body に .quarto-light または .quarto-dark を付けます。個別要素の調整にはこのクラスを使えます。
日本語・英語に同じ設定を適用する
このサイトでは、共通設定を _quarto.yml、言語別設定を _quarto-ja.yml と _quarto-en.yml に分けています。テーマ設定を共通ファイルに書くことで、両言語で同じ切り替えを使えます。
ただし、英語版はレンダリング対象の記事を明示的に列挙しているため、新しい記事のパスを _quarto-en.yml の project.render に追加する必要があります。記事本文は既存の構成に合わせ、プロファイルごとに表示を分けました。
レンダリングして確認する
quarto render
quarto render --profile enこのサイトでは日本語版が _site、英語版が _site/en に出力されます。日本語版の全体レンダリングで出力先が作り直されるため、英語版は後に実行します。
確認したい点は次のとおりです。
- ナビゲーションのアイコンで明暗を切り替えられるか。
- 再読み込みや別ページへの移動後も選択が保持されるか。
- 保存済み設定のないブラウザーでOSの配色設定が反映されるか。
- 記事一覧、コード、表、リンクが両方のモードで読めるか。
- 狭い画面でも切り替えコントロールを操作できるか。
画像や外部の埋め込みコンテンツは、サイトのテーマだけでは配色が変わらない場合があります。白背景の図が気になる場合は、図自体の背景色や、モードごとの画像の用意を別途検討します。