From 6f9d55471b5df27491d620647e7aaf1ff4ace15b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Thu, 5 May 2022 19:56:10 +0800 Subject: [PATCH] docs: add dark mode usage & compile dark/css-vars.css (#7513) * docs: add dark mode usage & compile dark/css-vars.css * docs: add example link --- .../.vitepress/crowdin/en-US/pages/guide.json | 30 +++++-- .../vitepress/components/dev/VersionTag.vue | 11 +++ .../components/sidebar/vp-sidebar-link.vue | 10 +-- docs/components.d.ts | 1 + docs/en-US/component/button.md | 2 +- docs/en-US/component/table-v2.md | 2 +- docs/en-US/guide/dark-mode.md | 84 +++++++++++++++++++ packages/theme-chalk/gulpfile.ts | 23 ++++- 8 files changed, 146 insertions(+), 17 deletions(-) create mode 100644 docs/.vitepress/vitepress/components/dev/VersionTag.vue create mode 100644 docs/en-US/guide/dark-mode.md diff --git a/docs/.vitepress/crowdin/en-US/pages/guide.json b/docs/.vitepress/crowdin/en-US/pages/guide.json index 1cc931e8cc..69b09ffa59 100644 --- a/docs/.vitepress/crowdin/en-US/pages/guide.json +++ b/docs/.vitepress/crowdin/en-US/pages/guide.json @@ -2,8 +2,14 @@ "intro": { "text": "Basics", "children": [ - { "text": "Design", "link": "/guide/design" }, - { "text": "Navigation", "link": "/guide/nav" }, + { + "text": "Design", + "link": "/guide/design" + }, + { + "text": "Navigation", + "link": "/guide/nav" + }, { "text": "Installation", "link": "/guide/installation" @@ -17,13 +23,27 @@ "advanced": { "text": "Advanced", "children": [ - { "text": "i18n", "link": "/guide/i18n" }, + { + "text": "i18n", + "link": "/guide/i18n" + }, { "text": "Migration from ElementUI", "link": "/guide/migration" }, - { "text": "Theming", "link": "/guide/theming" }, - { "text": "Built-in Transitions", "link": "/guide/transitions" }, + { + "text": "Theming", + "link": "/guide/theming" + }, + { + "text": "Dark Mode", + "link": "/guide/dark-mode", + "promotion": "2.2.0" + }, + { + "text": "Built-in Transitions", + "link": "/guide/transitions" + }, { "text": "Changelog", "link": "/guide/changelog" diff --git a/docs/.vitepress/vitepress/components/dev/VersionTag.vue b/docs/.vitepress/vitepress/components/dev/VersionTag.vue new file mode 100644 index 0000000000..8c30eb074e --- /dev/null +++ b/docs/.vitepress/vitepress/components/dev/VersionTag.vue @@ -0,0 +1,11 @@ + + + diff --git a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue b/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue index a80af62225..7ce15b3e39 100644 --- a/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue +++ b/docs/.vitepress/vitepress/components/sidebar/vp-sidebar-link.vue @@ -24,15 +24,7 @@ const route = useRoute() @click="$emit('close')" >

{{ item.text }}

- {{ item.promotion }} + diff --git a/docs/components.d.ts b/docs/components.d.ts index 8981b31c4c..2387a59edf 100644 --- a/docs/components.d.ts +++ b/docs/components.d.ts @@ -55,6 +55,7 @@ declare module '@vue/runtime-core' { ToggleButton: typeof import('./.vitepress/vitepress/components/icons/toggle-button.vue')['default'] ToggleSidebarBtn: typeof import('./.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue')['default'] TopNavigationExample: typeof import('./.vitepress/vitepress/components/nav/top-navigation-example.vue')['default'] + VersionTag: typeof import('./.vitepress/vitepress/components/dev/VersionTag.vue')['default'] VpApp: typeof import('./.vitepress/vitepress/components/vp-app.vue')['default'] VpChangelog: typeof import('./.vitepress/vitepress/components/globals/vp-changelog.vue')['default'] VpContent: typeof import('./.vitepress/vitepress/components/vp-content.vue')['default'] diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md index b5b636fe22..ec8ff3bcb4 100644 --- a/docs/en-US/component/button.md +++ b/docs/en-US/component/button.md @@ -85,7 +85,7 @@ button/size ::: -## Custom Color beta +## Custom Color You can custom button color. diff --git a/docs/en-US/component/table-v2.md b/docs/en-US/component/table-v2.md index 44a876e254..06210f42b0 100644 --- a/docs/en-US/component/table-v2.md +++ b/docs/en-US/component/table-v2.md @@ -3,7 +3,7 @@ title: Virtualized Table lang: en-US --- -# Virtualized Table Beta +# Virtualized Table Along with the evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For [Table V1](./table.md), with even just 1000 records of data, it can be very annoying when using it, because the poor performance. diff --git a/docs/en-US/guide/dark-mode.md b/docs/en-US/guide/dark-mode.md new file mode 100644 index 0000000000..0c9d0a767c --- /dev/null +++ b/docs/en-US/guide/dark-mode.md @@ -0,0 +1,84 @@ +--- +title: Dark Mode +lang: en-US +--- + +# Dark Mode + +After a long time, Element Plus supports dark mode! + +We extracted and unified all necessary variables to make it possible to implement based on CSS Vars. + +## How to enable it? + +First you can create a switch to toggle `dark` class of html. + +> If you only need dark mode, just add `dark` class for html. + +```html + + + + +``` + +> If you want to toggle it, i recommend [useDark | VueUse](https://vueuse.org/core/useDark/). + +Then, you can quickly enable it with just one line of code to import CSS in your entry. + +```ts +// main.ts +// if you just want to import css +import 'element-plus/theme-chalk/dark/css-vars.css' +``` + +> If you want an example, you can refer to [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter). + +## Custom variables + +### By CSS + +Just override it by CSS Vars. + +For example, new file `styles/dark/css-vars.css`: + +```css +html.dark { + /* custom dark bg color */ + --el-bg-color: #626aef; +} +``` + +Import it after styles of Element Plus: + +```ts +// main.ts +import 'element-plus/theme-chalk/dark/css-vars.css' +import './styles/dark/css-vars.css' +``` + +### By SCSS + +If you use scss, you can also import scss file to compile. + +> You can refer [Theming](./theming.md) to get more info. + +```scss +// styles/element/index.scss +/*just override what you need*/ +@forward 'element-plus/theme-chalk/src/dark/var.scss' with ( + $bg-color: ( + 'page': #0a0a0a, + '': #626aef, + 'overlay': #1d1e1f, + ) +); +``` + +```ts +// main.ts +import './styles/element/index.scss' + +// or just want to import scss? +// import 'element-plus/theme-chalk/src/dark/css-vars.scss' +``` diff --git a/packages/theme-chalk/gulpfile.ts b/packages/theme-chalk/gulpfile.ts index 34b186f36a..b3c3bce4fd 100644 --- a/packages/theme-chalk/gulpfile.ts +++ b/packages/theme-chalk/gulpfile.ts @@ -42,6 +42,27 @@ function buildThemeChalk() { .pipe(dest(distFolder)) } +/** + * Build dark Css Vars + * @returns + */ +function buildDarkCssVars() { + const sass = gulpSass(dartSass) + return src(path.resolve(__dirname, 'src/dark/css-vars.scss')) + .pipe(sass.sync()) + .pipe(autoprefixer({ cascade: false })) + .pipe( + cleanCSS({}, (details) => { + consola.success( + `${chalk.cyan(details.name)}: ${chalk.yellow( + details.stats.originalSize / 1000 + )} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB` + ) + }) + ) + .pipe(dest(`${distFolder}/dark`)) +} + /** * copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk */ @@ -61,7 +82,7 @@ export function copyThemeChalkSource() { export const build = parallel( copyThemeChalkSource, - series(buildThemeChalk, copyThemeChalkBundle) + series(buildThemeChalk, buildDarkCssVars, copyThemeChalkBundle) ) export default build