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..4a130e1225 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/DarkmodeSwitch.vue @@ -0,0 +1,119 @@ + + + + + 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..9982a05a0b --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/config.styl @@ -0,0 +1,13 @@ +$nightBgcolor ?= #1e1e1e +$nightFontcolor ?= #9e9e9e +$nightBordercolor ?= #151310 +$contentClass = '.theme-default-content' + +bgcolor() + background-color $nightBgcolor + +fontcolor() + color $nightFontcolor + +bordercolor() + border-color $nightBordercolor diff --git a/packages/@vuepress/plugin-darkmode/styles/index.styl b/packages/@vuepress/plugin-darkmode/styles/index.styl new file mode 100644 index 0000000000..0f978447da --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/index.styl @@ -0,0 +1,10 @@ +@require './config' + +.theme-dark + 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..e970a055bf --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/base.styl @@ -0,0 +1,12 @@ +.theme-dark + // 表格 + 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..40a6ef0e80 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/home.styl @@ -0,0 +1,9 @@ +.theme-dark + // 主页 + .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..7473e79751 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/navbar.styl @@ -0,0 +1,45 @@ +.theme-dark + // 导航栏 + .navbar + bgcolor() + border-bottom 1px solid $nightBordercolor + + .site-name, .links + bgcolor() + fontcolor() + + .nav-links a + fontcolor() + + @media (min-width: $MQMobile) + &:hover, &.router-link-active + borderColor() + + @media (min-width: $MQMobile) + .dropdown-wrapper .nav-dropdown + bgcolor() + border 1px solid $nightBordercolor !important + + // 下拉列表 + .dropdown-wrapper .dropdown-title .title + fontcolor() + + // 搜索框 + .search-box + input + fontcolor() + background-color $nightBgcolor !important + + @media (min-width: $MQNarrow) + bordercolor() + background-color lighten($nightBgcolor, 10%) !important + + &:focus + background-color lighten($nightBgcolor, 10%) !important + border-color $accentColor + + .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..5d58bd8bd2 --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/layout/sidebar.styl @@ -0,0 +1,15 @@ +.theme-dark + // 侧边栏 + .sidebar + bgcolor() + bordercolor() + + .nav-links a + fontcolor() + + .sidebar-heading + color $night-fontcolor + + // 侧边栏链接 + a.sidebar-link + fontcolor() diff --git a/packages/@vuepress/plugin-darkmode/styles/markdown.styl b/packages/@vuepress/plugin-darkmode/styles/markdown.styl new file mode 100644 index 0000000000..985174de5a --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/markdown.styl @@ -0,0 +1,23 @@ +.theme-dark + // 提示框 + .custom-block + &.tip, &.warning, &.danger, &.details + background-color lighten($nightBgcolor, 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..f4a14fc25d --- /dev/null +++ b/packages/@vuepress/plugin-darkmode/styles/plugins/pwa.styl @@ -0,0 +1,8 @@ +.theme-dark + // 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/@vuepress/theme-vue/styles/index.styl b/packages/@vuepress/theme-vue/styles/index.styl new file mode 100644 index 0000000000..19c9993ddd --- /dev/null +++ b/packages/@vuepress/theme-vue/styles/index.styl @@ -0,0 +1,5 @@ +.theme-dark + .bsa-cpc + background-color #070707 + a._default_ + color #999 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/.vuepress/styles/index.styl b/packages/docs/docs/.vuepress/styles/index.styl index 596a926f1d..e2b82d5f93 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-dark + .bit-sponsor + background-color #0c0907 \ No newline at end of file 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`：