feat: color mode selector (#449)

nuxt-themes · Jun 17, 2021 · 0623c62 · 0623c62 · vercel · Jun 17, 2021
1 parent 8b2a0f2
commit 0623c62
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/nuxtjs.org/components/AppFooter.vue b/nuxtjs.org/components/AppFooter.vue
@@ -25,7 +25,11 @@
               />
             </div>
           </div>
-          <MFooterLanguage class="mt-12 xl:mt-0" />
+          <div class="mt-12 xl:mt-0">
+            <h3 class="text-lg font-semibold light:text-gray-400 dark:text-cloud-light">Settings</h3>
+            <MFooterLocaleSelector class="mt-4 sm:max-w-xs" />
+            <MFooterColorModeSelector class="mt-4 sm:max-w-xs" />
+          </div>
         </div>
         <MFooterNewsLetter
           class="

diff --git a/nuxtjs.org/components/MFooterColorModeSelector.vue b/nuxtjs.org/components/MFooterColorModeSelector.vue
@@ -0,0 +1,19 @@
+<template>
+  <ASelectNative
+    v-model="$colorMode.preference"
+    :options="[
+      { value: 'system', text: 'System' },
+      { value: 'light', text: 'Light' },
+      { value: 'dark', text: 'Dark' }
+    ]"
+    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  name: 'ColorModeSelector'
+})
+</script>
diff --git a/nuxtjs.org/components/MFooterLanguage.vue b/nuxtjs.org/components/MFooterLanguage.vue