diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4941bdf..61446ef 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,7 +13,18 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     '@unocss/nuxt',
     '@pinia/nuxt',
+    '@nuxtjs/color-mode',
   ],
+  autoImports: {
+    dirs: [
+      'composables',
+      'store',
+    ],
+  },
+  experimental: {
+    reactivityTransform: true,
+    // viteNode: true,
+  },
   vueuse: {
     ssrHandlers: true,
   },
@@ -28,14 +39,7 @@ export default defineNuxtConfig({
       ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ],
   },
-  autoImports: {
-    dirs: [
-      'composables',
-      'store',
-    ],
-  },
-  experimental: {
-    reactivityTransform: true,
-    // viteNode: true,
+  colorMode: {
+    classSuffix: '',
   },
 })
diff --git a/package.json b/package.json
index ef77826..0eece00 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@antfu/eslint-config": "^0.20.6",
     "@iconify-json/carbon": "^1.1.3",
     "@iconify-json/twemoji": "^1.1.3",
+    "@nuxtjs/color-mode": "^3.0.2",
     "@pinia/nuxt": "^0.1.8",
     "@unocss/nuxt": "^0.31.5",
     "@vueuse/nuxt": "^8.2.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8fe42ab..d384af0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ specifiers:
   '@antfu/eslint-config': ^0.20.6
   '@iconify-json/carbon': ^1.1.3
   '@iconify-json/twemoji': ^1.1.3
+  '@nuxtjs/color-mode': ^3.0.2
   '@pinia/nuxt': ^0.1.8
   '@unocss/nuxt': ^0.31.5
   '@vueuse/nuxt': ^8.2.6
@@ -23,6 +24,7 @@ devDependencies:
   '@antfu/eslint-config': 0.20.6_eslint@8.13.0+typescript@4.6.3
   '@iconify-json/carbon': 1.1.3
   '@iconify-json/twemoji': 1.1.3
+  '@nuxtjs/color-mode': 3.0.2
   '@pinia/nuxt': 0.1.8_pinia@2.0.13
   '@unocss/nuxt': 0.31.5
   '@vueuse/nuxt': 8.2.6
@@ -258,7 +260,7 @@ packages:
       '@babel/core': 7.17.9
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-environment-visitor': 7.16.7
-      '@babel/helper-function-name': 7.16.7
+      '@babel/helper-function-name': 7.17.9
       '@babel/helper-member-expression-to-functions': 7.17.7
       '@babel/helper-optimise-call-expression': 7.16.7
       '@babel/helper-replace-supers': 7.16.7
@@ -810,6 +812,21 @@ packages:
       - webpack
     dev: true
 
+  /@nuxtjs/color-mode/3.0.2:
+    resolution: {integrity: sha512-JgppnxOsVe2T/UGj0xjok/8TKDI27bRuhNh+Qrvr0FsS90Mty2acZLLN0lkrOTV0WLrpnTgN7mZCrgCWmhvziA==}
+    dependencies:
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27501460.04a72f8
+      defu: 5.0.1
+      lodash.template: 4.5.0
+      pathe: 0.2.0
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: true
+
   /@pinia/nuxt/0.1.8_pinia@2.0.13:
     resolution: {integrity: sha512-+M1GH/4XQdooOulPL7aYzli6UE1R5rWJtgcPhx2/97yYRLhKZvuIT33OauUCjYZ+tQVs8lyKfzt6S2agqzcmWg==}
     peerDependencies:
@@ -2363,6 +2380,10 @@ packages:
       object-keys: 1.1.1
     dev: true
 
+  /defu/5.0.1:
+    resolution: {integrity: sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==}
+    dev: true
+
   /defu/6.0.0:
     resolution: {integrity: sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==}
     dev: true