Closed9

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

GANGANGANGAN

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

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

GANGANGANGAN

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

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

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

GANGANGANGAN

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!
GANGANGANGAN
GANGANGANGAN

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

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

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

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'
  }
})
GANGANGANGAN

整理

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

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

疑問点

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

TODO

ローカルで裏どりが必要

このスクラップは16日前にクローズされました