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

feat: add dark mode(part.5)

Browse Source
This commit is contained in:
reco_luan 2019-11-30 19:32:43 +08:00
parent 90e9fb328b
commit 395b969501
15 changed files with 77 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/AlgoliaSearchBox.vue
View File

@ -4,6 +4,7 @@
class="algolia-search-wrapper search-box"
role="search"
>
<i class="iconfont reco-search"></i>
<input
id="algolia-search-input"
class="search-query"
@ -77,7 +78,7 @@ export default {
.algolia-autocomplete
line-height normal
.ds-dropdown-menu
background-color #fff
background-color var(--background-color)
border-radius $borderRadius
font-size 15px
margin 6px 0 0
@ -87,16 +88,17 @@ export default {
&:before
display none
[class*=ds-dataset-]
background-color var(--background-color)
border none
padding 0
.ds-suggestions
margin-top 0
.ds-suggestion
border-bottom 1px solid $borderColor
border-bottom 1px solid var(--border-color)
.algolia-docsearch-suggestion--highlight
color #2c815b
color $accentColor
.algolia-docsearch-suggestion
border-color $borderColor
border-color var(--border-color)
padding 0
.algolia-docsearch-suggestion--category-header
padding 5px 10px
@ -107,22 +109,24 @@ export default {
.algolia-docsearch-suggestion--highlight
background rgba(255, 255, 255, 0.6)
.algolia-docsearch-suggestion--wrapper
background var(--background-color)
padding 0
.algolia-docsearch-suggestion--title
font-weight 600
margin-bottom 0
color $textColor
color var(--text-color)
.algolia-docsearch-suggestion--subcategory-column
vertical-align top
padding 5px 7px 5px 5px
border-color $borderColor
background #f1f3f5
border-color var(--border-color)
background var(--background-color)
&:after
display none
.algolia-docsearch-suggestion--subcategory-column-text
color #555
color var(--text-color)
.algolia-docsearch-footer
border-color $borderColor
border-color var(--border-color)
background var(--background-color)
.ds-cursor .algolia-docsearch-suggestion--content
background-color #e7edf3 !important
color $textColor
@ -153,7 +157,7 @@ export default {
padding 5px 7px 5px 5px !important
.algolia-docsearch-suggestion--subcategory-column
padding 0 !important
background white !important
background var(--border-color) !important
.algolia-docsearch-suggestion--subcategory-column-text:after
content " > "
font-size 10px

3
components/Common.vue
View File

@ -255,7 +255,6 @@ export default {
left 0
right 0
margin auto
background #fff
.password-wrapper-out
position absolute
z-index 21
@ -264,7 +263,6 @@ export default {
left 0
right 0
margin auto
background #fff
.password-wrapper-in
position absolute
z-index 8
@ -273,7 +271,6 @@ export default {
left 0
right 0
margin auto
background #fff
.hide
height 100vh
overflow hidden

2
components/DropdownLink.vue
View File

@ -98,7 +98,7 @@ export default {
line-height 1.7rem
h4
margin 0.45rem 0 0
border-top 1px solid #eee
border-top 1px solid var(--border-color)
padding 0.45rem 1.5rem 0 1.25rem
.dropdown-subitem-wrapper
padding 0

6
components/Mode/modeOptions.js
View File

@ -5,7 +5,8 @@ const modeOptions = {
'--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, 0.2)',
'--text-color': '#2c3e50',
'--border-color': '#eaecef',
'--bgm-bg-color': 'rgba(255, 255, 255, .7)'
'--bgm-bg-color': 'rgba(255, 255, 255, .7)',
'--code-color': 'rgba(27, 31, 35, 0.05)'
},
dark: {
'--background-color': '#25272a',
@ -13,7 +14,8 @@ const modeOptions = {
'--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
'--text-color': '#aaa',
'--border-color': 'rgba(0, 0, 0, .3)',
'--bgm-bg-color': 'rgba(0, 0, 0, .7)'
'--bgm-bg-color': 'rgba(0, 0, 0, .7)',
'--code-color': 'rgba(0, 0, 0, .3)'
}
}

4
components/Navbar.vue
View File

@ -23,7 +23,6 @@
} : {}">
<Mode />
<Screenfull class="screenfull" />
<AlgoliaSearchBox
v-if="isAlgoliaSearch"
:options="algolia"/>
@ -117,9 +116,6 @@ $navbar-horizontal-padding = 1.5rem
.search-box
flex: 0 0 auto
vertical-align top
.screenfull
margin-top .4rem
height 1.6rem
margin-right 1rem
@media (max-width: $MQMobile)

2
components/Page.vue
View File

@ -260,7 +260,7 @@ function flatten (items, res) {
.inner
min-height 2rem
margin-top 0
border-top 1px solid $borderColor
border-top 1px solid var(--border-color)
padding-top 1rem
overflow auto // clear float
.next

56
components/Password.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="password-shadow" :class="{'is-home': !isPage}">
<h3 class="title">{{isPage ? $frontmatter.title : $site.title}}</h3>
<p class="description" v-if="!isPage">{{$site.description}}</p>
<h3 class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
<p class="description" v-if="!isPage">{{$site.description || $localeConfig.description}}</p>
<label class="inputBox" id="box">
<input
v-model="key"
@ -109,51 +109,47 @@ export default {
}
.password-shadow {
position relative
width 100vw;
height 100vh;
overflow hidden
position relative
padding-left: 20rem;
// background-image: radial-gradient(ellipse farthest-corner at center top,#497EC6 0,#000105 100%);
background #fff
background var(--background-color)
box-sizing border-box
.title {
position: absolute;
left 0
right 0
top 12%
margin auto
margin 8rem auto 6rem
width 100%
text-align center
color $textColor
font-size 30px
box-sizing: border-box;
padding: 0 10px;
// padding: 0 10px;
text-shadow $textShadow
color $textColor
color var(--text-color)
}
.description {
position: absolute;
left 0
right 0
top 20%
margin auto
text-align center
color $textColor
color var(--text-color)
font-size 22px
box-sizing: border-box;
padding: 0 10px;
text-shadow $textShadow
}
.inputBox{
position relative
display block
max-width:700px;
height: 100px;
background: $accentColor;
border-radius: $borderRadius
position: absolute;
left 0
right 0
top 36%
margin auto
margin 2rem auto 0
padding-left 20px
box-sizing border-box
opacity 0.9
overflow hidden
input{
width:600px;
height:100%;
@ -202,11 +198,11 @@ export default {
border-radius: $borderRadius
position: absolute;
border 1px solid $accentColor
background var(--background-color)
right:1px;
top 1px
border:0;
padding:0;
background: #fff;
color: $accentColor;
font-size:18px;
outline:none;
@ -221,7 +217,6 @@ export default {
left 0
right 0
bottom 10%
margin auto
padding: 2.5rem;
text-align: center;
color: lighten($textColor, 25%);
@ -242,8 +237,8 @@ export default {
left 0
right 0
top 43%
margin auto
padding-left 16.4rem
margin auto 20px
padding-left 0
box-sizing border-box
opacity 0.9
input{
@ -307,11 +302,18 @@ export default {
z-index: 1;
}
}
.footer {
margin-left 0
}
}
@media (max-width: $MQNarrow) {
.inputBox{
padding-left $mobileSidebarWidth
}
// .inputBox{
// padding-left $mobileSidebarWidth
// }
.footer {
margin-left 0
}
}
}

2
components/SearchBox.vue
View File

@ -174,7 +174,7 @@ export default {
height: 2rem
color lighten($textColor, 25%)
display inline-block
border 1px solid $accentColor
border 1px solid var(--border-color)
border-radius $borderRadius
font-size 0.9rem
line-height 2rem

1
index.js
View File

@ -23,7 +23,6 @@ module.exports = (options, ctx) => ({
'@vuepress-reco/extract-code',
'@vuepress-reco/loading-page',
'@vuepress-reco/pagation',
'@vuepress-reco/screenfull',
'@vuepress-reco/comments',
'@vuepress/active-header-links',
['@vuepress/medium-zoom', {

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vuepress-theme-reco",
"version": "1.1.2",
"version": "1.2.0-alpha.2",
"description": "A simple and beautiful vuepress Blog & Doc theme.",
"main": "index.js",
"scripts": {
@ -29,7 +29,7 @@
"dependencies": {
"@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.5",
"@vuepress-reco/vuepress-plugin-extract-code": "^1.0.3",
"@vuepress-reco/vuepress-plugin-loading-page": "^1.0.0",
"@vuepress-reco/vuepress-plugin-loading-page": "^1.0.2",
"@vuepress-reco/vuepress-plugin-pagation": "^1.0.4",
"@vuepress-reco/vuepress-plugin-screenfull": "^1.0.1",
"@vuepress-reco/vuepress-plugin-ga": "^1.0.2",

2
styles/code.styl
View File

@ -4,7 +4,7 @@
padding 0.25rem 0.5rem
margin 0
font-size 0.85em
background-color rgba(27,31,35,0.05)
background-color var(--code-color)
border-radius 3px
.token
&.deleted

6
styles/custom-blocks.styl
View File

@ -8,17 +8,17 @@
border-left-style solid
margin 1rem 0
&.tip
background-color var(--border-color)
background-color var(--code-color)
border-color #67cc86
.custom-block-title
color #67cc86
&.warning
background-color var(--border-color)
background-color var(--code-color)
border-color #fb9b5f
.custom-block-title
color #fb9b5f
&.danger
background-color var(--border-color)
background-color var(--code-color)
border-color #f26d6d
.custom-block-title
color #f26d6d

2
styles/mode.styl
View File

@ -5,6 +5,7 @@
--text-color $textColor
--border-color $borderColor
--bgm-bg-color $bgmBgColor
--code-color $codeColor
@media (prefers-color-scheme: dark)
--background-color $backgroundColorDark
--box-shadow $boxShadowDark
@ -12,3 +13,4 @@
--text-color $textColorDark
--border-color $borderColorDark
--bgm-bg-color $bgmBgColorDark
--code-color $codeColorDark

3
styles/palette.styl
View File

@ -16,5 +16,8 @@ $textColorDark ?= #aaa
$borderColor ?= #eaecef
$borderColorDark ?= rgba(0, 0, 0, .3)
$codeColor ?= rgba(27, 31, 35, 0.05)
$codeColorDark ?= rgba(0, 0, 0, .3)
$bgmBgColor ?= rgba(255, 255, 255, .7)
$bgmBgColorDark ?= rgba(0, 0, 0, .7)

22
styles/theme.styl
View File

@ -239,11 +239,11 @@ th, td
.valine-wrapper
#valine.v
.vwrap
background: #f0f2f4
background: var(--code-color)
// box-shadow: var(--box-shadow)
.vcontrol
.vsubmit
background: #fff
background: var(--code-color)
.vinfo
padding-left: .6rem
.vlist
@ -252,32 +252,42 @@ th, td
.vcard
.vquote
margin-left: 0
border-left: 1px dashed var(--border-color)
.vimg
border-radius: $borderRadius
box-shadow: var(--box-shadow)
border: none
.vh
border-bottom: 1px dashed var(--border-color)
.vhead
.vsys
box-shadow: var(--box-shadow)
background: var(--code-color)
color: var(--text-color)
.vmeta
margin-bottom: 1rem
.vat
margin-right: .3rem
background: #f0f2f4
background: var(--code-color)
box-shadow: var(--box-shadow)
border-radius: $borderRadius
padding: 0 .4rem
color: #313131
border: 1px solid #ededed
color: var(--text-color)
border: 1px solid var(--border-color)
.vcontent
background: #f0f2f4
background: var(--code-color)
box-shadow: var(--box-shadow)
border-radius: $borderRadius
margin: 0 .3rem
padding: .1rem .6rem .05rem .6rem
p .at
color: #1abc9c
&.expand:before
z-index 1
background: linear-gradient(180deg, rgba(255,255,255,0), var(--background-color))
&.expand:after
background: var(--background-color)
color: var(--color-color)
.info
padding-right: .6rem