chore: update playground

playground/app.vue

@@ -1,5 +1,58 @@
+<script setup>
+useSeoMeta({
+  title: 'Nuxt Color Mode',
+  description: 'Demo of using @nuxtjs/color-mode for Nuxt, supporting dark mode and custom colors',
+})
+</script>
+
 <template>
-  <NuxtLayout>
+  <div class="container mx-auto text-center p-14">
+    <NuxtLogo class="inline-block pb-5" />
+    <ColorModePicker />
     <NuxtPage />
-  </NuxtLayout>
+    <p class="p-4 rounded-lg bg-[--bg-secondary] text-[--color-secondary] inline-block">
+      Demo based on <a href="https://color-mode.nuxtjs.org">@nuxtjs/color-mode</a> module.
+    </p>
+  </div>
 </template>
+
+<style lang="postcss">
+:root {
+  --color: #243746;
+  --color-primary: #158876;
+  --color-secondary: #0e2233;
+  --bg: #f3f5f4;
+  --bg-secondary: #fff;
+  --border-color: #ddd;
+}
+
+.dark-mode {
+  --color: #ebf4f1;
+  --color-primary: #41b38a;
+  --color-secondary: #fdf9f3;
+  --bg: #091a28;
+  --bg-secondary: #071521;
+  --border-color: #0d2538;
+}
+.sepia-mode {
+  --color: #433422;
+  --color-secondary: #504231;
+  --bg: #f1e7d0;
+  --bg-secondary: #eae0c9;
+  --border-color: #ded0bf;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--bg);
+  color: var(--color);
+  transition: background-color .3s;
+}
+a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+p {
+  @apply p-5;
+}
+</style>

playground/components/ColorModePicker.vue

@@ -1,17 +1,27 @@
+<script setup>
+function iconName(theme) {
+  if (theme === 'system') return 'i-ph-laptop'
+  if (theme === 'light') return 'i-ph-sun'
+  if (theme === 'dark') return 'i-ph-moon'
+  return 'i-ph-coffee'
+}
+</script>
+
 <template>
   <div>
     <ul>
       <li
-        v-for="color of ['system', 'light', 'dark', 'sepia']"
-        :key="color"
+        v-for="theme of ['system', 'light', 'dark', 'sepia']"
+        :key="theme"
         :class="{
-          preferred: !$colorMode.unknown && color === $colorMode.preference,
-          selected: !$colorMode.unknown && color === $colorMode.value,
+          preferred: !$colorMode.unknown && theme === $colorMode.preference,
+          selected: !$colorMode.unknown && theme === $colorMode.value,
         }"
       >
-        <component
-          :is="`icon-${color}`"
-          @click="$colorMode.preference = color"
+        <Icon
+          :name="iconName(theme)"
+          class="size-6"
+          @click="$colorMode.preference = theme"
         />
       </li>
     </ul>
@@ -20,8 +30,9 @@
         placeholder="..."
         tag="span"
       >
-        Color mode: <b>{{ $colorMode.preference }}</b>
+        Preference: <b>{{ $colorMode.preference }}</b>
         <span v-if="$colorMode.preference === 'system'">&nbsp;(<i>{{ $colorMode.value }}</i> mode detected)</span>
+        <span v-if="$colorMode.forced">&nbsp;(<i>{{ $colorMode.value }}</i> forced)</span>
       </ColorScheme>
     </p>
   </div>
@@ -36,13 +47,15 @@ ul {
 ul li {
   display: inline-block;
   padding: 5px;
+  margin-right: 10px;
+  line-height: 0;
 }
 p {
   margin: 0;
   padding-top: 5px;
   padding-bottom: 20px;
 }
-.feather {
+li {
   position: relative;
   top: 0px;
   cursor: pointer;
@@ -53,14 +66,14 @@ p {
   border-radius: 5px;
   transition: all 0.1s ease;
 }
-.feather:hover {
+li:hover {
   top: -3px;
 }
-.preferred .feather {
+li.preferred {
   border-color: var(--color-primary);
   top: -3px;
 }
-.selected .feather {
+li.selected {
   color: var(--color-primary);
 }
 </style>

playground/nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
-  components: { global: true, dirs: ['~/components'] },
-  css: ['~/assets/main.css'],
-  modules: ['../src/module', '@nuxtjs/tailwindcss'],
+  compatibilityDate: '2024-09-11',
+  modules: [
+    '../src/module',
+    '@nuxt/icon',
+    '@nuxtjs/tailwindcss'
+  ],
 })

playground/package.json

@@ -2,8 +2,13 @@
   "name": "color-mode-playground",
   "private": true,
   "dependencies": {
+    "@nuxt/icon": "^1.5.1",
     "@nuxtjs/color-mode": "latest",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "nuxt": "^3.13.1"
+  },
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build"
   }
 }

playground/pages/index.vue

@@ -1,18 +1,10 @@
 <template>
   <div>
-    <Title>Demo of @nuxtjs/color-mode</Title>
-    <ColorModePicker />
     <p>
       Go to
       <NuxtLink to="/light">
         light page
       </NuxtLink>
     </p>
-    <p>
-      Go to
-      <NuxtLink to="/tailwind">
-        tailwind integration
-      </NuxtLink>
-    </p>
   </div>
 </template>