feat(devtools): add default theme settings(#543, #575)

packages/devtools-kit/src/_types/options.ts

@@ -109,6 +109,11 @@ export interface ModuleOptions {
    * By default it will respect global Nuxt telemetry settings.
    */
   telemetry?: boolean
+
+  /**
+   * Default theme for the devtools.
+   */
+  theme?: 'light' | 'dark'
 }
 
 export interface ModuleGlobalOptions {

packages/devtools-ui-kit/src/components/NDarkToggle.vue

@@ -2,8 +2,9 @@
 import { computed, nextTick } from 'vue'
 
 import { useColorMode } from '@vueuse/core'
+import { COLOR_MODE_KEY } from '@nuxt/devtools/src/runtime/settings.js'
 
-const mode = useColorMode()
+const mode = useColorMode({ storageKey: COLOR_MODE_KEY })
 const isDark = computed<boolean>({
   get() {
     return mode.value === 'dark'

packages/devtools/client/app.vue

@@ -4,7 +4,8 @@ import '@vue/devtools-applet/style.css'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
-import { useEyeDropper } from '@vueuse/core'
+import { useColorMode, useEyeDropper } from '@vueuse/core'
+import { COLOR_MODE_KEY } from '../src/runtime/settings'
 import { setupClientRPC } from './setup/client-rpc'
 import { setupVueDevTools } from './setup/vue-devtools'
 import { splitScreenAvailable } from '~/composables/storage'
@@ -34,13 +35,20 @@ setupClientRPC()
 
 const client = useClient()
 const route = useRoute()
-const colorMode = useColorMode()
+const defaultColorMode = computed<any>(() => {
+  return client.value?.nuxt?.payload?.config?.public?.colorMode || useRuntimeConfig().public.colorMode
+})
+const colorMode = useColorMode({ initialValue: defaultColorMode.value, storageKey: COLOR_MODE_KEY })
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
 const waiting = computed(() => !client.value && !showConnectionWarning.value)
 
 watch(
   () => client.value?.app.colorMode.value,
   (mode) => {
+    if (defaultColorMode.value) {
+      colorMode.value = defaultColorMode.value
+      return
+    }
     if (mode)
       colorMode.value = mode
   },

packages/devtools/client/components/ComponentsGraph.vue

@@ -2,6 +2,8 @@
 import type { Component, NuxtLayout, NuxtPage } from 'nuxt/schema'
 import type { Data, Node, Options } from 'vis-network'
 import { Network } from 'vis-network'
+import { useColorMode } from '@vueuse/core'
+import { COLOR_MODE_KEY } from '../../src/runtime/settings'
 import type { ComponentRelationship } from '~/../src/types'
 
 const props = defineProps<{
@@ -11,7 +13,7 @@ const props = defineProps<{
 
 const container = ref<HTMLElement>()
 const navbar = ref<HTMLElement>()
-const colorMode = useColorMode()
+const colorMode = useColorMode({ storageKey: COLOR_MODE_KEY })
 
 const selected = ref<{
   id: string
@@ -59,7 +61,7 @@ const data = computed<Data>(() => {
     const page = pages.value?.find(i => i.file === rel.id)
     const layout = layouts.value?.find(i => i.file === rel.id)
 
-    const path = rel.id.replace(/\?.*$/, '').replace(/\#.*$/, '')
+    const path = rel.id.replace(/\?.*$/, '').replace(/#.*$/, '')
     const group = rel.id.includes('/node_modules/')
       ? 'lib'
       : component

packages/devtools/client/components/IframeView.vue

@@ -1,16 +1,18 @@
 <script lang="ts">
-const iframeCacheMap = new Map<string, HTMLIFrameElement>()
 </script>
 
 <script setup lang="ts">
-// eslint-disable-next-line import/first
+import { useColorMode } from '@vueuse/core'
+import { COLOR_MODE_KEY } from '../../src/runtime/settings'
 import type { ModuleCustomTab, ModuleIframeView } from '~/../src/types'
 
 const props = defineProps<{
   tab: ModuleCustomTab
 }>()
 
-const colorMode = useColorMode()
+const iframeCacheMap = new Map<string, HTMLIFrameElement>()
+
+const colorMode = useColorMode({ storageKey: COLOR_MODE_KEY })
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.tab.name)
 const iframeEl = ref<HTMLIFrameElement>()

packages/devtools/client/components/StateEditor.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
+import { useColorMode } from '@vueuse/core'
+import { COLOR_MODE_KEY } from '../../src/runtime/settings'
 
 const props = defineProps<{
   name?: string
@@ -13,7 +15,7 @@ const emit = defineEmits<{
 }>()
 
 const isOpen = useVModel(props, 'open', emit, { passive: true })
-const colorMode = useColorMode()
+const colorMode = useColorMode({ storageKey: COLOR_MODE_KEY })
 const proxy = ref()
 
 const state = useState(props.name)

packages/devtools/client/composables/client.ts

@@ -1,5 +1,6 @@
 import type { NuxtDevtoolsClient, NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, VueInspectorData } from '@nuxt/devtools-kit/types'
 import type { Unhead } from '@unhead/schema'
+import { useColorMode } from '@vueuse/core'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
 import { extendedRpcMap, rpc } from './rpc'

packages/devtools/src/module.ts

@@ -23,6 +23,9 @@ export default defineNuxtModule<ModuleOptions>({
     if (options.enabled === false)
       return
 
+    const { theme } = options
+    nuxt.options.runtimeConfig.public.colorMode = theme
+
     if (isGlobalInstall()) {
       // @ts-expect-error missing types
       const globalOptions = nuxt.options.devtoolsGlobal || {} as ModuleGlobalOptions

packages/devtools/src/runtime/plugins/view/Main.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
 import type { CSSProperties } from 'vue'
+import { useRuntimeConfig } from 'nuxt/app'
 import type { NuxtDevtoolsHostClient } from '../../../types'
 import { settings } from '../../settings'
 import { state } from './state'
 import { millisecondToHumanreadable, useElementBounding, useEventListener, useScreenSafeArea } from './utils'
 import FrameBox from './FrameBox.vue'
+import type { ColorScheme } from './client'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
@@ -37,13 +39,22 @@ watchEffect(() => {
 
 const SNAP_THRESHOLD = 2
 
+const dark = computed(() => {
+  const defaultColorMode = useRuntimeConfig().public?.colorMode as ColorScheme
+
+  if (defaultColorMode) {
+    return defaultColorMode === 'dark'
+  }
+
+  return props.client.app.colorMode.value === 'dark'
+})
+
 const vars = computed(() => {
-  const dark = props.client.app.colorMode.value === 'dark'
   return {
-    '--nuxt-devtools-widget-bg': dark ? '#111' : '#ffffff',
-    '--nuxt-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
-    '--nuxt-devtools-widget-border': dark ? '#3336' : '#efefef',
-    '--nuxt-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
+    '--nuxt-devtools-widget-bg': dark.value ? '#111' : '#ffffff',
+    '--nuxt-devtools-widget-fg': dark.value ? '#F5F5F5' : '#111',
+    '--nuxt-devtools-widget-border': dark.value ? '#3336' : '#efefef',
+    '--nuxt-devtools-widget-shadow': dark.value ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
   }
 })
 

packages/devtools/src/runtime/plugins/view/client.ts

@@ -290,6 +290,7 @@ export async function setupDevToolsClient({
 export function useClientColorMode(): Ref<ColorScheme> {
   const explicitColor = ref<ColorScheme>()
   const systemColor = ref<ColorScheme>()
+  const defaultColor = ref<ColorScheme>(useRuntimeConfig().public.devtoolsTheme)
 
   const elements = [
     document.documentElement,
@@ -339,7 +340,7 @@ export function useClientColorMode(): Ref<ColorScheme> {
   getExplicitColor()
   getSystemColor()
 
-  return computed(() => explicitColor.value || systemColor.value || 'light')
+  return computed(() => defaultColor.value || explicitColor.value || systemColor.value || 'light')
 }
 
 function setupRouteTracking(timeline: TimelineMetrics, router: Router) {

packages/devtools/src/runtime/settings.ts

@@ -6,3 +6,5 @@ import _settings from '#build/devtools/settings'
 export const settings = _settings as {
   ui: NuxtDevToolsOptions['ui']
 }
+
+export const COLOR_MODE_KEY = 'nuxt-devtools-color-mode'