はじめに
こんにちは、がんがんです。
私は普段の開発では Nuxt を利用し、ドキュメント・markdown ベースの開発では Nuxt Content を利用しています。
Nuxt Content はテーマも何種類か提供されており、テーマの中で最も利用されているDocusを使うことが多いです。
Docus を利用する中で「ライトモード、ダークモードの設定ってどうすればいいんだ？」となり今回調べてみました。
元々のスクラップ
本記事は下記スクラップの内容を体系的に整理した記事です。
結果だけ欲しい方向け
colorMode.preferenceを設定することで解決します。
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt-themes/docus'],
colorMode: {
preference: 'dark'
}
})
余談： Nuxt Content のテーマについて
本題から逸れますが Nuxt Themes の紹介を挟みます。
Nuxt Themes にどんなテーマがあるのか
Nuxt Themes にどんなテーマがあるのか、どんな構成になっているのかは公式 Organation、下記記事をご確認ください。
Docus、Alpine、Content Wind まで触れており、日本語で 1 番詳しくまとめられている記事だと思います(※ 私の観測範囲において)
Nuxt Templates なるものもありまして...
Nuxt には Nuxt Templatesというテンプレート集が用意されています。
このテンプレート集を利用することにより、要件に沿ったプロダクトを最速でリリースすることが出来ます。テンプレートは日々追加されており暇な時に眺めると楽しいです。
本テンプレートで用意されているものはNuxt UI、Nuxt UI Proを利用したものが多いです。
本題: Docus でダークモード(デフォルト)を設定する
課題の整理
Docusのデフォルトコンポーネントとして Headerコンポーネントが用意されています。公式ドキュメントの上部でも利用されており、ユーザー側でライトモード・ダークモードの切り替えが可能です。
挙動としては以下のようになっています。
- モニターマークを 1 回クリックする
- ライトモード(☀️ マーク)に移行する。この状態で ☀️ マークを 1 回クリックする
- ダークモード(🌙 マーク)に移行する。この時、画面の状態もダークモード背景に変わる
- 🌙 マークを 1 回クリックする。モニターマークに移行し、画面の状態もライトモード背景に変わる
デフォルト状態をダークモードにしたい場合はどうすればいいのか？
ライトモード・ダークモードが切り替えれることが分かりました。では、 デフォルト状態をダークモードにしたい場合はどうすればいいのでしょうか？🤔
ドキュメントを確認してみましたが特に記載がなく、また Docus Starter から痕跡を辿りましたがライト/ダークモードについての設定は特に行われていませんでした。
Docus の構成要素から当たりをつけていく
ドキュメントにも starter にも記載がなかったので Docus の構成要素から"当たり"をつけていきます。Docus は以下のような構成となっています。
They are using it 🎨
- nuxt/http
- nuxt/content
- nuxt/image
- nuxt-modules/tailwindcss
- nuxt-modules/strapi
- nuxt-modules/sanity
- nuxt-modules/i18n
- nuxt-modules/color-mode
- nuxt-modules/apollo
- nuxt-community/ackee-module
- hubble-exchange/docs
- sidebase
- haraka
- pinia-orm
- nuxt-typed-router
この一覧を見る限りだとNuxt Color Modeが怪しそうですね。
Nuxt Color Mode のドキュメントを見てみる
Nuxt Color Mode のドキュメントを見てみます。
どうやらビンゴのようです。ドキュメントを見てみるとpreferenceというオプションがありました。
ローカルで以下のような設定を行うと無事にダークモードで表示されました 🌙
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt-themes/docus'],
colorMode: {
preference: 'dark'
}
})
Q. modules の追加は必要ないのか？🤔
通常モジュールを利用する場合はmodulesに追加する必要があります。
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt-themes/docus'],
modules: ['@nuxtjs/color-mode'],
colorMode: {
preference: 'dark'
}
})
しかし、今回は必要ありません。それは @nuxt-themes/docus を継承しているからです。
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt-themes/docus'],
- modules: ['@nuxtjs/color-mode'],
colorMode: {
preference: 'dark'
}
})
extends の詳細は本記事では割愛します。詳しく気になる方は Nuxt Layersのドキュメントを合わせてご確認ください。
参考になるリポジトリは？
colorMode.preference: 'dark'の参考リポジトリを探してみたところ、Nuxtersのリポジトリで設定を発見しました。
おわりに
今回は Docus におけるダークモード(デフォルト)についての調査を行いました。
調べるきっかけは X のポストですが調査したいと思っていたのでありがたいタイミングでした。
今回のように「気づいたらよしなにやってくれていた。でも何やってるか知らない」みたいなことは多いので今後も気になったことは調査して執筆していけたらと思います。
Discussion