`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'
}
});
