Docus(Nuxt Contentも?)のカラーモードはどこで切り替えているんだろう🤔

ピン留めされたアイテム

GANGAN

こちらで記事化しました。

GANGAN

nuxt-contentのDocusでデフォルトをダークモードにするのどうやるんだろう

というXのポストを観測し「たしかにどうやって変えるんだろう」って気になった。
現在の利用範囲ではライトモードで困っていないが「顧客要望でダークモードは不要にしたい」となった時のために調べようと思った。

GANGAN

Docusのライト・ダークモードはヘッダー上のPCマークから状態変更可能である。

default(=light) -> light -> dark -> defaultの順で切り替わる
dark時のみ背景色が暗くなる

ライト・ダークモードの切り替えに関するドキュメントの記載はなさそうだ。

GANGAN

ヘッダーの実装を掘ってみる。このアイコンのボタンを確認。

GANGAN

useColorMode composable を観測したがこのcomposableについての情報はどこにもなさそうだった。
ここ以外で利用されていない。

GANGAN

Try are using it の項目を見ると nuxt-modules/color-mode があった。なんとなくこれっぽそう。

- 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
- Do you use Docus? Get listed here!

GANGAN

nuxt-modules/color-modeを調べてみるとuseColorMode composableを発見。

GANGAN

nuxt.configでcolorMode.preferenceを指定できそう。

以下はドキュメントの引用。

export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '-mode',
    storageKey: 'nuxt-color-mode'
  }
})

GANGAN

整理

上記の調査結果から以下でいけるのではないかと考えられる。

nuxt.config.ts

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

疑問点

extends時に{ install: true }オプションは不要なのかどうか。多分不要っぽそう

TODO

ローカルで裏どりが必要