Docus ( Nuxt Content ) でダークモードの設定に悩んだ時に眺めてみる記事 🌙

はじめに

こんにちは、がんがんです。
私は普段の開発では Nuxt を利用し、ドキュメント・markdown ベースの開発では Nuxt Content を利用しています。

Nuxt Content はテーマも何種類か提供されており、テーマの中で最も利用されているDocusを使うことが多いです。
Docus を利用する中で「ライトモード、ダークモードの設定ってどうすればいいんだ？」となり今回調べてみました。

元々のスクラップ

本記事は下記スクラップの内容を体系的に整理した記事です。

https://zenn.dev/gangannikki/scraps/4fd7641f317ac2

結果だけ欲しい方向け

colorMode.preferenceを設定することで解決します。

nuxt.config.ts

// 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 番詳しくまとめられている記事だと思います(※ 私の観測範囲において)

https://github.com/nuxt-themes

https://www.memory-lovers.blog/entry/2023/07/16/104506

Nuxt Templates なるものもありまして...

Nuxt には Nuxt Templatesというテンプレート集が用意されています。

https://nuxt.com/templates

このテンプレート集を利用することにより、要件に沿ったプロダクトを最速でリリースすることが出来ます。テンプレートは日々追加されており暇な時に眺めると楽しいです。

本テンプレートで用意されているものはNuxt UI、Nuxt UI Proを利用したものが多いです。

本題: Docus でダークモード(デフォルト)を設定する

課題の整理

Docusのデフォルトコンポーネントとして Headerコンポーネントが用意されています。公式ドキュメントの上部でも利用されており、ユーザー側でライトモード・ダークモードの切り替えが可能です。

挙動としては以下のようになっています。

1. モニターマークを 1 回クリックする
2. ライトモード(☀️ マーク)に移行する。この状態で ☀️ マークを 1 回クリックする
3. ダークモード(🌙 マーク)に移行する。この時、画面の状態もダークモード背景に変わる
4. 🌙 マークを 1 回クリックする。モニターマークに移行し、画面の状態もライトモード背景に変わる

デフォルト状態をダークモードにしたい場合はどうすればいいのか？

ライトモード・ダークモードが切り替えれることが分かりました。では、 デフォルト状態をダークモードにしたい場合はどうすればいいのでしょうか？🤔

ドキュメントを確認してみましたが特に記載がなく、また Docus Starter から痕跡を辿りましたがライト/ダークモードについての設定は特に行われていませんでした。

https://github.com/nuxt-themes/docus/tree/e64082645105d060c285ae48de42919d1a5a4077/.starters/default/nuxt.config.ts

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 のドキュメントを見てみます。

https://color-mode.nuxtjs.org/

どうやらビンゴのようです。ドキュメントを見てみるとpreferenceというオプションがありました。

https://color-mode.nuxtjs.org/#configuration

ローカルで以下のような設定を行うと無事にダークモードで表示されました 🌙

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@nuxt-themes/docus'],
  colorMode: {
    preference: 'dark'
  }
})

Q. modules の追加は必要ないのか？🤔

通常モジュールを利用する場合はmodulesに追加する必要があります。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@nuxt-themes/docus'],
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'dark'
  }
})

しかし、今回は必要ありません。それは @nuxt-themes/docus を継承しているからです。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@nuxt-themes/docus'],
- modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'dark'
  }
})

extends の詳細は本記事では割愛します。詳しく気になる方は Nuxt Layersのドキュメントを合わせてご確認ください。

https://nuxt.com/docs/guide/going-further/layers

参考になるリポジトリは？

colorMode.preference: 'dark'の参考リポジトリを探してみたところ、Nuxtersのリポジトリで設定を発見しました。

https://github.com/nuxt/nuxters/blob/fa4210b9d4c6b580aafd9b9fb7f1113d6520bb80/nuxt.config.ts#L48-L50

おわりに

今回は Docus におけるダークモード(デフォルト)についての調査を行いました。
調べるきっかけは X のポストですが調査したいと思っていたのでありがたいタイミングでした。

今回のように「気づいたらよしなにやってくれていた。でも何やってるか知らない」みたいなことは多いので今後も気になったことは調査して執筆していけたらと思います。