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

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