diff --git a/packages/@vuepress/core/lib/client/style/config.styl b/packages/@vuepress/core/lib/client/style/config.styl
index 558c4fcc8a..c0258eee1c 100644
--- a/packages/@vuepress/core/lib/client/style/config.styl
+++ b/packages/@vuepress/core/lib/client/style/config.styl
@@ -3,16 +3,26 @@
// colors
$accentColor ?= #3eaf7c
$textColor ?= #2c3e50
+$nightTextColor ?= #9e9e9e
+$bgColor ?= #fff
+$nightBgColor ?= #1e1e1e
$borderColor ?= #eaecef
-$codeBgColor ?= #282c34
+$nightBorderColor ?= #302d28
+$codeBgColor ?= #ecf4fa
+$nightCodeBgColor ?= #282c34
$arrowBgColor ?= #ccc
+$nightArrowBgColor ?= #333
$badgeTipColor ?= #42b983
$badgeWarningColor ?= darken(#ffe564, 35%)
$badgeErrorColor ?= #DA5961
-
+$boxShadowColor ?= #f0f1f2
+$nightBoxShadowColor ?= #0f0e0d
// layout
$navbarHeight ?= 3.6rem
+$navbar-vertical-padding ?= 0.7rem
+$navbar-horizontal-padding ?= 1.5rem
$sidebarWidth ?= 20rem
+$mobileSidebarWidth ?= $sidebarWidth * 0.82
$contentWidth ?= 740px
$homePageWidth ?= 960px
diff --git a/packages/@vuepress/plugin-search/SearchBox.vue b/packages/@vuepress/plugin-search/SearchBox.vue
index b47f18ec6a..b4a7e2ca24 100644
--- a/packages/@vuepress/plugin-search/SearchBox.vue
+++ b/packages/@vuepress/plugin-search/SearchBox.vue
@@ -206,10 +206,10 @@ export default {
cursor text
width 10rem
height: 2rem
- color lighten($textColor, 25%)
+ color var(--text-color, $textColor)
display inline-block
- border 1px solid darken($borderColor, 10%)
- border-radius 2rem
+ border 1px solid transparent
+ border-radius 0.25em
font-size 0.9rem
line-height 2rem
padding 0 0.5rem 0 2rem
@@ -219,6 +219,7 @@ export default {
background-size 1rem
&:focus
cursor auto
+ background-color var(--background-color, #fff)
border-color $accentColor
.suggestions
background #fff
@@ -254,6 +255,7 @@ export default {
input
cursor pointer
width 0
+ left 0
border-color transparent
position relative
&:focus
@@ -285,4 +287,31 @@ export default {
width calc(100vw - 4rem)
input:focus
width 8rem
+
+@media (min-width: $MQNarrow)
+ .search-box input
+ background-color #efeef4
+
+// darkmode
+.theme-dark
+ .search-box
+ input
+ color var(--text-color, $textColor)
+ background-color var(--background-color, #000) !important
+ @media (min-width: $MQNarrow)
+ border-color var(--border-color, $borderColor)
+ background-color lighten($nightBgColor, 10%) !important
+ &:focus
+ background-color lighten($nightBgColor, 10%) !important
+ .suggestion
+ a
+ color darken($nightTextColor, 35%)
+ &.focused
+ background-color #0c0b0a
+ a
+ color $accentColor
+ border-color $accentColor
+ .suggestions
+ border-color var(--border-color, $borderColor)
+ background-color var(--white)
diff --git a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
index 4d51a717cb..1789d46f79 100644
--- a/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
+++ b/packages/@vuepress/theme-default/components/AlgoliaSearchBox.vue
@@ -81,32 +81,35 @@ export default {
.algolia-autocomplete
line-height normal
.ds-dropdown-menu
- background-color #fff
- border 1px solid #999
+ background-color var(--background-color)
+ border 1px solid var(--light-grey)
border-radius 4px
font-size 16px
margin 6px 0 0
padding 4px
text-align left
&:before
- border-color #999
+ border-color var(--light-grey)
[class*=ds-dataset-]
+ background 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
padding 0
+ color var(--text-color)
+ background var(--background-color)
+ border-color var(--border-color)
.algolia-docsearch-suggestion--category-header
padding 5px 10px
margin-top 0
background $accentColor
- color #fff
+ color var(--white)
font-weight 600
.algolia-docsearch-suggestion--highlight
background rgba(255, 255, 255, 0.6)
@@ -115,21 +118,22 @@ export default {
.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
+ color var(--text-color)
+ background var(--background-color)
+ border-color var(--border-color)
&:after
display none
.algolia-docsearch-suggestion--subcategory-column-text
color #555
.algolia-docsearch-footer
- border-color $borderColor
+ border-color var(--border-color)
.ds-cursor .algolia-docsearch-suggestion--content
- background-color #e7edf3 !important
- color $textColor
+ background-color var(--grey3)
+ color var(--text-color)
@media (min-width: $MQMobile)
.algolia-search-wrapper
@@ -166,5 +170,4 @@ export default {
width 5px
margin -3px 3px 0
vertical-align middle
-
diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue
index 0ca7137ed0..f6782cf190 100644
--- a/packages/@vuepress/theme-default/components/DropdownLink.vue
+++ b/packages/@vuepress/theme-default/components/DropdownLink.vue
@@ -123,7 +123,10 @@ export default {
background transparent
border none
font-weight 500
- color $textColor
+ color var(--dark-grey)
+ pointer-events none
+ &::after
+ border-left 5px solid $accentColor
&:hover
border-color transparent
.arrow
@@ -136,7 +139,7 @@ export default {
line-height 1.7rem
h4
margin 0.45rem 0 0
- border-top 1px solid #eee
+ border-top 1px solid var(--grey14)
padding 0.45rem 1.5rem 0 1.25rem
.dropdown-subitem-wrapper
padding 0
@@ -177,10 +180,11 @@ export default {
.dropdown-title
font-weight 600
font-size inherit
+ color var(--text-color)
&:hover
color $accentColor
.nav-dropdown
- transition height .1s ease-out
+ transition height 0.1s ease-out
overflow hidden
.dropdown-item
h4
@@ -197,34 +201,38 @@ export default {
@media (min-width: $MQMobile)
.dropdown-wrapper
height 1.8rem
- &:hover .nav-dropdown,
- &.open .nav-dropdown
+ &:hover .nav-dropdown, &.open .nav-dropdown
// override the inline style.
display block !important
&.open:blur
display none
- .dropdown-title .arrow
- // make the arrow always down at desktop
- border-left 4px solid transparent
- border-right 4px solid transparent
- border-top 6px solid $arrowBgColor
- border-bottom 0
+ .dropdown-title
+ &:hover
+ $accentColor
+ .arrow
+ // make the arrow always down at desktop
+ border-left 4px solid transparent
+ border-right 4px solid transparent
+ border-top 6px solid var(--arrow-bg-color)
+ border-bottom 0
.nav-dropdown
display none
// Avoid height shaked by clicking
height auto !important
- box-sizing border-box;
+ box-sizing border-box
max-height calc(100vh - 2.7rem)
overflow-y auto
position absolute
top 100%
right 0
- background-color #fff
+ background-color var(--background-color)
padding 0.6rem 0
- border 1px solid #ddd
- border-bottom-color #ccc
+ border 1px solid var(--grey14)
text-align left
border-radius 0.25rem
white-space nowrap
margin 0
+ box-shadow 2px 2px 10px var(--box-shadow-color)
+ .dropdown-item a
+ color var(--dark-grey)
diff --git a/packages/@vuepress/theme-default/components/Home.vue b/packages/@vuepress/theme-default/components/Home.vue
index 8cc0519bc9..2f8afca2a5 100644
--- a/packages/@vuepress/theme-default/components/Home.vue
+++ b/packages/@vuepress/theme-default/components/Home.vue
@@ -92,7 +92,7 @@ export default {
.hero
text-align center
img
- max-width: 100%
+ max-width 100%
max-height 280px
display block
margin 3rem auto 1.5rem
@@ -104,15 +104,15 @@ export default {
max-width 35rem
font-size 1.6rem
line-height 1.3
- color lighten($textColor, 40%)
+ color var(--text-color-l40)
.action-button
display inline-block
font-size 1.2rem
- color #fff
+ color var(--white)
background-color $accentColor
padding 0.8rem 1.6rem
border-radius 4px
- transition background-color .1s ease
+ transition background-color 0.1s ease
box-sizing border-box
border-bottom 1px solid darken($accentColor, 10%)
&:hover
@@ -135,14 +135,14 @@ export default {
font-weight 500
border-bottom none
padding-bottom 0
- color lighten($textColor, 10%)
+ color var(--text-color-l10)
p
- color lighten($textColor, 25%)
+ color var(--text-color-l25)
.footer
padding 2.5rem
- border-top 1px solid $borderColor
+ border-top 1px solid var(--border-color)
text-align center
- color lighten($textColor, 25%)
+ color var(--text-color-l25)
@media (max-width: $MQMobile)
.home
diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue
index 2656ae2752..4797c75a1c 100644
--- a/packages/@vuepress/theme-default/components/NavLinks.vue
+++ b/packages/@vuepress/theme-default/components/NavLinks.vue
@@ -127,8 +127,8 @@ export default {
display inline-block
a
line-height 1.4rem
- color inherit
- &:hover, &.router-link-active
+ color var(--dark-grey)
+ &.router-link-active
color $accentColor
.nav-item
position relative
@@ -138,19 +138,22 @@ export default {
&:first-child
margin-left 0
.repo-link
+ color var(--dark-grey)
margin-left 1.5rem
@media (max-width: $MQMobile)
.nav-links
+ a
+ &:hover, &.router-link-active
+ color $accentColor
.nav-item, .repo-link
margin-left 0
@media (min-width: $MQMobile)
- .nav-links a
- &:hover, &.router-link-active
- color $textColor
- .nav-item > a:not(.external)
+ .nav-item > a
&:hover, &.router-link-active
margin-bottom -2px
border-bottom 2px solid lighten($accentColor, 8%)
+ &.router-link-active
+ color $accentColor
diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue
index f8dd49ca68..2aa4fccecb 100644
--- a/packages/@vuepress/theme-default/components/Navbar.vue
+++ b/packages/@vuepress/theme-default/components/Navbar.vue
@@ -93,9 +93,6 @@ function css (el, property) {
diff --git a/packages/@vuepress/theme-default/components/PageNav.vue b/packages/@vuepress/theme-default/components/PageNav.vue
index 4c19aae5f8..44e741e9d4 100644
--- a/packages/@vuepress/theme-default/components/PageNav.vue
+++ b/packages/@vuepress/theme-default/components/PageNav.vue
@@ -155,7 +155,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
diff --git a/packages/@vuepress/theme-default/components/Sidebar.vue b/packages/@vuepress/theme-default/components/Sidebar.vue
index e70e33367a..f9ce49b1b3 100644
--- a/packages/@vuepress/theme-default/components/Sidebar.vue
+++ b/packages/@vuepress/theme-default/components/Sidebar.vue
@@ -33,9 +33,10 @@ export default {
list-style-type none
a
display inline-block
+ color var(--text-color)
.nav-links
display none
- border-bottom 1px solid $borderColor
+ border-bottom 1px solid var(--border-color)
padding 0.5rem 0 0.75rem 0
a
font-weight 600
diff --git a/packages/@vuepress/theme-default/components/SidebarGroup.vue b/packages/@vuepress/theme-default/components/SidebarGroup.vue
index 23f8a61139..a9cd524bf1 100644
--- a/packages/@vuepress/theme-default/components/SidebarGroup.vue
+++ b/packages/@vuepress/theme-default/components/SidebarGroup.vue
@@ -101,14 +101,14 @@ export default {
& > .sidebar-group-items
padding-left 1rem
& > li > .sidebar-link
- font-size: 0.95em;
+ font-size 0.95em
border-left none
&.depth-2
& > .sidebar-heading
border-left none
.sidebar-heading
- color $textColor
+ color var(--text-color)
transition color .15s ease
cursor pointer
font-size 1.1em
diff --git a/packages/@vuepress/theme-default/components/SidebarLink.vue b/packages/@vuepress/theme-default/components/SidebarLink.vue
index 4cd7665aeb..f13294035c 100644
--- a/packages/@vuepress/theme-default/components/SidebarLink.vue
+++ b/packages/@vuepress/theme-default/components/SidebarLink.vue
@@ -110,12 +110,12 @@ a.sidebar-link
font-size 1em
font-weight 400
display inline-block
- color $textColor
+ color var(--text-color)
border-left 0.25rem solid transparent
padding 0.35rem 1rem 0.35rem 1.25rem
line-height 1.4
- width: 100%
- box-sizing: border-box
+ width 100%
+ box-sizing border-box
&:hover
color $accentColor
&.active
diff --git a/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
new file mode 100644
index 0000000000..2200e61b59
--- /dev/null
+++ b/packages/@vuepress/theme-default/global-components/DarkmodeSwitch.vue
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js
index baaf102ba7..bb0db9f4c3 100644
--- a/packages/@vuepress/theme-default/index.js
+++ b/packages/@vuepress/theme-default/index.js
@@ -23,6 +23,8 @@ module.exports = (options, ctx) => {
}
},
+ globalUIComponents: 'DarkmodeSwitch',
+
plugins: [
['@vuepress/active-header-links', options.activeHeaderLinks],
'@vuepress/search',
diff --git a/packages/@vuepress/theme-default/styles/arrow.styl b/packages/@vuepress/theme-default/styles/arrow.styl
index 20bffc0dc8..86c8a8ee68 100644
--- a/packages/@vuepress/theme-default/styles/arrow.styl
+++ b/packages/@vuepress/theme-default/styles/arrow.styl
@@ -1,22 +1,24 @@
-@require './config'
-
.arrow
display inline-block
width 0
height 0
+
&.up
border-left 4px solid transparent
border-right 4px solid transparent
- border-bottom 6px solid $arrowBgColor
+ border-bottom 6px solid var(--arrow-bg-color)
+
&.down
border-left 4px solid transparent
border-right 4px solid transparent
- border-top 6px solid $arrowBgColor
+ border-top 6px solid var(--arrow-bg-color)
+
&.right
border-top 4px solid transparent
border-bottom 4px solid transparent
- border-left 6px solid $arrowBgColor
+ border-left 6px solid var(--arrow-bg-color)
+
&.left
border-top 4px solid transparent
border-bottom 4px solid transparent
- border-right 6px solid $arrowBgColor
+ border-right 6px solid var(--arrow-bg-color)
diff --git a/packages/@vuepress/theme-default/styles/code-dark.styl b/packages/@vuepress/theme-default/styles/code-dark.styl
new file mode 100644
index 0000000000..193b363e4e
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/code-dark.styl
@@ -0,0 +1,102 @@
+.theme-dark
+ {$contentClass}
+ code
+ background-color var(--grey12)
+
+ /**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+ code[class*='language-'], pre[class*='language-']
+ color #ccc
+ background none
+ font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
+ font-size 1em
+ text-align left
+ white-space pre
+ word-spacing normal
+ word-break normal
+ word-wrap normal
+ -moz-tab-size 4
+ -o-tab-size 4
+ tab-size 4
+ -webkit-hyphens none
+ -moz-hyphens none
+ -ms-hyphens none
+ hyphens none
+
+ /* Code blocks */
+ pre[class*='language-']
+ margin 0.5em 0
+ overflow auto
+
+ :not(pre) > code[class*='language-'], pre[class*='language-']
+ background #2d2d2d
+
+ /* Inline code */
+ :not(pre) > code[class*='language-']
+ padding 0.1em
+ border-radius 0.3em
+ white-space normal
+
+ .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata
+ color #999
+
+ .token.punctuation
+ color #ccc
+
+ .token.tag, .token.attr-name, .token.namespace, .token.deleted
+ color #e2777a
+
+ .token.function-name
+ color #6196cc
+
+ .token.boolean, .token.number, .token.function
+ color #f08d49
+
+ .token.property, .token.class-name, .token.constant, .token.symbol
+ color #f8c555
+
+ .token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
+ color #cc99cd
+
+ .token.string, .token.char, .token.attr-value, .token.regex, .token.variable
+ color #7ec699
+
+ .token.operator, .token.entity, .token.url
+ color #67cdcc
+
+ .token.important, .token.bold
+ font-weight bold
+
+ .token.italic
+ font-style italic
+
+ .token.entity
+ cursor help
+
+ .token.inserted
+ color green
+
+ // hightlight
+ div[class*='language-']
+ .highlight-lines
+ .highlighted
+ background-color darken(saturate($nightCodeBgColor, 10%), 25%)
+
+ pre, pre[class*='language-']
+ background transparent
+
+ &::before
+ color rgba(255, 255, 255, 0.4)
+
+ &.line-numbers-mode
+ .highlight-lines .highlighted:before
+ background-color darken(saturate($nightCodeBgColor, 10%), 25%)
+
+ .line-numbers-wrapper
+ color rgba(255, 255, 255, 0.3)
+
+ &::after
+ border-right 1px solid darken(saturate($nightCodeBgColor, 10%), 35%)
diff --git a/packages/@vuepress/theme-default/styles/code-light.styl b/packages/@vuepress/theme-default/styles/code-light.styl
new file mode 100644
index 0000000000..2e097ca486
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/code-light.styl
@@ -0,0 +1,110 @@
+.theme-light
+ {$contentClass}
+ code
+ background-color var(--grey14)
+
+ /**
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
+ * @author Tim Shedor
+ */
+ code[class*='language-'], pre[class*='language-']
+ color black
+ background none
+ font-family Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
+ font-size 1em
+ text-align left
+ white-space pre
+ word-spacing normal
+ word-break normal
+ word-wrap normal
+ -moz-tab-size 4
+ -o-tab-size 4
+ tab-size 4
+ -webkit-hyphens none
+ -moz-hyphens none
+ -ms-hyphens none
+ hyphens none
+
+ pre[class*='language-']::-moz-selection, pre[class*='language-'] ::-moz-selection, code[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection
+ background #b3d4fc
+
+ pre[class*='language-']::selection, pre[class*='language-'] ::selection, code[class*='language-']::selection, code[class*='language-'] ::selection
+ background #b3d4fc
+
+ /* Code blocks */
+ pre[class*='language-']
+ margin 0.5em 0
+ overflow auto
+
+ :not(pre) > code[class*='language-'], pre[class*='language-']
+ background #f5f2f0
+
+ /* Inline code */
+ :not(pre) > code[class*='language-']
+ padding 0.1em
+ border-radius 0.3em
+ white-space normal
+
+ .token.comment, .token.prolog, .token.doctype, .token.cdata
+ color slategray
+
+ .token.punctuation
+ color #5F6364
+
+ .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted
+ color #c92c2c
+
+ .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted
+ color #2f9c0a
+
+ .token.operator, .token.entity, .token.url, .token.variable
+ color #a67f59
+ background rgba(255, 255, 255, 0.5)
+
+ .token.atrule, .token.attr-value, .token.keyword, .token.class-name
+ color #1990b8
+
+ .token.regex, .token.important
+ color #e90
+
+ .language-css .token.string, .style .token.string
+ color #a67f59
+ background rgba(255, 255, 255, 0.5)
+
+ .token.important
+ font-weight normal
+
+ .token.bold
+ font-weight bold
+
+ .token.italic
+ font-style italic
+
+ .token.entity
+ cursor help
+
+ .token.namespace
+ opacity 0.7
+
+ // hightlight
+ div[class*='language-']
+ .highlight-lines
+ .highlighted
+ background-color darken(saturate($codeBgColor, 10%), 5%)
+
+ pre, pre[class*='language-']
+ background transparent
+
+ &::before
+ color rgba(0, 0, 0, 0.4)
+
+ &.line-numbers-mode
+ .highlight-lines .highlighted:before
+ background-color darken(saturate($codeBgColor, 10%), 5%)
+
+ .line-numbers-wrapper
+ color rgba(0, 0, 0, 0.3)
+
+ &::after
+ border-right 1px solid darken(saturate($codeBgColor, 20%), 10%)
diff --git a/packages/@vuepress/theme-default/styles/code.styl b/packages/@vuepress/theme-default/styles/code.styl
index 9d3aa9a541..9eb405c20e 100644
--- a/packages/@vuepress/theme-default/styles/code.styl
+++ b/packages/@vuepress/theme-default/styles/code.styl
@@ -1,35 +1,38 @@
{$contentClass}
code
- color lighten($textColor, 20%)
+ color var(--text-color-l20)
padding 0.25rem 0.5rem
margin 0
font-size 0.85em
- background-color rgba(27,31,35,0.05)
border-radius 3px
+
.token
&.deleted
color #EC5975
+
&.inserted
color $accentColor
{$contentClass}
- pre, pre[class*="language-"]
+ pre, pre[class*='language-']
line-height 1.4
padding 1.25rem 1.5rem
margin 0.85rem 0
- background-color $codeBgColor
+ background-color var(--code-bg-color)
border-radius 6px
overflow auto
+
code
- color #fff
+ color var(--grey3)
padding 0
- background-color transparent
+ background-color transparent !important
border-radius 0
-div[class*="language-"]
+div[class*='language-']
position relative
- background-color $codeBgColor
+ background-color var(--code-bg-color)
border-radius 6px
+
.highlight-lines
user-select none
padding-top 1.3rem
@@ -38,53 +41,58 @@ div[class*="language-"]
left 0
width 100%
line-height 1.4
- .highlighted
- background-color rgba(0, 0, 0, 66%)
- pre, pre[class*="language-"]
+
+ pre, pre[class*='language-']
background transparent
position relative
z-index 1
+
&::before
position absolute
z-index 3
top 0.8em
right 1em
font-size 0.75rem
- color rgba(255, 255, 255, 0.4)
+
&:not(.line-numbers-mode)
.line-numbers-wrapper
display none
+
&.line-numbers-mode
.highlight-lines .highlighted
- position relative
- &:before
- content ' '
- position absolute
- z-index 3
- left 0
- top 0
- display block
- width $lineNumbersWrapperWidth
- height 100%
- background-color rgba(0, 0, 0, 66%)
+ position relative
+
+ &:before
+ content ' '
+ position absolute
+ z-index 3
+ left 0
+ top 0
+ display block
+ width $lineNumbersWrapperWidth
+ height 100%
+
pre
- padding-left $lineNumbersWrapperWidth + 1 rem
+ padding-left ($lineNumbersWrapperWidth + 1) rem
vertical-align middle
+
.line-numbers-wrapper
position absolute
top 0
width $lineNumbersWrapperWidth
text-align center
- color rgba(255, 255, 255, 0.3)
padding 1.25rem 0
line-height 1.4
+
br
user-select none
+
.line-number
position relative
z-index 4
user-select none
font-size 0.85em
+
&::after
content ''
position absolute
@@ -94,44 +102,43 @@ div[class*="language-"]
width $lineNumbersWrapperWidth
height 100%
border-radius 6px 0 0 6px
- border-right 1px solid rgba(0, 0, 0, 66%)
- background-color $codeBgColor
-
+ background-color var(--code-bg-color)
for lang in $codeLang
div{'[class~="language-' + lang + '"]'}
&:before
- content ('' + lang)
+ content '' + lang
-div[class~="language-javascript"]
+div[class~='language-javascript']
&:before
- content "js"
+ content 'js'
-div[class~="language-typescript"]
+div[class~='language-typescript']
&:before
- content "ts"
+ content 'ts'
-div[class~="language-markup"]
+div[class~='language-markup']
&:before
- content "html"
+ content 'html'
-div[class~="language-markdown"]
+div[class~='language-markdown']
&:before
- content "md"
+ content 'md'
-div[class~="language-json"]:before
- content "json"
+div[class~='language-json']:before
+ content 'json'
-div[class~="language-ruby"]:before
- content "rb"
+div[class~='language-ruby']:before
+ content 'rb'
-div[class~="language-python"]:before
- content "py"
+div[class~='language-python']:before
+ content 'py'
-div[class~="language-bash"]:before
- content "sh"
+div[class~='language-bash']:before
+ content 'sh'
-div[class~="language-php"]:before
- content "php"
+div[class~='language-php']:before
+ content 'php'
-@import '~prismjs/themes/prism-tomorrow.css'
+@require './code-light'
+@require './code-dark'
diff --git a/packages/@vuepress/theme-default/styles/config.styl b/packages/@vuepress/theme-default/styles/config.styl
index 9e403210fd..a6f4e1d03a 100644
--- a/packages/@vuepress/theme-default/styles/config.styl
+++ b/packages/@vuepress/theme-default/styles/config.styl
@@ -1 +1 @@
-$contentClass = '.theme-default-content'
+$contentClass ?= '.theme-default-content'
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl b/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl
new file mode 100644
index 0000000000..ea0660b45f
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/custom-blocks-dark.styl
@@ -0,0 +1,22 @@
+.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
+ color var(--text-color)
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks-light.styl b/packages/@vuepress/theme-default/styles/custom-blocks-light.styl
new file mode 100644
index 0000000000..c7d013f0dc
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/custom-blocks-light.styl
@@ -0,0 +1,27 @@
+.theme-light .custom-block
+ &.tip
+ background-color #f3f5f7
+
+ &.warning
+ background-color rgba(255, 229, 100, 0.3)
+ color darken(#ffe564, 70%)
+
+ .custom-block-title
+ color darken(#ffe564, 50%)
+
+ a
+ color var(--text-color)
+
+ &.danger
+ background-color #ffe6e6
+ border-color darken(red, 20%)
+ color darken(red, 70%)
+
+ .custom-block-title
+ color darken(red, 40%)
+
+ a
+ color var(--text-color)
+
+ &.details
+ background-color #eee
diff --git a/packages/@vuepress/theme-default/styles/custom-blocks.styl b/packages/@vuepress/theme-default/styles/custom-blocks.styl
index 5b868166a4..f4918c5031 100644
--- a/packages/@vuepress/theme-default/styles/custom-blocks.styl
+++ b/packages/@vuepress/theme-default/styles/custom-blocks.styl
@@ -2,43 +2,40 @@
.custom-block-title
font-weight 600
margin-bottom -0.4rem
+
&.tip, &.warning, &.danger
- padding .1rem 1.5rem
- border-left-width .5rem
+ padding 0.1rem 1.5rem
+ border-left-width 0.5rem
border-left-style solid
margin 1rem 0
+
&.tip
- background-color #f3f5f7
border-color #42b983
+
&.warning
- background-color rgba(255,229,100,.3)
border-color darken(#ffe564, 35%)
- color darken(#ffe564, 70%)
- .custom-block-title
- color darken(#ffe564, 50%)
- a
- color $textColor
+
&.danger
- background-color #ffe6e6
border-color darken(red, 20%)
- color darken(red, 70%)
- .custom-block-title
- color darken(red, 40%)
- a
- color $textColor
+
&.details
display block
position relative
border-radius 2px
margin 1.6em 0
padding 1.6em
- background-color #eee
+
h4
margin-top 0
+
figure, p
&:last-child
margin-bottom 0
padding-bottom 0
+
summary
outline none
cursor pointer
+
+@require './custom-blocks-light'
+@require './custom-blocks-dark'
diff --git a/packages/@vuepress/theme-default/styles/index.styl b/packages/@vuepress/theme-default/styles/index.styl
index 976bfb0447..64bacb56b8 100644
--- a/packages/@vuepress/theme-default/styles/index.styl
+++ b/packages/@vuepress/theme-default/styles/index.styl
@@ -1,5 +1,6 @@
@require './config'
@require './code'
+@require './prefer-color-scheme-config'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@@ -8,14 +9,15 @@
html, body
padding 0
margin 0
- background-color #fff
+ background-color var(--background-color)
body
- font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+ font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
- color $textColor
+ color var(--text-color)
+ -webkit-tap-highlight-color transparent
.page
padding-left $sidebarWidth
@@ -27,9 +29,9 @@ body
left 0
right 0
height $navbarHeight
- background-color #fff
+ background-color var(--background-color)
box-sizing border-box
- border-bottom 1px solid $borderColor
+ box-shadow 0 2px 8px var(--box-shadow-color)
.sidebar-mask
position fixed
@@ -42,7 +44,7 @@ body
.sidebar
font-size 16px
- background-color #fff
+ background-color var(--background-color)
width $sidebarWidth
position fixed
z-index 10
@@ -51,11 +53,12 @@ body
left 0
bottom 0
box-sizing border-box
- border-right 1px solid $borderColor
+ border-right 1px solid var(--border-color)
overflow-y auto
{$contentClass}:not(.custom)
@extend $wrapper
+
> *:first-child
margin-top $navbarHeight
@@ -95,10 +98,10 @@ kbd
blockquote
font-size 1rem
- color #999;
- border-left .2rem solid #dfe2e5
+ color #999
+ border-left 0.2rem solid #dfe2e5
margin 1rem 0
- padding .25rem 0 .25rem 1rem
+ padding 0.25rem 0 0.25rem 1rem
& > p
margin 0
@@ -114,7 +117,7 @@ h1, h2, h3, h4, h5, h6
line-height 1.25
{$contentClass}:not(.custom) > &
- margin-top (0.5rem - $navbarHeight)
+ margin-top 0.5rem - $navbarHeight
padding-top ($navbarHeight + 1rem)
margin-bottom 0
@@ -126,15 +129,15 @@ h1, h2, h3, h4, h5, h6
margin-top 2rem
&:hover .header-anchor
- opacity: 1
+ opacity 1
h1
font-size 2.2rem
h2
font-size 1.65rem
- padding-bottom .3rem
- border-bottom 1px solid $borderColor
+ padding-bottom 0.3rem
+ border-bottom 1px solid var(--border-color)
h3
font-size 1.35rem
@@ -151,20 +154,20 @@ a.header-anchor
text-decoration none
code, kbd, .line-number
- font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+ font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
p, ul, ol
line-height 1.7
hr
border 0
- border-top 1px solid $borderColor
+ border-top 1px solid var(--border-color)
table
border-collapse collapse
margin 1rem 0
- display: block
- overflow-x: auto
+ display block
+ overflow-x auto
tr
border-top 1px solid #dfe2e5
@@ -173,13 +176,20 @@ tr
background-color #f6f8fa
th, td
- border 1px solid #dfe2e5
- padding .6em 1em
+ border 1px solid var(--grey14)
+ padding 0.6em 1em
+
+.theme-dark
+ tr:nth-child(2n)
+ background-color #252322
+
+ th, td
+ border 1px solid var(--grey12)
.theme-container
&.sidebar-open
.sidebar-mask
- display: block
+ display block
&.no-navbar
{$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
@@ -189,7 +199,6 @@ th, td
.sidebar
top 0
-
@media (min-width: ($MQMobile + 1px))
.theme-container.no-sidebar
.sidebar
@@ -198,4 +207,22 @@ th, td
.page
padding-left 0
+::-webkit-scrollbar
+ width 6px
+ height 6px
+
+::-webkit-scrollbar-track-piece
+ background-color rgba(0, 0, 0, 0.1)
+ -webkit-border-radius 6px
+
+::-webkit-scrollbar-thumb:vertical
+ height 6px
+ background-color $accentColor
+ -webkit-border-radius 6px
+
+::-webkit-scrollbar-thumb:horizontal
+ width 6px
+ background-color $accentColor
+ -webkit-border-radius 6px
+
@require 'mobile.styl'
diff --git a/packages/@vuepress/theme-default/styles/mobile.styl b/packages/@vuepress/theme-default/styles/mobile.styl
index f5bd32739d..b208bce621 100644
--- a/packages/@vuepress/theme-default/styles/mobile.styl
+++ b/packages/@vuepress/theme-default/styles/mobile.styl
@@ -1,12 +1,11 @@
@require './config'
-$mobileSidebarWidth = $sidebarWidth * 0.82
-
// narrow desktop / iPad
@media (max-width: $MQNarrow)
.sidebar
font-size 15px
width $mobileSidebarWidth
+
.page
padding-left $mobileSidebarWidth
@@ -16,22 +15,26 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
top 0
padding-top $navbarHeight
transform translateX(-100%)
- transition transform .2s ease
+ transition transform 0.2s ease
+
.page
padding-left 0
+
.theme-container
&.sidebar-open
.sidebar
transform translateX(0)
+
&.no-navbar
.sidebar
- padding-top: 0
+ padding-top 0
// narrow mobile
@media (max-width: $MQMobileNarrow)
h1
font-size 1.9rem
+
{$contentClass}
- div[class*="language-"]
+ div[class*='language-']
margin 0.85rem -1.5rem
border-radius 0
diff --git a/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl b/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl
new file mode 100644
index 0000000000..f7a05f1568
--- /dev/null
+++ b/packages/@vuepress/theme-default/styles/prefer-color-scheme-config.styl
@@ -0,0 +1,39 @@
+.theme-light
+ --text-color $textColor
+ --background-color $bgColor
+ --border-color $borderColor
+ --code-bg-color $codeBgColor
+ --arrow-bg-color $arrowBgColor
+ --box-shadow-color $boxShadowColor
+ --card-shadow-color $cardShadowColor
+ --text-color-l10 lighten($textColor, 10%)
+ --text-color-l20 lighten($textColor, 20%)
+ --text-color-l25 lighten($textColor, 25%)
+ --text-color-l40 lighten($textColor, 40%)
+ --black #000
+ --dark-grey #666
+ --light-grey #999
+ --white #fff
+ --grey3 #333
+ --grey12 #bbb
+ --grey14 #eee
+
+.theme-dark
+ --text-color $nightTextColor
+ --background-color $nightBgColor
+ --border-color $nightBorderColor
+ --code-bg-color $nightCodeBgColor
+ --arrow-bg-color $nightArrowBgColor
+ --box-shadow-color $nightBoxShadowColor
+ --card-shadow-color $nightCardShadowColor
+ --text-color-l10 lighten($nightTextColor, 10%)
+ --text-color-l20 lighten($nightTextColor, 20%)
+ --text-color-l25 lighten($nightTextColor, 25%)
+ --text-color-l40 lighten($nightTextColor, 40%)
+ --black #fff
+ --dark-grey #999
+ --light-grey #666
+ --white #000
+ --grey3 #ccc
+ --grey12 #333
+ --grey14 #111
diff --git a/packages/@vuepress/theme-default/styles/wrapper.styl b/packages/@vuepress/theme-default/styles/wrapper.styl
index a99262c71a..5742a37b99 100644
--- a/packages/@vuepress/theme-default/styles/wrapper.styl
+++ b/packages/@vuepress/theme-default/styles/wrapper.styl
@@ -2,8 +2,9 @@ $wrapper
max-width $contentWidth
margin 0 auto
padding 2rem 2.5rem
+
@media (max-width: $MQNarrow)
padding 2rem
+
@media (max-width: $MQMobileNarrow)
padding 1.5rem
-
diff --git a/packages/docs/docs/.vuepress/components/Bit.vue b/packages/docs/docs/.vuepress/components/Bit.vue
index d14acdb80b..359226d360 100644
--- a/packages/docs/docs/.vuepress/components/Bit.vue
+++ b/packages/docs/docs/.vuepress/components/Bit.vue
@@ -29,4 +29,8 @@
margin-left 15px
img, span
vertical-align middle
+
+.theme-dark
+ .bit-sponsor
+ background-color #0c0907