zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode style

Browse Source
This commit is contained in:
reco_luan 2020-03-16 10:44:43 +08:00
parent 3d93f9792e
commit cfc1497c12
4 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Mode/ModePicker.vue
View File

@ -33,25 +33,17 @@ export default {
const mode = localStorage.getItem('mode') const mode = localStorage.getItem('mode')
const { mode: customizeMode } = this.$themeConfig const { mode: customizeMode } = this.$themeConfig
this.currentMode = mode === null ? customizeMode === undefined ? 'auto' : customizeMode : mode this.currentMode = mode === null ? customizeMode === undefined ? 'auto' : customizeMode : mode
if (customizeMode === null) { activateMode(this.currentMode)
activateMode('light')
} else if (mode === 'dark') {
activateMode('dark')
} else if (mode === 'light') {
activateMode('light')
}
}, },
methods: { methods: {
selectMode (mode) { selectMode (mode) {
if (mode.mode === this.currentMode) { if (mode.mode === this.currentMode) {
return return
} else if (mode.mode === 'dark') {
activateMode('dark')
} else if (mode.mode === 'light') {
activateMode('light')
} else if (mode.mode === 'auto') { } else if (mode.mode === 'auto') {
setMode() setMode()
} else {
activateMode(mode.mode)
} }
localStorage.setItem('mode', mode.mode) localStorage.setItem('mode', mode.mode)
this.currentMode = mode.mode this.currentMode = mode.mode

4
components/Mode/modeOptions.js
View File

@ -29,10 +29,10 @@ const modeOptions = {
'--default-color-3': 'rgba(0, 0, 0, .3)', '--default-color-3': 'rgba(0, 0, 0, .3)',
'--default-color-2': 'rgba(0, 0, 0, .2)', '--default-color-2': 'rgba(0, 0, 0, .2)',
'--default-color-1': 'rgba(0, 0, 0, .1)', '--default-color-1': 'rgba(0, 0, 0, .1)',
'--background-color': '#25272a', '--background-color': '#202124',
'--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)', '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
'--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)', '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
'--text-color': '#aaa', '--text-color': '#fff',
'--border-color': 'rgba(0, 0, 0, .3)', '--border-color': 'rgba(0, 0, 0, .3)',
'--code-color': 'rgba(0, 0, 0, .3)', '--code-color': 'rgba(0, 0, 0, .3)',
'--mask-color': '#000' '--mask-color': '#000'

5
components/Page.vue
View File

@ -91,7 +91,6 @@ export default {
computed: { computed: {
showAccessNumber () { showAccessNumber () {
console.log(this)
return this.$themeConfig.commentsSolution === 'valine' return this.$themeConfig.commentsSolution === 'valine'
}, },
lastUpdated () { lastUpdated () {
@ -232,14 +231,14 @@ function flatten (items, res) {
.edit-link .edit-link
display inline-block display inline-block
a a
color lighten($textColor, 25%) color $accentColor
margin-right 0.25rem margin-right 0.25rem
.last-updated .last-updated
float right float right
font-size 0.9em font-size 0.9em
.prefix .prefix
font-weight 500 font-weight 500
color lighten($textColor, 25%) color $accentColor
.time .time
font-weight 400 font-weight 400
color #aaa color #aaa

4
styles/palette.styl
View File

@ -26,7 +26,7 @@ $lineNumbersWrapperWidth = 2.5rem
$textColorSub = #888 $textColorSub = #888
$backgroundColor ?= #fff $backgroundColor ?= #fff
$backgroundColorDark ?= #25272a $backgroundColorDark ?= #202124
$boxShadow = 0 1px 6px 0 $darkColor2 $boxShadow = 0 1px 6px 0 $darkColor2
$boxShadowHover = 0 2px 16px 0 $darkColor2 $boxShadowHover = 0 2px 16px 0 $darkColor2
@ -34,7 +34,7 @@ $boxShadowDark = 0 1px 6px 0 $darkColor6
$boxShadowHoverDark = 0 2px 16px 0 $darkColor6 $boxShadowHoverDark = 0 2px 16px 0 $darkColor6
$textColor ?= #2c3e50 $textColor ?= #2c3e50
$textColorDark ?= #aaa $textColorDark ?= #fff
$borderColor ?= #eaecef $borderColor ?= #eaecef
$borderColorDark ?= $darkColor3 $borderColorDark ?= $darkColor3