feat(admin): dark mode (#502)

package.json

@@ -39,7 +39,7 @@
     "start:nuxtjs": "nuxt start nuxtjs.org",
     "play": "BUILD_ADMIN=true nuxt dev playground",
     "lint": "eslint --ext .ts,.js,.vue .",
-    "prepare": "yarn link && yarn link docus",
+    "prepare": "yarn link && yarn link docus && vue-demi-switch 3 vue3",
     "release": "yarn test && standard-version && git push --follow-tags && npm publish",
     "test": "yarn lint && echo 'TODO tests'",
     "clean:nuxt": "rm -rf .nuxt docs/.nuxt playground/.nuxt nuxtjs.org/.nuxt",
@@ -124,6 +124,7 @@
     "@types/fs-extra": "^9.0.11",
     "@types/graceful-fs": "^4.1.5",
     "@types/node-fetch": "^2.5.10",
+    "@vueuse/core": "^5.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",

src/admin/app/components/AppHeader.vue

@@ -1,20 +1,11 @@
 <template>
-  <header class="relative z-10 flex items-center border-b">
+  <header class="relative z-10 flex items-center d-border border-b">
     <AppHeaderLogo />
-
     <AppHeaderNav />
   </header>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue3'
+<script setup lang="ts">
 import AppHeaderLogo from './AppHeaderLogo.vue'
 import AppHeaderNav from './AppHeaderNav.vue'
-
-export default defineComponent({
-  components: {
-    AppHeaderLogo,
-    AppHeaderNav
-  }
-})
 </script>

src/admin/app/components/AppHeaderLogo.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="flex items-center h-12 px-4 border-r">
+  <div class="flex items-center h-12 px-4 d-border border-r">
     <h1>
-      <svg class="h-8 -mb-2" viewBox="0 0 445 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        :class="isDark ? 'filter invert' : ''"
+        class="h-8 -mb-2"
+        viewBox="0 0 445 190"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <circle r="35.3495" transform="matrix(-1 0 0 1 140.947 47.3495)" stroke="black" stroke-width="24" />
         <circle
           r="36.5909"
@@ -30,3 +36,7 @@
     </h1>
   </div>
 </template>
+
+<script setup lang="ts">
+import { isDark } from '../composables/dark'
+</script>

src/admin/app/components/AppHeaderNav.vue

@@ -1,23 +1,34 @@
 <template>
-  <div class="flex items-center ml-4 space-x-2 flex-auto">
+  <div class="flex items-center ml-4 space-x-2 flex-auto pr-2">
     <!-- Editor -->
-    <RouterLink to="/" class="relative flex-none px-4 py-1 text-sm font-medium leading-5 border rounded-md">
+    <RouterLink to="/" class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md">
       Pages
     </RouterLink>
 
     <!-- :class used as this route is undefined in the router -->
     <RouterLink
       to="/static"
-      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 border rounded-md"
+      class="relative flex-none px-4 py-1 text-sm font-medium leading-5 d-border border rounded-md"
       :class="[$route.path.includes('static') ? 'router-link-active' : '']"
     >
       Static
     </RouterLink>
+
+    <div class="flex-auto"></div>
+
+    <button @click="toggleDark" class="p-1 opacity-50 hover:opacity-100 !outline-none">
+      <heroicons-outline-moon v-if="isDark" />
+      <heroicons-outline-sun v-else />
+    </button>
   </div>
 </template>
 
+<script setup lang="ts">
+import { toggleDark, isDark } from '../composables/dark'
+</script>
+
 <style lang="postcss">
 .router-link-active {
-  @apply border-blue-500 bg-blue-100;
+  @apply border-blue-500 bg-blue-400 bg-opacity-25;
 }
 </style>

src/admin/app/components/Editor.vue

@@ -1,8 +1,5 @@
 <template>
-  <textarea
-    v-model="frontmatter"
-    class="h-24 w-full font-mono px-4 py-2 d-border-primary border-b outline-none text-sm"
-  />
+  <textarea v-model="frontmatter" class="h-24 w-full font-mono px-4 py-2 d-border border-b outline-none text-sm" />
   <textarea v-model="content" class="w-full h-full font-mono px-4 py-2 outline-none text-sm" />
 </template>
 
@@ -70,6 +67,6 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 textarea {
-  @apply whitespace-nowrap overflow-scroll;
+  @apply whitespace-nowrap overflow-scroll bg-transparent;
 }
 </style>

src/admin/app/components/FilesTree.vue

@@ -3,8 +3,8 @@
     <li
       v-for="file of files"
       :key="file.path"
-      class="rounded text-gray-600"
-      :class="{ 'bg-gray-200 text-gray-900': isCurrent(file) }"
+      class="rounded"
+      :class="isCurrent(file) ? 'bg-gray-400 bg-opacity-20' : 'opacity-75'"
     >
       <div
         v-if="!isHidden(file)"
@@ -17,8 +17,8 @@
           py-1
           text-sm
           leading-5
-          hover:text-gray-900 hover:bg-gray-50
-          focus:outline-none focus:text-gray-900 focus:bg-gray-50
+          rounded
+          hover:bg-gray-400 hover:bg-opacity-15
         "
         @click="open(file)"
       >

src/admin/app/components/Preview.vue

@@ -45,7 +45,7 @@ function onUrlInput() {
 
 <template>
   <div class="h-full flex-1 grid grid-rows-[min-content,1fr]">
-    <div class="p-2 flex d-border-primary border-b gap-2">
+    <div class="p-2 flex d-border border-b gap-2">
       <button class="px-1 opacity-50 hover:opacity-100" @click="refresh">
         <heroicons-outline:refresh />
       </button>

src/admin/app/composables/dark.ts

@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

src/admin/app/composables/index.ts

@@ -1 +1,2 @@
 export * from './preview'
+export * from './dark'

src/admin/app/index.css

@@ -9,6 +9,14 @@ body {
   width: 100vw;
 }
 
+html {
+  @apply text-gray-900;
+}
+
+html.dark {
+  @apply text-gray-100 bg-gray-900;
+}
+
 * {
   box-sizing: border-box;
 }

src/admin/app/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Docus Admin</title>
   </head>
-  <body class="fixed flex w-full min-h-full overflow-hidden text-gray-900">
+  <body class="fixed flex w-full min-h-full overflow-hidden d-body-text-color d-body-bg">
     <div id="app"></div>
     <script type="module" src="/main.ts"></script>
   </body>

src/admin/app/pages/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <aside class="w-64 p-2 relative border-r">
+  <aside class="w-64 p-2 relative d-border border-r">
     <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
   </aside>
 
   <!-- eslint-disable-next-line vue/no-multiple-template-root -->
-  <div class="flex-1 border-r">
+  <div class="flex-1 d-border border-r">
     <Editor v-if="currentFile" :file="currentFile" />
 
-    <p v-else class="p-4 text-gray-700">👈 &nbsp;Select a file to edit.</p>
+    <p v-else class="p-4 opacity-75">👈 &nbsp;Select a file to edit.</p>
   </div>
 </template>
 

src/admin/app/pages/static.vue

@@ -3,9 +3,9 @@
   <div class="flex flex-shrink-0">
     <div class="flex flex-col w-64">
       <!-- Sidebar component, swap this element with another sidebar if you like -->
-      <div class="flex flex-col flex-grow border-r border-gray-r-200 bg-white overflow-y-auto">
+      <div class="flex flex-col flex-grow d-border border-r border-gray-r-200 overflow-y-auto">
         <div class="mt-2 flex-grow flex flex-col">
-          <nav class="flex-1 px-2 bg-white space-y-1">
+          <nav class="flex-1 px-2 space-y-1">
             <FilesTree :files="files" :current-file="currentFile" @open="openFile" />
           </nav>
         </div>

src/admin/app/windi.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'windicss/helpers'
+import colors from 'windicss/colors'
+import settings from '../../defaultTheme/settings'
+
+export default defineConfig({
+  theme: {
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        black: '#000',
+        white: '#fff',
+        blue: colors.lightBlue,
+        green: colors.emerald,
+        red: colors.red,
+        rose: colors.rose,
+        yellow: colors.amber,
+        gray: colors.gray
+      }
+    }
+  },
+  shortcuts: {
+    ...settings.shortcuts
+  }
+})

src/admin/vite.config.ts

@@ -36,9 +36,10 @@ export default defineConfig({
   resolve: {
     alias: {
       vue: 'vue3'
-    }
+    },
+    dedupe: ['vue-demi']
   },
   optimizeDeps: {
-    exclude: Object.keys({ ...dependencies, ...devDependencies }).concat(['fs', 'path'])
+    exclude: Object.keys({ ...dependencies, ...devDependencies }).concat(['fs', 'path', 'vue-demi'])
   }
 })

yarn.lock

@@ -2674,6 +2674,14 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
   integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
 
+"@vueuse/core@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.0.3.tgz#8f3170e2a51ae62fb1725c84d4cc02a7552aad0b"
+  integrity sha512-TMCL11EVMaj2Y5qdYosvuwA+i1aKrerFXs7fhNZiQiLCWxF8XsrNdxzoiaI2n12UcmSOXvd1xdyWs7Nss+p/Hg==
+  dependencies:
+    "@vueuse/shared" "5.0.3"
+    vue-demi "*"
+
 "@vueuse/integrations@^5.0.3":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-5.0.3.tgz#64820965d068b356b4df50ed47a87adf0141f68e"