feat: cookie storage

.github/workflows/ci.yml

@@ -10,44 +10,25 @@ on:
 
 jobs:
   ci:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [18, 20]
+    runs-on: ubuntu-latest
 
     steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
-
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - name: cache node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/pnpm-lock.yaml')) }}
-
-      - run: corepack enable
-
+          node-version: 20
+          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
-
       - name: Prepare TypeScript environment
         run: pnpm run dev:prepare
-
       - name: Lint
         run: pnpm run lint
-
       - name: Test
         run: pnpm run test
-
       - name: Build project
         run: pnpm run prepack
-
       - name: Coverage
         uses: codecov/codecov-action@v4
         env:

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>