nuxt-color-mode not running. Returning undefined

You'll need to downgrade to the latest v2 of the package aka "@nuxtjs/color-mode": "^2.1.1". It looks like the v3 is not properly working with Nuxt2.

The following template works well

<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<style>
body {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

With

buildModules: ['@nuxtjs/color-mode']

and ssr: true in nuxt.config.js.