feat(docs): add docs dark basic style (#6196)

docs/.vitepress/config/features.ts

@@ -1,3 +1,3 @@
 export const features = {
-  theme: false,
+  theme: !process.env.DOC_ENV,
 }

docs/.vitepress/dark-mode.js

@@ -1,5 +1,5 @@
 ;(() => {
-  const saved = localStorage.getItem('preferred_theme')
+  const saved = localStorage.getItem('el-theme-appearance')
   if (
     saved === 'auto'
       ? window.matchMedia(`(prefers-color-scheme: dark)`).matches

docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
-import { useTheme } from '../../composables/theme'
-
-const toggle = useTheme()
+import { toggleDark } from '../../composables/dark'
 </script>
 
 <template>
   <div class="full-screen-theme-toggler">
     <span> Theme </span>
-    <CommonThemeToggler @click="toggle" />
+    <CommonThemeToggler @click="toggleDark()" />
   </div>
 </template>
 

docs/.vitepress/vitepress/components/full-screen/vp-translation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useToggle } from '@vueuse/core'
 import VPLink from '../common/vp-link.vue'
 import { useTranslation } from '../../composables/translation'
-import { useToggle } from '../../composables/toggle'
 import ExpandIcon from '../icons/expand.vue'
 
 const emit = defineEmits(['close'])

docs/.vitepress/vitepress/components/navbar/vp-search.vue

@@ -173,7 +173,6 @@ function initialize(userOptions: any) {
   --docsearch-footer-background: var(--bg-color);
   --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,
     0 -3px 6px 0 rgba(69, 98, 155, 0.12);
-  --docsearch-searchbox-background: var(--bg-color-soft);
   --docsearch-searchbox-focus-background: var(--bg-color-mute);
   --docsearch-muted-color: var(--text-color-lighter);
   --docsearch-text-color: var(--text-color-light);
@@ -181,6 +180,8 @@ function initialize(userOptions: any) {
 
   .dark & {
     --docsearch-text-color: var(--text-color-light);
+    --docsearch-modal-shadow: none;
+    --docsearch-footer-shadow: none;
     // --docsearch-searchbox-focus-background: var(--bg-color-mute);
     .DocSearch-Button {
       .DocSearch-Button-Key {

docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { useTheme } from '../../composables/theme'
+import { toggleDark } from '../../composables/dark'
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
-
-const toggle = useTheme()
 </script>
 
 <template>
   <div class="theme-toggler-content">
-    <CommonThemeToggler @click="toggle" />
+    <CommonThemeToggler @click="toggleDark()" />
   </div>
 </template>
 

docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue

@@ -43,7 +43,7 @@ const route = useRoute()
 }
 
 .link.active {
-  background-color: var(--bg-brand-color);
+  background-color: var(--link-active-bg-color);
   .link-text {
     font-weight: 600;
     color: var(--brand-color);

docs/.vitepress/vitepress/components/vp-app.vue

@@ -3,7 +3,7 @@ import { onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import nprogress from 'nprogress'
 import dayjs from 'dayjs'
-import { useToggle } from '../composables/toggle'
+import { useToggle } from '@vueuse/core'
 import { useSidebar } from '../composables/sidebar'
 import { useToggleWidgets } from '../composables/toggle-widgets'
 import { useLang } from '../composables/lang'

docs/.vitepress/vitepress/components/vp-demo.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, toRef, getCurrentInstance } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import { useToggle } from '../composables/toggle'
+import { useClipboard, useToggle } from '@vueuse/core'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'
 import { usePlayGround } from '../composables/use-playground'
@@ -106,7 +105,6 @@ const copyCode = async () => {
       </div>
       <ElDivider class="m-0" />
       <Example :file="path" :demo="formatPathDemos[path]" />
-      <ElDivider v-if="sourceVisible" />
       <el-collapse-transition>
         <SourceCode v-show="sourceVisible" :source="source" />
       </el-collapse-transition>

docs/.vitepress/vitepress/components/vp-sponsors.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import sponsorsLocale from '../../i18n/component/sponsors.json'
 import sponsorLocale from '../../i18n/component/sponsor.json'
 import { useLang } from '../composables/lang'
+import { isDark } from '../composables/dark'
 import VPSponsor from './vp-sponsor.vue'
 import VPSponsorLarge from './vp-sponsor-large.vue'
 
@@ -10,6 +11,8 @@ const lang = useLang()
 const sponsors = computed(() => sponsorsLocale[lang.value])
 
 const sponsor = computed(() => sponsorLocale[lang.value])
+
+const darkSponsors = ['bit']
 </script>
 
 <template>
@@ -17,7 +20,12 @@ const sponsor = computed(() => sponsorLocale[lang.value])
     <p class="sponsors-title">{{ sponsor.sponsoredBy }}</p>
     <VPSponsorLarge />
     <div class="container">
-      <VPSponsor v-for="(s, key) in sponsors" :key="key" :item="s" />
+      <VPSponsor
+        v-for="(s, key) in sponsors"
+        :key="key"
+        :item="s"
+        :class="darkSponsors.includes(s.name) && isDark ? 'filter invert' : ''"
+      />
     </div>
   </div>
 </template>

docs/.vitepress/vitepress/composables/dark.ts

@@ -0,0 +1,6 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark({
+  storageKey: 'el-theme-appearance',
+})
+export const toggleDark = useToggle(isDark)

docs/.vitepress/vitepress/composables/fullscreen.ts

@@ -1,4 +1,4 @@
-import { useToggle } from './toggle'
+import { useToggle } from '@vueuse/core'
 export const useFullScreen = () => {
   const [isFullScreen, toggleFullScreen] = useToggle()
   return {

docs/.vitepress/vitepress/composables/theme.ts

@@ -1,47 +0,0 @@
-import { NOOP } from '@vue/shared'
-import { isClient } from '@vueuse/core'
-import { useFeatureFlag } from './feature-flag'
-
-const THEME_KEY = 'preferred_theme'
-const PREFER_SYSTEM = 'system'
-
-export const useTheme = () => {
-  const themeEnabled = useFeatureFlag('theme')
-  if (!isClient || !themeEnabled.value) return NOOP
-
-  const cachedPreference = localStorage.getItem(THEME_KEY) || PREFER_SYSTEM
-  // refer to https://css-tricks.com/dark-modes-with-css/
-  const systemPreference = window.matchMedia('(prefers-color-scheme: dark)')
-
-  const rootElement = document.documentElement
-
-  let preferredDark = cachedPreference
-    ? cachedPreference === 'dark'
-    : systemPreference.matches
-
-  systemPreference.addEventListener('change', (e: MediaQueryListEvent) => {
-    if (localStorage.getItem(THEME_KEY) === PREFER_SYSTEM) {
-      updateTheme((preferredDark = e.matches))
-    }
-  })
-
-  function updateTheme(preferredDark: boolean) {
-    rootElement.classList[preferredDark ? 'add' : 'remove']('dark')
-  }
-
-  // toggler
-  return () => {
-    updateTheme((preferredDark = !preferredDark))
-
-    localStorage.setItem(
-      THEME_KEY,
-      preferredDark
-        ? systemPreference.matches
-          ? PREFER_SYSTEM
-          : 'dark'
-        : systemPreference.matches
-        ? 'light'
-        : PREFER_SYSTEM
-    )
-  }
-}

docs/.vitepress/vitepress/composables/toggle.ts

@@ -1,16 +0,0 @@
-import { isRef, ref } from 'vue'
-import { isBoolean } from '@vueuse/core'
-import type { MaybeRef } from '@vueuse/core'
-
-export const useToggle = (getToggled?: MaybeRef<boolean>) => {
-  const val = isRef(getToggled)
-    ? getToggled
-    : ref(isBoolean(getToggled) ? getToggled : false)
-
-  return [
-    val,
-    (toggle?: boolean) => {
-      val.value = isBoolean(toggle) ? toggle : !val.value
-    },
-  ] as const
-}

docs/.vitepress/vitepress/index.ts

@@ -1,7 +1,10 @@
 import 'normalize.css'
 // import 'element-plus/dist/index.css'
+
 // for dev
 import '../../../packages/theme-chalk/src/index.scss'
+// for dark mode
+import '../../../packages/theme-chalk/src/dark/vars.scss'
 import './styles/app.scss'
 
 import VPApp from './components/vp-app.vue'

docs/.vitepress/vitepress/styles/base.scss

@@ -242,7 +242,7 @@ form {
   }
   &.tip {
     padding: 8px 16px;
-    background-color: var(--el-color-primary-light-9);
+    background-color: var(--block-tip-bg-color);
     border-radius: 4px;
     border-left: 5px solid var(--el-color-primary);
     margin: 20px 0;
@@ -250,15 +250,9 @@ form {
 
   &.warning {
     padding: 8px 16px;
-    background-color: var(--el-color-danger-lighter);
+    background-color: var(--block-warning-bg-color);
     border-radius: 4px;
     border-left: 5px solid var(--el-color-danger);
     margin: 20px 0;
   }
 }
-
-.dark {
-  .example .el-divider {
-    background-color: var(--border-color-light);
-  }
-}

docs/.vitepress/vitepress/styles/code.scss

@@ -1,3 +1,65 @@
+/* https://github.com/antfu/prism-theme-vars */
+@use 'prism-theme-vars/base.css';
+@use 'prism-theme-vars/marker.css';
+
+[class*='language-']:before {
+  font-family: var(--code-font-family);
+}
+
+span[class~='language-css']:before {
+  content: '';
+}
+
+:root {
+  --prism-marker-opacity: 0.6;
+  --prism-marker-color: var(--code-text-color);
+  --prism-line-height: var(--code-line-height);
+}
+
+html:not(.dark) {
+  --prism-builtin: #3182bd;
+  --prism-comment: #848486;
+  --prism-deleted: #3182bd;
+  --prism-function: #6196cc;
+  --prism-boolean: #c25205;
+  --prism-number: #c25205;
+  --prism-property: #717c11;
+  --prism-punctuation: #a8a9cc;
+  --prism-keyword: #c792ea;
+  --prism-variable: #0b8235;
+  --prism-url-decoration: #67cdcc;
+  --prism-symbol: green;
+  --prism-selector: #0b8235;
+}
+
+html.dark {
+  --prism-scheme: dark;
+  --prism-foreground: #a6accd;
+  --prism-background: #181818;
+  --prism-comment: #758575;
+  --prism-string: #c3e88d;
+  --prism-literal: #429988;
+  --prism-keyword: #89ddff;
+  --prism-boolean: #6394bf;
+  --prism-number: #6394bf;
+  --prism-variable: #c2b36e;
+  --prism-function: #82aaff;
+  --prism-deleted: #bc6066;
+  --prism-class: #54b1bf;
+  --prism-builtin: var(--el-color-primary-light-2);
+  --prism-property: #c792ea;
+  --prism-namespace: #db889a;
+  --prism-punctuation: #89ddff;
+  --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
+  --prism-json-property: #6b8b9e;
+  --prism-line-number: #888888;
+  --prism-line-number-gutter: #eeeeee;
+  --prism-line-highlight-background: #444444;
+  --prism-selection-background: #444444;
+  --prism-inline-background: #2d2d2d;
+}
+
 code {
   margin: 0;
   border-radius: 3px;
@@ -21,10 +83,6 @@ div[class*='language-'] {
   margin: 1rem -1.5rem;
   background-color: var(--code-bg-color);
   overflow-x: auto;
-
-  .dark & {
-    background-color: var(--bg-color-soft);
-  }
 }
 
 li > div[class*='language-'] {
@@ -59,7 +117,7 @@ li > div[class*='language-'] {
   position: relative;
   z-index: 1;
   margin: 0;
-  padding: 1.25rem 1.5rem;
+  padding: 0.25rem;
   background: transparent;
   overflow-x: auto;
 }
@@ -112,186 +170,3 @@ div[class*='language-'].line-numbers-mode {
   font-size: var(--code-font-size);
   color: #888;
 }
-
-/* Language marker */
-
-div[class*='language-']:before {
-  position: absolute;
-  top: 0.6em;
-  right: 1em;
-  z-index: 2;
-  font-size: 0.8rem;
-  color: #888;
-}
-
-div[class~='language-html']:before,
-div[class~='language-markup']:before {
-  content: 'html';
-}
-
-div[class~='language-md']:before,
-div[class~='language-markdown']:before {
-  content: 'md';
-}
-
-div[class~='language-css']:before {
-  content: 'css';
-}
-
-div[class~='language-sass']:before {
-  content: 'sass';
-}
-
-div[class~='language-scss']:before {
-  content: 'scss';
-}
-
-div[class~='language-less']:before {
-  content: 'less';
-}
-
-div[class~='language-stylus']:before {
-  content: 'styl';
-}
-
-div[class~='language-js']:before,
-div[class~='language-javascript']:before {
-  content: 'js';
-}
-
-div[class~='language-ts']:before,
-div[class~='language-typescript']:before {
-  content: 'ts';
-}
-
-div[class~='language-json']:before {
-  content: 'json';
-}
-
-div[class~='language-rb']:before,
-div[class~='language-ruby']:before {
-  content: 'rb';
-}
-
-div[class~='language-py']:before,
-div[class~='language-python']:before {
-  content: 'py';
-}
-
-div[class~='language-sh']:before,
-div[class~='language-bash']:before {
-  content: 'sh';
-}
-
-div[class~='language-php']:before {
-  content: 'php';
-}
-
-div[class~='language-go']:before {
-  content: 'go';
-}
-
-div[class~='language-rust']:before {
-  content: 'rust';
-}
-
-div[class~='language-java']:before {
-  content: 'java';
-}
-
-div[class~='language-c']:before {
-  content: 'c';
-}
-
-div[class~='language-yaml']:before {
-  content: 'yaml';
-}
-
-div[class~='language-dockerfile']:before {
-  content: 'dockerfile';
-}
-
-div[class~='language-vue']:before {
-  content: 'vue';
-}
-
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
- * Based on https://github.com/chriskempson/tomorrow-theme
- *
- * @author Rose Pritchard
- */
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #848486;
-}
-
-.token.punctuation {
-  color: #a8a9cc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #3182bd;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #c25205;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #717c11;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #c792ea;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #0b8235;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}

docs/.vitepress/vitepress/styles/vars.scss

@@ -7,6 +7,7 @@
   --brand-color: var(--el-color-primary);
   --brand-color-light: var(--el-color-primary-light-1);
   --bg-brand-color: var(--el-color-primary-light-9);
+
   --bg-color: var(--el-color-white);
   --bg-color-soft: #fafafa;
   --bg-color-mute: #f2f2f2;
@@ -39,6 +40,7 @@
   // --dropdown-z-index: 22;
 
   // code block vars
+  --code-line-height: 1.4;
   --code-font-size: var(--el-font-size-base);
   --code-bg-color: var(--el-bg-color);
   --code-text-color: var(--text-color);
@@ -47,6 +49,13 @@
   // doc search vars
   --docsearch-primary-color: var(--brand-color);
   --docsearch-searchbox-background: var(--el-bg-color);
+
+  // tip block
+  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
+  --block-warning-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
+
+  // link
+  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
 }
 
 :root {
@@ -61,8 +70,8 @@
   --border-color: #434343;
   --border-color-light: #979797;
 
-  --bg-color: #121212;
-  --bg-color-soft: #383838;
+  --bg-color: var(--el-bg-color);
+  --bg-color-soft: #242424;
   --bg-color-mute: #2c2c2c;
 }
 

docs/package.json

@@ -16,7 +16,8 @@
     "clipboard-copy": "^4.0.1",
     "element-plus": "npm:element-plus@latest",
     "normalize.css": "^8.0.1",
-    "nprogress": "^0.2.0"
+    "nprogress": "^0.2.0",
+    "prism-theme-vars": "^0.2.2"
   },
   "devDependencies": {
     "@crowdin/cli": "^3.7.8",

packages/theme-chalk/src/dark/vars.scss

@@ -0,0 +1,6 @@
+html.dark {
+  --el-bg-color: #1a1a1a;
+
+  // border
+  --el-border-color-base: #434343;
+}

packages/theme-chalk/src/mixins/_var.scss

@@ -28,3 +28,8 @@
     --el-#{$name}-#{$attribute}: #{$value};
   }
 }
+
+@mixin set-css-color-rgb($type) {
+  $color: map.get($colors, $type, 'base');
+  --el-color-#{$type}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
+}

packages/theme-chalk/src/var.scss

@@ -14,6 +14,11 @@
 
   --el-color-primary: #{$color-primary};
 
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
   @for $i from 1 through 9 {
     @include set-css-color-type-light('primary', $i);
   }

pnpm-lock.yaml

@@ -198,6 +198,7 @@ importers:
       markdown-it-container: ^3.0.0
       normalize.css: ^8.0.1
       nprogress: ^0.2.0
+      prism-theme-vars: ^0.2.2
       unplugin-icons: ^0.13.2
       unplugin-vue-components: ^0.17.18
       vite: ^2.8.4
@@ -213,6 +214,7 @@ importers:
       element-plus: 2.0.2_1a412d14def5ff5ca1122000e4bee666
       normalize.css: 8.0.1
       nprogress: 0.2.0
+      prism-theme-vars: 0.2.2
     devDependencies:
       '@crowdin/cli': 3.7.8
       '@iconify-json/ri': 1.1.0
@@ -3940,7 +3942,7 @@ packages:
   /axios/0.26.0:
     resolution: {integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==}
     dependencies:
-      follow-redirects: 1.14.9_debug@4.3.3
+      follow-redirects: 1.14.9
     transitivePeerDependencies:
       - debug
     dev: false
@@ -6386,6 +6388,16 @@ packages:
       readable-stream: 2.3.7
     dev: true
 
+  /follow-redirects/1.14.9:
+    resolution: {integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /follow-redirects/1.14.9_debug@4.3.3:
     resolution: {integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==}
     engines: {node: '>=4.0'}
@@ -6396,6 +6408,7 @@ packages:
         optional: true
     dependencies:
       debug: 4.3.3
+    dev: true
 
   /for-in/1.0.2:
     resolution: {integrity: sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=}
@@ -9821,6 +9834,10 @@ packages:
     resolution: {integrity: sha1-Pxjpd6m9jrN/zE/1ZZ176Qhos9g=}
     dev: true
 
+  /prism-theme-vars/0.2.2:
+    resolution: {integrity: sha512-EL9ifuU/F8tEldoCa2sspiiLWysCL54xDbf2gN/ubwdtbuJROqOGopG5kSwunapwaioT+jLUQ/Ky+7jnv62xJA==}
+    dev: false
+
   /prismjs/1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}