feat: add dark mode

valaxyjs · Aug 20, 2022 · 4362b13 · 4362b13
1 parent 3236a42
commit 4362b13
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/theme/components/GLConfig.vue b/theme/components/GLConfig.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { isDark, toggleDark } from 'valaxy'
+</script>
+
+<template>
+  <button type="button" aria-label="Toggle Dark Mode" @click="toggleDark()">
+    <div v-if="!isDark" i-ri-sun-line />
+    <div v-else i-ri-moon-line />
+  </button>
+</template>
diff --git a/theme/components/GLIntro.vue b/theme/components/GLIntro.vue
@@ -7,9 +7,9 @@ const config = useConfig()
 <template>
   <div class="gl-intro flex items-center" justify="center" w="screen" h="screen">
     <div
-      class="gl-card transition shadow-md hover:shadow-lg" flex="~ col"
+      class="gl-card transition shadow-md hover:shadow-lg rounded relative" flex="~ col"
       min-w="300px"
-      items="center" justify="center" m="2" p="4" bg="white"
+      items="center" justify="center" m="2" p="4" bg="white dark:dark-900"
     >
       <div class="avatar" flex="~ col" justify="center" items="center" m="t-2">
         <img class="gl-avatar transition shadow border-white border-width-3px" rounded="full" :src="config.author.avatar" width="100" height="100" alt="avatar">
@@ -26,8 +26,11 @@ const config = useConfig()
       <blockquote m="y-4" p="y-2" opacity="80" text="sm" class="border-y border-t-gray-200 border-b-gray-200">
         {{ config.author.intro }}
       </blockquote>
+
       <GLNav m="y-2" />
       <GLSocial m="t-2" />
     </div>
+
+    <GLConfig class="absolute top-5 right-5" />
   </div>
 </template>
diff --git a/theme/components/GLNav.vue b/theme/components/GLNav.vue
@@ -31,4 +31,21 @@ const themeConfig = useThemeConfig()
     background-color: black;
   }
 }
+
+.dark {
+  .gl-nav-item {
+    color: white;
+    border-color: #666;
+    background-color: #222;
+
+    &:hover {
+      background-color: #333;
+    }
+
+    &.active {
+      color: black;
+      background-color: white;
+    }
+  }
+}
 </style>
diff --git a/theme/layouts/home.vue b/theme/layouts/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="divide-y divide-gray-200 dark:divide-gray-700" bg="gray-200">
+  <div bg="gray-200 dark:dark-800">
     <GLIntro />
 
     <!-- <slot>

diff --git a/theme/layouts/layout.vue b/theme/layouts/layout.vue
@@ -6,6 +6,8 @@
 
     <GLHeader />
 
+    <GLConfig class="absolute top-5 right-5" />
+
     <div text="center" flex="~" justify="center" m="b-8">
       <GLNav />
     </div>