diff --git a/docs/.vitepress/config/features.ts b/docs/.vitepress/config/features.ts
index 6f0035bc0f..b59070cd49 100644
--- a/docs/.vitepress/config/features.ts
+++ b/docs/.vitepress/config/features.ts
@@ -1,3 +1,3 @@
export const features = {
- theme: false,
+ theme: !process.env.DOC_ENV,
}
diff --git a/docs/.vitepress/dark-mode.js b/docs/.vitepress/dark-mode.js
index ab48dfb19b..23ec4b6a23 100644
--- a/docs/.vitepress/dark-mode.js
+++ b/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
diff --git a/docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue b/docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue
index 083d00f24c..91ab3c2e50 100644
--- a/docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue
+++ b/docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue
@@ -1,14 +1,12 @@
Theme
-
+
diff --git a/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue b/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
index d0bfb9c4ac..6a28fdc056 100644
--- a/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
+++ b/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
@@ -1,7 +1,7 @@
-
+
diff --git a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue b/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue
index 886e0ce95c..1ee61d9e39 100644
--- a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue
+++ b/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);
diff --git a/docs/.vitepress/vitepress/components/vp-app.vue b/docs/.vitepress/vitepress/components/vp-app.vue
index e7f340f229..72e71e488d 100644
--- a/docs/.vitepress/vitepress/components/vp-app.vue
+++ b/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'
diff --git a/docs/.vitepress/vitepress/components/vp-demo.vue b/docs/.vitepress/vitepress/components/vp-demo.vue
index 0cc0876cc8..04fbeae428 100644
--- a/docs/.vitepress/vitepress/components/vp-demo.vue
+++ b/docs/.vitepress/vitepress/components/vp-demo.vue
@@ -1,7 +1,6 @@
@@ -17,7 +20,12 @@ const sponsor = computed(() => sponsorLocale[lang.value])
-
+
diff --git a/docs/.vitepress/vitepress/composables/dark.ts b/docs/.vitepress/vitepress/composables/dark.ts
new file mode 100644
index 0000000000..a65fbe189b
--- /dev/null
+++ b/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)
diff --git a/docs/.vitepress/vitepress/composables/fullscreen.ts b/docs/.vitepress/vitepress/composables/fullscreen.ts
index 92440c81f1..9df4eb1e84 100644
--- a/docs/.vitepress/vitepress/composables/fullscreen.ts
+++ b/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 {
diff --git a/docs/.vitepress/vitepress/composables/theme.ts b/docs/.vitepress/vitepress/composables/theme.ts
deleted file mode 100644
index 4438163a16..0000000000
--- a/docs/.vitepress/vitepress/composables/theme.ts
+++ /dev/null
@@ -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
- )
- }
-}
diff --git a/docs/.vitepress/vitepress/composables/toggle.ts b/docs/.vitepress/vitepress/composables/toggle.ts
deleted file mode 100644
index c7a3c0c7ef..0000000000
--- a/docs/.vitepress/vitepress/composables/toggle.ts
+++ /dev/null
@@ -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) => {
- const val = isRef(getToggled)
- ? getToggled
- : ref(isBoolean(getToggled) ? getToggled : false)
-
- return [
- val,
- (toggle?: boolean) => {
- val.value = isBoolean(toggle) ? toggle : !val.value
- },
- ] as const
-}
diff --git a/docs/.vitepress/vitepress/index.ts b/docs/.vitepress/vitepress/index.ts
index e9f52c1803..d7bd3fe519 100644
--- a/docs/.vitepress/vitepress/index.ts
+++ b/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'
diff --git a/docs/.vitepress/vitepress/styles/base.scss b/docs/.vitepress/vitepress/styles/base.scss
index de0745112c..b2afc4ed11 100644
--- a/docs/.vitepress/vitepress/styles/base.scss
+++ b/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);
- }
-}
diff --git a/docs/.vitepress/vitepress/styles/code.scss b/docs/.vitepress/vitepress/styles/code.scss
index c89e222acf..58ec5ede75 100644
--- a/docs/.vitepress/vitepress/styles/code.scss
+++ b/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;
-}
diff --git a/docs/.vitepress/vitepress/styles/vars.scss b/docs/.vitepress/vitepress/styles/vars.scss
index f54402d446..6f717de152 100644
--- a/docs/.vitepress/vitepress/styles/vars.scss
+++ b/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;
}
diff --git a/docs/package.json b/docs/package.json
index c187de7ce2..7b94138095 100644
--- a/docs/package.json
+++ b/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",
diff --git a/packages/theme-chalk/src/dark/vars.scss b/packages/theme-chalk/src/dark/vars.scss
new file mode 100644
index 0000000000..b8932720a1
--- /dev/null
+++ b/packages/theme-chalk/src/dark/vars.scss
@@ -0,0 +1,6 @@
+html.dark {
+ --el-bg-color: #1a1a1a;
+
+ // border
+ --el-border-color-base: #434343;
+}
diff --git a/packages/theme-chalk/src/mixins/_var.scss b/packages/theme-chalk/src/mixins/_var.scss
index f27704796e..9fac44648d 100644
--- a/packages/theme-chalk/src/mixins/_var.scss
+++ b/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)};
+}
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index 097a725232..cb27783619 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/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);
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c25166bc7..b7ca447b40 100644
--- a/pnpm-lock.yaml
+++ b/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'}