From 70e320f8ce66847fd04216a2fb06a4a7dc6f4849 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Wed, 18 Mar 2020 21:32:29 +0800 Subject: [PATCH 1/4] feat: support darkmode --- packages/@vuepress/plugin-darkmode/.npmignore | 2 + .../plugin-darkmode/DarkmodeSwitch.vue | 195 ++++++++++++++++++ packages/@vuepress/plugin-darkmode/README.md | 3 + .../plugin-darkmode/enhanceAppFile.js | 7 + packages/@vuepress/plugin-darkmode/index.js | 5 + .../@vuepress/plugin-darkmode/package.json | 25 +++ .../plugin-darkmode/styles/config.styl | 21 ++ .../plugin-darkmode/styles/index.styl | 10 + .../plugin-darkmode/styles/layout/base.styl | 12 ++ .../plugin-darkmode/styles/layout/home.styl | 9 + .../plugin-darkmode/styles/layout/index.styl | 4 + .../plugin-darkmode/styles/layout/navbar.styl | 38 ++++ .../styles/layout/sidebar.styl | 20 ++ .../plugin-darkmode/styles/markdown.styl | 23 +++ .../plugin-darkmode/styles/plugins/pwa.styl | 8 + .../theme-default/components/Navbar.vue | 5 + packages/@vuepress/theme-default/index.js | 2 + packages/@vuepress/theme-default/package.json | 1 + packages/docs/docs/.vuepress/config.js | 1 + .../docs/docs/theme/default-theme-config.md | 17 +- .../docs/zh/theme/default-theme-config.md | 15 +- 21 files changed, 420 insertions(+), 3 deletions(-) create mode 100644 packages/@vuepress/plugin-darkmode/.npmignore create mode 100644 packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue create mode 100644 packages/@vuepress/plugin-darkmode/README.md create mode 100644 packages/@vuepress/plugin-darkmode/enhanceAppFile.js create mode 100644 packages/@vuepress/plugin-darkmode/index.js create mode 100644 packages/@vuepress/plugin-darkmode/package.json create mode 100644 packages/@vuepress/plugin-darkmode/styles/config.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/index.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/layout/base.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/layout/home.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/layout/index.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/layout/navbar.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/layout/sidebar.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/markdown.styl create mode 100644 packages/@vuepress/plugin-darkmode/styles/plugins/pwa.styl diff --git a/packages/@vuepress/plugin-darkmode/.npmignore b/packages/@vuepress/plugin-darkmode/.npmignore new file mode 100644 index 0000000000..18f0a334a4 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/.npmignore @@ -0,0 +1,2 @@ +__tests__ +__mocks__ \ No newline at end of file diff --git a/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue b/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue new file mode 100644 index 0000000000..21c7b6d19c --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue @@ -0,0 +1,195 @@ + + + + + diff --git a/packages/@vuepress/plugin-darkmode/README.md b/packages/@vuepress/plugin-darkmode/README.md new file mode 100644 index 0000000000..f29925a2ae --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/README.md @@ -0,0 +1,3 @@ +# @vuepress/plugin-darkmode + +> darkmode plugin for vuepress diff --git a/packages/@vuepress/plugin-darkmode/enhanceAppFile.js b/packages/@vuepress/plugin-darkmode/enhanceAppFile.js new file mode 100644 index 0000000000..4146108201 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/enhanceAppFile.js @@ -0,0 +1,7 @@ +import DarkmodeSwitch from './DarkmodeSwitch.vue' +import './styles/index.styl' + +export default ({ Vue }) => { + // eslint-disable-next-line vue/match-component-file-name + Vue.component('DarkmodeSwitch', DarkmodeSwitch) +} diff --git a/packages/@vuepress/plugin-darkmode/index.js b/packages/@vuepress/plugin-darkmode/index.js new file mode 100644 index 0000000000..f95e2bd099 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/index.js @@ -0,0 +1,5 @@ +const { path } = require('@vuepress/shared-utils') + +module.exports = { + enhanceAppFiles: path.resolve(__dirname, 'enhanceAppFile.js') +} diff --git a/packages/@vuepress/plugin-darkmode/package.json b/packages/@vuepress/plugin-darkmode/package.json new file mode 100644 index 0000000000..44abcc121a --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/package.json @@ -0,0 +1,25 @@ +{ + "name": "@vuepress/plugin-darkmode", + "version": "1.4.0", + "description": "darkmode plugin for vuepress", + "keywords": [ + "documentation", + "generator", + "vue", + "vuepress" + ], + "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/plugin-darkmode#readme", + "bugs": { + "url": "https://github.com/vuejs/vuepress/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/vuepress.git" + }, + "license": "MIT", + "author": "Mr.Hope ", + "main": "index.js", + "publishConfig": { + "access": "public" + } +} \ No newline at end of file diff --git a/packages/@vuepress/plugin-darkmode/styles/config.styl b/packages/@vuepress/plugin-darkmode/styles/config.styl new file mode 100644 index 0000000000..66fe95ef00 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/config.styl @@ -0,0 +1,21 @@ +$night-bgcolor = #000 +$night-fontcolor = #9e9e9e +$night-bordercolor = #9e9e9e +$night-activecolor = #fff +$contentClass ?= '.theme-default-content' + +bgcolor() + background-color $night-bgcolor + +fontcolor() + color $night-fontcolor + +bordercolor() + border-color $night-bordercolor !important + +boxshadow() + border 1px solid $night-bordercolor + box-shadow none + + &:hover + box-shadow 0 2px 16px 0 rgba(255, 255, 255, 0.4) diff --git a/packages/@vuepress/plugin-darkmode/styles/index.styl b/packages/@vuepress/plugin-darkmode/styles/index.styl new file mode 100644 index 0000000000..e7a5479c52 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/index.styl @@ -0,0 +1,10 @@ +@require './config' + +.theme-night + bgcolor() + fontcolor() + bordercolor() + +@require './layout/index' +@require './markdown' +@require './plugins/pwa' diff --git a/packages/@vuepress/plugin-darkmode/styles/layout/base.styl b/packages/@vuepress/plugin-darkmode/styles/layout/base.styl new file mode 100644 index 0000000000..ad4a81ce7a --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/base.styl @@ -0,0 +1,12 @@ +.theme-night + // 表格 + tr:nth-child(2n) + background-color #1b1a18 + + blockquote + border-color #666 + + {$contentClass} + code + color #999 + background-color #333 diff --git a/packages/@vuepress/plugin-darkmode/styles/layout/home.styl b/packages/@vuepress/plugin-darkmode/styles/layout/home.styl new file mode 100644 index 0000000000..3561d66b6d --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/home.styl @@ -0,0 +1,9 @@ +.theme-night + // 主页 + .home + .hero .description + fontcolor() + + .feature + h2, p + fontcolor() diff --git a/packages/@vuepress/plugin-darkmode/styles/layout/index.styl b/packages/@vuepress/plugin-darkmode/styles/layout/index.styl new file mode 100644 index 0000000000..45216135f6 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/index.styl @@ -0,0 +1,4 @@ +@require './base' +@require './home' +@require './navbar' +@require './sidebar' diff --git a/packages/@vuepress/plugin-darkmode/styles/layout/navbar.styl b/packages/@vuepress/plugin-darkmode/styles/layout/navbar.styl new file mode 100644 index 0000000000..2460a5971c --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/navbar.styl @@ -0,0 +1,38 @@ +.theme-night + // 导航栏 + .navbar + bgcolor() + box-shadow 0 1px 6px 0 rgba(223, 222, 219, 0.28) + border-bottom 1px solid $night-bordercolor + + .site-name, .links + bgcolor() + fontcolor() + + .nav-links a + fontcolor() + + // 导航栏下拉菜单 + @media (min-width: $MQMobile) + .dropdown-wrapper .nav-dropdown + bgcolor() + box-shadow 0 1px 6px 0 rgba(223, 222, 219, 0.28) + border 1px solid $night-bordercolor !important + + // 下拉列表 + .dropdown-wrapper .dropdown-title .title + fontcolor() + + // 搜索框 + .search-box + input + background-color #000 !important + + &:focus + border-color #9e9e9e + + .suggestions + background-color #000 + + .suggestion.focused + background-color #0c0b0a diff --git a/packages/@vuepress/plugin-darkmode/styles/layout/sidebar.styl b/packages/@vuepress/plugin-darkmode/styles/layout/sidebar.styl new file mode 100644 index 0000000000..23b17e293e --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/sidebar.styl @@ -0,0 +1,20 @@ +.theme-night + // 侧边栏 + .sidebar + bgcolor() + bordercolor() + + .nav-links a + fontcolor() + + .sidebar-heading + color $night-fontcolor + + // 侧边栏链接 + a.sidebar-link + fontcolor() + + @media (min-width: $MQMobile) + .nav-links a + &:hover, &.router-link-active + color $accentColor diff --git a/packages/@vuepress/plugin-darkmode/styles/markdown.styl b/packages/@vuepress/plugin-darkmode/styles/markdown.styl new file mode 100644 index 0000000000..7b3f6a0be4 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/markdown.styl @@ -0,0 +1,23 @@ +.theme-night + // 提示框 + .custom-block + &.tip, &.warning, &.danger, &.details + background-color lighten($night-bgcolor, 15%) + + a + color $accentColor + + &.warning + color darken(#ffe564, 50%) + + .custom-block-title + color darken(#ffe564, 40%) + + &.danger + color darken(red, 30%) + + .custom-block-title + color darken(red, 20%) + + &.details + fontcolor() diff --git a/packages/@vuepress/plugin-darkmode/styles/plugins/pwa.styl b/packages/@vuepress/plugin-darkmode/styles/plugins/pwa.styl new file mode 100644 index 0000000000..c18ca6187b --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/plugins/pwa.styl @@ -0,0 +1,8 @@ +.theme-night + // pwa + .sw-update-popup + background-color $night-bgcolor !important + color $night-fontcolor !important + box-shadow none + border 1px solid + bordercolor() diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue index f8dd49ca68..d7b9955d73 100644 --- a/packages/@vuepress/theme-default/components/Navbar.vue +++ b/packages/@vuepress/theme-default/components/Navbar.vue @@ -26,6 +26,7 @@ 'max-width': linksWrapMaxWidth + 'px' } : {}" > + { .some(base => themeConfig.locales[base].algolia) ) + const enableDarkmode = themeConfig.darkmode === true const enableSmoothScroll = themeConfig.smoothScroll === true return { @@ -53,6 +54,7 @@ module.exports = (options, ctx) => { before: info => `
${info ? `${info}` : ''}\n`, after: () => '
\n' }], + ['@vuepress/darkmode', enableDarkmode], ['smooth-scroll', enableSmoothScroll] ] } diff --git a/packages/@vuepress/theme-default/package.json b/packages/@vuepress/theme-default/package.json index a224d9470f..abbd371f72 100644 --- a/packages/@vuepress/theme-default/package.json +++ b/packages/@vuepress/theme-default/package.json @@ -22,6 +22,7 @@ "main": "index.js", "dependencies": { "@vuepress/plugin-active-header-links": "^1.4.0", + "@vuepress/plugin-darkmode": "^1.4.0", "@vuepress/plugin-nprogress": "^1.4.0", "@vuepress/plugin-search": "^1.4.0", "docsearch.js": "^2.5.2", diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js index 950f0f72eb..0492c68c15 100755 --- a/packages/docs/docs/.vuepress/config.js +++ b/packages/docs/docs/.vuepress/config.js @@ -35,6 +35,7 @@ module.exports = ctx => ({ apiKey: '3a539aab83105f01761a137c61004d85', indexName: 'vuepress' }) : null, + darkmode: true, smoothScroll: true, locales: { '/': { diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index b335c3261d..1c7679e35d 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -350,6 +350,7 @@ module.exports = { ``` You can also disable the built-in search box for individual pages with `YAML front matter`: + ```yaml --- search: false @@ -362,7 +363,7 @@ Built-in Search only builds index from the title, `h2` and `h3` headers and any ```yaml --- -tags: +tags: - configuration - theme - indexing @@ -420,7 +421,6 @@ Note that it’s `off` by default. If given a `string`, it will be displayed as Since `lastUpdated` is based on `git`, you can only use it in a `git` repository. Also, since the timestamp used comes from the git commit, it will display only after a first commit for a given page, and update only on ensuing commits of that page. ::: - **Also see:** - [@vuepress/plugin-last-updated](../plugin/official/plugin-last-updated.md) @@ -505,6 +505,19 @@ module.exports = { } ``` +## Darkmode + +The `themeConfig.darkmode` option allows you to enable darkmode. + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + darkmode: true + } +} +``` + ## Custom Page Class Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`: diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index 8365295dce..81f5977ba5 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -66,6 +66,7 @@ module.exports = { ``` + 外部链接 `` 标签的特性将默认包含`target="_blank" rel="noopener noreferrer"`，你可以提供 `target` 与 `rel`，它们将被作为特性被增加到 `` 标签上： ``` js @@ -197,7 +198,6 @@ module.exports = { 值得一提的是，当你禁用此选项时，此功能的相应脚本将不会被加载，这是我们性能优化的一个小点。 ::: - ### 侧边栏分组 你可以通过使用**对象**来将侧边栏划分成多个组： @@ -478,6 +478,19 @@ module.exports = { } ``` +## 暗黑模式 + +你可以通过 `themeConfig.darkmode` 选项来启用暗黑模式。 + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + darkmode: true + } +} +``` + ## 自定义页面类 有时候你可能需要为特定页面添加一个 CSS 类名，以方便针对该页面添加一些专门的 CSS。这种情况下你可以在该页面的 YAML front matter 中声明一个 `pageClass`： From e05c32d8e2331be1d645348f808d8c50cff78bc7 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Wed, 18 Mar 2020 21:42:01 +0800 Subject: [PATCH 2/4] feat($theme-vue): fitter darkmode --- packages/@vuepress/theme-vue/styles/index.styl | 5 +++++ packages/docs/docs/.vuepress/styles/index.styl | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 packages/@vuepress/theme-vue/styles/index.styl diff --git a/packages/@vuepress/theme-vue/styles/index.styl b/packages/@vuepress/theme-vue/styles/index.styl new file mode 100644 index 0000000000..b8523ab061 --- /dev/null +++ b/packages/@vuepress/theme-vue/styles/index.styl @@ -0,0 +1,5 @@ +.theme-night + .bsa-cpc + background-color #070707 + a._default_ + color #999 diff --git a/packages/docs/docs/.vuepress/styles/index.styl b/packages/docs/docs/.vuepress/styles/index.styl index 596a926f1d..8cb15d0918 100644 --- a/packages/docs/docs/.vuepress/styles/index.styl +++ b/packages/docs/docs/.vuepress/styles/index.styl @@ -22,3 +22,7 @@ pre.vue-container color #808080 font-weight light + +.theme-night + .bit-sponsor + background-color #0c0907 \ No newline at end of file From ff5f2e367ef2ddee2945ba3c220ee3333a925d21 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Sun, 22 Mar 2020 11:28:27 +0800 Subject: [PATCH 3/4] feat($plugin-darkmode): improve style color --- .../plugin-darkmode/DarkmodeSwitch.vue | 56 +++++++++++-------- .../plugin-darkmode/styles/config.styl | 22 +++----- .../plugin-darkmode/styles/index.styl | 2 +- .../plugin-darkmode/styles/layout/base.styl | 2 +- .../plugin-darkmode/styles/layout/home.styl | 2 +- .../plugin-darkmode/styles/layout/navbar.styl | 23 +++++--- .../styles/layout/sidebar.styl | 7 +-- .../plugin-darkmode/styles/markdown.styl | 4 +- .../plugin-darkmode/styles/plugins/pwa.styl | 2 +- .../@vuepress/theme-vue/styles/index.styl | 2 +- .../docs/docs/.vuepress/styles/index.styl | 2 +- 11 files changed, 63 insertions(+), 61 deletions(-) diff --git a/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue b/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue index 21c7b6d19c..8582900a6d 100644 --- a/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue +++ b/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue @@ -1,15 +1,15 @@