feat: darkmode (close #1865) #2232
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| __tests__ | ||
| __mocks__ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <template> | ||
| <div | ||
| class="darkmode-switch" | ||
| @click="toggleDarkmode" | ||
| > | ||
| <div | ||
| class="item day" | ||
| :class="{active: !isDarkmode}" | ||
| > | ||
| <svg | ||
| class="icon" | ||
| viewBox="0 0 1024 1024" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M512 256a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v85.333333a42.666667 42.666667 0 0 0 42.666667 42.666667zM896 469.333333h-85.333333a42.666667 42.666667 0 0 0 0 85.333334h85.333333a42.666667 42.666667 0 0 0 0-85.333334zM256 512a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0 0 85.333334h85.333333a42.666667 42.666667 0 0 0 42.666667-42.666667zM265.386667 213.333333a42.666667 42.666667 0 0 0-59.306667 62.72l61.44 59.306667a42.666667 42.666667 0 0 0 31.146667 11.946667 42.666667 42.666667 0 0 0 30.72-13.226667 42.666667 42.666667 0 0 0 0-60.16zM725.333333 347.306667a42.666667 42.666667 0 0 0 29.44-11.946667l61.44-59.306667A42.666667 42.666667 0 0 0 758.613333 213.333333l-61.44 60.586667a42.666667 42.666667 0 0 0 0 60.16 42.666667 42.666667 0 0 0 28.16 13.226667zM512 768a42.666667 42.666667 0 0 0-42.666667 42.666667v85.333333a42.666667 42.666667 0 0 0 85.333334 0v-85.333333a42.666667 42.666667 0 0 0-42.666667-42.666667zM756.48 688.64a42.666667 42.666667 0 0 0-59.306667 61.44L758.613333 810.666667a42.666667 42.666667 0 0 0 29.44 11.946666 42.666667 42.666667 0 0 0 30.72-12.8 42.666667 42.666667 0 0 0 0-60.586666zM267.52 688.64l-61.44 59.306667a42.666667 42.666667 0 0 0 0 60.586666 42.666667 42.666667 0 0 0 30.72 12.8 42.666667 42.666667 0 0 0 28.586667-10.666666l61.44-59.306667a42.666667 42.666667 0 0 0-59.306667-61.44zM512 341.333333a170.666667 170.666667 0 1 0 170.666667 170.666667 170.666667 170.666667 0 0 0-170.666667-170.666667z" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| <div | ||
| class="item night" | ||
| :class="{ active: isDarkmode }" | ||
| > | ||
| <svg | ||
| class="icon" | ||
| viewBox="0 0 1024 1024" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M935.538601 630.40178c-11.43005-11.432249-28.673759-14.738607-43.531086-8.353536-46.733115 20.10317-96.362866 30.296859-147.50719 30.296859-99.589478 0-193.221796-38.783705-263.640252-109.20316-108.636744-108.636744-139.609745-270.022125-78.9083-411.148441 6.388069-14.85233 3.078713-32.098837-8.353536-43.532285-11.432249-11.432249-28.675758-14.743604-43.532285-8.354536-52.637312 22.64025-100.017388 54.809439-140.82552 95.616372-85.346135 85.346135-132.346869 198.821199-132.346869 319.519766 0 120.699566 47.001733 234.172631 132.347868 319.518766s198.821199 132.349067 319.517567 132.349067c120.699566 0 234.172431-47.002932 319.520765-132.351066 40.808132-40.810131 72.977122-88.190207 95.615373-140.82552C950.282205 659.081735 946.971849 641.834029 935.538601 630.40178z" | ||
| p-id="3638" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data: () => ({ | ||
| isDarkmode: { type: Boolean, default: false } | ||
| }), | ||
|
|
||
| mounted () { | ||
| const darkmode = localStorage.getItem('darkmode') | ||
| const classes = document.body.classList | ||
|
|
||
| this.isDarkmode = darkmode === 'true' | ||
| if (darkmode === 'true') { | ||
| classes.add('theme-dark') | ||
| } else { | ||
| classes.add('theme-light') | ||
| } | ||
| }, | ||
|
|
||
| methods: { | ||
| toggleDarkmode () { | ||
| this.isDarkmode = !this.isDarkmode | ||
|
|
||
| const classes = document.body.classList | ||
| const changeClass = (domClass, insert, remove) => { | ||
| domClass.remove(...remove) | ||
| const oldClasses = [...domClass] | ||
| domClass.value = '' | ||
| domClass.add(...insert, ...oldClasses) | ||
| } | ||
|
|
||
| if (this.isDarkmode) { | ||
| changeClass(classes, ['theme-dark'], ['theme-light']) | ||
| } else { | ||
| changeClass(classes, ['theme-light'], ['theme-dark']) | ||
| } | ||
|
|
||
| localStorage.setItem('darkmode', String(this.isDarkmode)) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="stylus" scoped> | ||
| .darkmode-switch | ||
| display flex | ||
| flex-shrink 0 | ||
| border-radius 4px | ||
| overflow hidden | ||
| align-self center | ||
| margin-right 0.5rem | ||
| height 22px | ||
|
|
||
| &:hover | ||
| cursor pointer | ||
|
|
||
| .item | ||
| padding 3px | ||
| line-height 1 | ||
| border 1px solid $accentColor | ||
|
|
||
| &.day | ||
| border-top-left-radius 4px | ||
| border-bottom-left-radius 4px | ||
|
|
||
| &.night | ||
| border-top-right-radius 4px | ||
| border-bottom-right-radius 4px | ||
|
|
||
| .icon | ||
| width 14px | ||
| height 14px | ||
| fill $accentColor | ||
|
|
||
| &.active | ||
| background-color $accentColor | ||
|
|
||
| &:hover | ||
| cursor default | ||
|
|
||
| .icon | ||
| fill #fff | ||
| </style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # @vuepress/plugin-darkmode | ||
|
|
||
| > darkmode plugin for vuepress |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const { path } = require('@vuepress/shared-utils') | ||
|
|
||
| module.exports = { | ||
| enhanceAppFiles: path.resolve(__dirname, 'enhanceAppFile.js') | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <zhangbowang1998@gmail.com>", | ||
| "main": "index.js", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| $nightBgcolor ?= #1e1e1e | ||
| $nightFontcolor ?= #9e9e9e | ||
| $nightBordercolor ?= #151310 | ||
| $contentClass = '.theme-default-content' | ||
|
There was a problem hiding this comment.
Yes There was a problem hiding this comment. Well, I was asking why not use There was a problem hiding this comment.
The default theme is using = instead of ?= There was a problem hiding this comment. BTW, it's already a pre-defined value in theme default |
||
|
|
||
| bgcolor() | ||
| background-color $nightBgcolor | ||
|
|
||
| fontcolor() | ||
| color $nightFontcolor | ||
|
|
||
| bordercolor() | ||
| border-color $nightBordercolor | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @require './config' | ||
|
|
||
| .theme-dark | ||
| bgcolor() | ||
| fontcolor() | ||
| bordercolor() | ||
|
|
||
| @require './layout/index' | ||
| @require './markdown' | ||
| @require './plugins/pwa' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| .theme-dark | ||
| // 表格 | ||
| tr:nth-child(2n) | ||
| background-color #1b1a18 | ||
|
|
||
| blockquote | ||
| border-color #666 | ||
|
|
||
| {$contentClass} | ||
| code | ||
| color #999 | ||
| background-color #333 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .theme-dark | ||
| // 主页 | ||
|
|
||
| .home | ||
| .hero .description | ||
| fontcolor() | ||
|
|
||
| .feature | ||
| h2, p | ||
| fontcolor() | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| @require './base' | ||
| @require './home' | ||
| @require './navbar' | ||
| @require './sidebar' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .theme-dark | ||
| // 侧边栏 | ||
| .sidebar | ||
| bgcolor() | ||
| bordercolor() | ||
|
|
||
| .nav-links a | ||
| fontcolor() | ||
|
|
||
| .sidebar-heading | ||
| color $night-fontcolor | ||
|
|
||
| // 侧边栏链接 | ||
| a.sidebar-link | ||
| fontcolor() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .theme-dark | ||
| .bsa-cpc | ||
| background-color #070707 | ||
| a._default_ | ||
| color #999 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's this for? It looks like
propsstyle