Open9
Docus(Nuxt Contentも?)のカラーモードはどこで切り替えているんだろう🤔
ピン留めされたアイテム
GANGANこちらで記事化しました。
GANGANnuxt-contentのDocusでデフォルトをダークモードにするのどうやるんだろう
というXのポストを観測し「たしかにどうやって変えるんだろう」って気になった。
現在の利用範囲ではライトモードで困っていないが「顧客要望でダークモードは不要にしたい」となった時のために調べようと思った。
GANGAN
Docusのライト・ダークモードはヘッダー上のPCマークから状態変更可能である。
- default(=light) -> light -> dark -> defaultの順で切り替わる
- dark時のみ背景色が暗くなる
ライト・ダークモードの切り替えに関するドキュメントの記載はなさそうだ。
GANGANヘッダーの実装を掘ってみる。このアイコンのボタンを確認。
GANGANuseColorMode composable を観測したがこのcomposableについての情報はどこにもなさそうだった。
ここ以外で利用されていない。
GANGANTry 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!
nuxt-modules/color-modeを調べてみるとuseColorMode composableを発見。
GANGANnuxt.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'
}
})
整理
上記の調査結果から以下でいけるのではないかと考えられる。
nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt-themes/docus'],
colorMode: {
preference: 'dark'
}
})
疑問点
extends時に{ install: true }オプションは不要なのかどうか。多分不要っぽそう
TODO
ローカルで裏どりが必要