Nuxt•2y ago

`color-mode` not initializing the theme to dark.

The value of color-mode is clearly "dark" on load. My light/dark toggler can tell that the theme is dark. However, the dark theme is not being applied to the page no matter what I do. Thoughts?

<!-- App.vue -->
<script setup lang="ts">
const colorMode = useColorMode();
colorMode.value = "dark";
</script>

<template>
  <div class="w-[100vw] h-[100vh]" :class="colorMode">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<!-- App.vue -->
<script setup lang="ts">
const colorMode = useColorMode();
colorMode.value = "dark";
</script>

<template>
  <div class="w-[100vw] h-[100vh]" :class="colorMode">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  title: 'EzEval | Simple Project Evaluation Tools For Window Cleaners',
  modules: [
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    'nuxt-icon'
  ],
  runtimeConfig: {
    // apiSecret: '123',
    public: {
      apiBase: '/api'
    }
  },
  colorMode: {
    preference: 'dark', // default value of $colorMode.preference
    fallback: 'dark', // 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
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  title: 'EzEval | Simple Project Evaluation Tools For Window Cleaners',
  modules: [
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    'nuxt-icon'
  ],
  runtimeConfig: {
    // apiSecret: '123',
    public: {
      apiBase: '/api'
    }
  },
  colorMode: {
    preference: 'dark', // default value of $colorMode.preference
    fallback: 'dark', // 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'
  }
});

2 Replies

roga•2y ago

Ah, I see what I did. Added the -mode in classSuffix. Initially only loading "dark" not "dark-mode". Fixed!

Orbviox•2y ago

A thing I noticed was that you're updating colorMode.value, while the docs recommend to update colorMode.preference instead: https://color-mode.nuxtjs.org/#usage

Gaming

Programming

`color-mode` not initializing the theme to dark.