feat(theme-default): support dark mode (close #29)

BREAKING CHANGE: most sass variables are migrated to css variables
vuejs · May 27, 2021 · 680e429 · 680e429
1 parent 6c778a8
commit 680e429
Show file tree

Hide file tree

Showing 23 changed files with 428 additions and 221 deletions.
diff --git a/docs/.vuepress/styles/palette.scss b/docs/.vuepress/styles/palette.scss
diff --git a/docs/reference/default-theme/styles.md b/docs/reference/default-theme/styles.md
@@ -8,16 +8,32 @@ Users can custom style variables via [palette file](#palette-file), and add extr
 
 ## Palette File
 
-You can create a `.vuepress/styles/palette.scss` file to override predefined variables of default theme:
+The path of palette file is `.vuepress/styles/palette.scss`.
 
+You can make use of it to override predefined SASS variables of default theme.
+
+::: details Click to expand SASS variables
 @[code{3-} scss](@vuepress/theme-default/src/client/styles/_variables.scss)
+:::
 
 ## Style File
 
-You can override default styles or add extra styles in `.vuepress/styles/index.scss` file. For example:
+The path of style file is `.vuepress/styles/index.scss`.
+
+You can add extra styles here, or override default styles:
 
 ```scss
 :root {
   scroll-behavior: smooth;
 }
 ```
+
+You can also make use of it to override predefined CSS variables of default theme.
+
+::: details Click to expand CSS variables
+@[code scss](@vuepress/theme-default/src/client/styles/vars.scss)
+:::
+
+::: details Click to expand dark mode CSS variables
+@[code scss](@vuepress/theme-default/src/client/styles/vars-dark.scss)
+:::
diff --git a/docs/zh/reference/default-theme/styles.md b/docs/zh/reference/default-theme/styles.md
@@ -8,16 +8,32 @@
 
 ## Palette 文件
 
-你可以创建一个 `.vuepress/styles/palette.scss` 文件来覆盖默认主题的预定义变量：
+Palette 文件的路径是 `.vuepress/styles/palette.scss` 。
 
+你可以利用它来覆盖默认主题的预定义 SASS 变量。
+
+::: details 点击查看 SASS 变量
 @[code{3-} scss](@vuepress/theme-default/src/client/styles/_variables.scss)
+:::
 
 ## Style 文件
 
-你可以在 `.vuepress/styles/index.scss` 文件中覆盖默认样式或者添加额外样式。例如：
+Style 文件的路径是 `.vuepress/styles/index.scss` 。
+
+你可以在这里添加额外的样式，或者覆盖默认样式：
 
 ```scss
 :root {
   scroll-behavior: smooth;
 }
 ```
+
+你也可以利用它来覆盖默认主题的预定义 CSS 变量。
+
+::: details 点击查看 CSS 变量
+@[code scss](@vuepress/theme-default/src/client/styles/vars.scss)
+:::
+
+::: details 点击查看暗黑模式 CSS 变量
+@[code scss](@vuepress/theme-default/src/client/styles/vars-dark.scss)
+:::
diff --git a/packages/@vuepress/theme-default/src/client/components/Navbar.vue b/packages/@vuepress/theme-default/src/client/components/Navbar.vue
@@ -23,8 +23,13 @@
 
     <div class="navbar-links-wrapper" :style="linksWrapperStyle">
       <slot name="before" />
+
       <NavbarLinks class="can-hide" />
+
       <slot name="after" />
+
+      <ToggleDarkButton />
+
       <NavbarSearch />
     </div>
   </header>
@@ -35,13 +40,15 @@ import { computed, defineComponent, onMounted, ref } from 'vue'
 import { useRouteLocale, useSiteLocaleData, withBase } from '@vuepress/client'
 import { useThemeLocaleData } from '../composables'
 import NavbarLinks from './NavbarLinks.vue'
+import ToggleDarkButton from './ToggleDarkButton.vue'
 import ToggleSidebarButton from './ToggleSidebarButton.vue'
 
 export default defineComponent({
   name: 'Navbar',
 
   components: {
     NavbarLinks,
+    ToggleDarkButton,
     ToggleSidebarButton,
   },
 

diff --git a/packages/@vuepress/theme-default/src/client/components/ToggleDarkButton.vue b/packages/@vuepress/theme-default/src/client/components/ToggleDarkButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <button class="toggle-dark-button" @click="toggleDark">
+    <svg v-show="!isDark" class="icon" focusable="false" viewBox="0 0 32 32">
+      <path
+        d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z"
+        fill="currentColor"
+      />
+      <path d="M2 15.005h5v2H2z" fill="currentColor" />
+      <path
+        d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
+        fill="currentColor"
+      />
+      <path d="M15 25.005h2v5h-2z" fill="currentColor" />
+      <path
+        d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
+        fill="currentColor"
+      />
+      <path d="M25 15.005h5v2h-5z" fill="currentColor" />
+      <path
+        d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
+        fill="currentColor"
+      />
+      <path d="M15 2.005h2v5h-2z" fill="currentColor" />
+    </svg>
+
+    <svg v-show="isDark" class="icon" focusable="false" viewBox="0 0 32 32">
+      <path
+        d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
+const isDark = ref(false)
+const toggleDark = (): void => {
+  isDark.value = !isDark.value
+}
+
+const setDarkClass = (): void => {
+  const htmlEl = window?.document.querySelector('html')
+  htmlEl?.classList.toggle('dark', isDark.value)
+}
+
+onMounted(() => {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  isDark.value = mediaQuery.matches
+  mediaQuery.addEventListener('change', (event) => {
+    isDark.value = event.matches
+  })
+  watch(isDark, setDarkClass, { immediate: true })
+})
+</script>
diff --git a/packages/@vuepress/theme-default/src/client/styles/_variables.scss b/packages/@vuepress/theme-default/src/client/styles/_variables.scss
@@ -1,36 +1,11 @@
 @import '@vuepress/plugin-palette/palette';
 
-// base colors
-$accentColor: #3eaf7c !default;
-$textColor: #2c3e50 !default;
-$borderColor: #eaecef !default;
-$arrowBgColor: #ccc !default;
-$tipColor: #42b983 !default;
-$warningColor: #e7c000 !default;
-$dangerColor: #cc0000 !default;
-
-// badge component colors
-$badgeTipColor: $tipColor !default;
-$badgeWarningColor: $warningColor !default;
-$badgeDangerColor: $dangerColor !default;
-
-// layout
-$navbarHeight: 3.6rem !default;
-$sidebarWidth: 20rem !default;
-$mobileSidebarWidth: $sidebarWidth * 0.82 !default;
-$contentWidth: 740px !default;
-$homePageWidth: 960px !default;
-
 // responsive breakpoints
 $MQNarrow: 959px !default;
 $MQMobile: 719px !default;
 $MQMobileNarrow: 419px !default;
 
-// code blocks
-$codeBgColor: #282c34 !default;
-$highlightLineBgColor: rgba(0, 0, 0, 66%) !default;
-$lineNumbersColor: rgba(255, 255, 255, 0.3) !default;
-$lineNumbersWrapperWidth: 3.5rem !default;
+// code languages
 $codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js'
   'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh'
   'styl' 'ts' 'toml' 'vue' 'yml' !default;
diff --git a/packages/@vuepress/theme-default/src/client/styles/_wrapper.scss b/packages/@vuepress/theme-default/src/client/styles/_wrapper.scss
@@ -1,7 +1,7 @@
 @import '_variables';
 
 %wrapper {
-  max-width: $contentWidth;
+  max-width: var(--content-width);
   margin: 0 auto;
   padding: 2rem 2.5rem;
 

diff --git a/packages/@vuepress/theme-default/src/client/styles/arrow.scss b/packages/@vuepress/theme-default/src/client/styles/arrow.scss
@@ -1,5 +1,3 @@
-@import '_variables';
-
 .arrow {
   display: inline-block;
   width: 0;
@@ -9,31 +7,31 @@
     border: {
       left: 4px solid transparent;
       right: 4px solid transparent;
-      bottom: 6px solid $arrowBgColor;
+      bottom: 6px solid var(--c-bg-arrow);
     }
   }
 
   &.down {
     border: {
       left: 4px solid transparent;
       right: 4px solid transparent;
-      top: 6px solid $arrowBgColor;
+      top: 6px solid var(--c-bg-arrow);
     }
   }
 
   &.right {
     border: {
       top: 4px solid transparent;
       bottom: 4px solid transparent;
-      left: 6px solid $arrowBgColor;
+      left: 6px solid var(--c-bg-arrow);
     }
   }
 
   &.left {
     border: {
       top: 4px solid transparent;
       bottom: 4px solid transparent;
-      right: 6px solid $arrowBgColor;
+      right: 6px solid var(--c-bg-arrow);
     }
   }
 }
diff --git a/packages/@vuepress/theme-default/src/client/styles/badge.scss b/packages/@vuepress/theme-default/src/client/styles/badge.scss
@@ -1,30 +1,27 @@
-@import '_variables';
-
 .badge {
   display: inline-block;
   font-size: 14px;
   height: 18px;
   line-height: 18px;
   border-radius: 3px;
   padding: 0 6px;
-  color: white;
-  background-color: #42b983;
+  color: var(--c-bg);
   vertical-align: top;
 
-  .table-of-contents & {
-    vertical-align: middle;
-  }
-
   &.tip {
-    background-color: $badgeTipColor;
+    background-color: var(--c-badge-tip);
   }
 
   &.warning {
-    background-color: $badgeWarningColor;
+    background-color: var(--c-badge-warning);
   }
 
   &.danger {
-    background-color: $badgeDangerColor;
+    background-color: var(--c-badge-danger);
+  }
+
+  .table-of-contents & {
+    vertical-align: middle;
   }
 
   & + & {

diff --git a/packages/@vuepress/theme-default/src/client/styles/code-group.scss b/packages/@vuepress/theme-default/src/client/styles/code-group.scss
@@ -1,5 +1,8 @@
 @import '_variables';
 
+/**
+ * code-group
+ */
 .code-group__nav {
   margin-top: 0.85rem;
   // 2 * margin + border-radius of <pre> tag
@@ -9,7 +12,7 @@
   padding-top: 10px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  background-color: $codeBgColor;
+  background-color: var(--code-bg-color);
 }
 
 .code-group__ul {
@@ -35,7 +38,7 @@
 }
 
 .code-group__nav-tab-active {
-  border-bottom: $accentColor 1px solid;
+  border-bottom: var(--c-brand) 1px solid;
 }
 
 @media (max-width: $MQMobileNarrow) {