Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

feat: support dark theme #31

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,19 @@
import SearchBox from '@SearchBox'

export default {
components: { SearchBox },
components: { SearchBox }
}
</script>

<style lang="stylus">
@import '~@app/style/config'
#header
z-index 12
position fixed
top 0
width 100vw
box-sizing border-box
// background lighten(#3eaf7c, 90%)
background-color #FFF
background-color var(--background)
padding 20px 32px 20px
margin auto
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
Expand All @@ -64,15 +63,15 @@
/*flex 0 0 200px*/
// color #3eaf7c
// color lighten(#3eaf7c, 10%)
color #000
color var(--text)
font-size 30px
margin 0
letter-spacing 2px
display block
text-transform uppercase

a
color #000
color var(--text)
font-weight bold
font-family PT Serif, Serif
text-decoration none
Expand All @@ -93,6 +92,7 @@
margin-left 20px

a
color var(--text)
font-family PT Serif, Serif
font-size 20px
// color lighten(#3eaf7c, 30%)
Expand All @@ -102,8 +102,10 @@
.search-box
font-family PT Serif, Serif
margin-left 20px
background-color transparent

input
background-color transparent
border-radius 5px
transition all .5s
border: 1px solid #cecece
Expand All @@ -118,7 +120,7 @@
right 0

a
color #000
color var(--text)
text-decoration none

&.focused
Expand Down
4 changes: 2 additions & 2 deletions components/MobileHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
top 0
width 100vw
box-sizing border-box
background-color #fff
background-color var(--background)
margin auto
box-shadow 0 5px 20px rgba(0,0,0,0.03), 0 6px 6px rgba(0,0,0,0.05)
transition all 1s cubic-bezier(0.25, 0.8, 0.25, 1)
Expand Down Expand Up @@ -84,7 +84,7 @@
max-height 0
overflow hidden
transition 0.3s ease
background-color #fff
background-color var(--background)

.mobile-menu-wrapper.open
max-height 450px
Expand Down
6 changes: 3 additions & 3 deletions components/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,21 @@
.pagination
a
margin-right: 20px
color: #000
color: var(--text)
height: 38px
line-height: 38px
transition: all .3s ease
position: relative
overflow: hidden
display: inline-block
background #FFF
background var(--background)
padding: 0 15px
text-decoration: none
border 1px solid #000
border-radius 5px
transition all .5s
&:hover
color #FFF
color var(--text)
border 1px solid $accentColor
background-color $accentColor
</style>
44 changes: 44 additions & 0 deletions components/ThemeToggle.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<ToggleButton
:labels="{ checked: 'Dark', unchecked: 'Light' }"
:value="this.defaultValue"
:width="55"
@change="onChange"
color="#8a278c"
/>
</template>

<script>
import {ToggleButton} from 'vue-js-toggle-button'
import {darkThemeKey, darkTheme} from './util'

export default {
components: {ToggleButton},
data() {
return {
defaultValue: false
}
},
created() {
this.defaultValue = window.localStorage.getItem(darkThemeKey) === 'true' || false
},
methods: {
onChange({value}) {
window.localStorage.setItem(darkThemeKey, value)
this.setTheme(value)
},

setTheme(isDark) {
const style = window.document.body.style
Object.keys(darkTheme).forEach(key => {
isDark && style.setProperty(`--${key}`, darkTheme[key])
!isDark && style.removeProperty(`--${key}`)
})
}
}
}
</script>

<style scoped>

</style>
8 changes: 4 additions & 4 deletions components/Toc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@

a
display: block;
color: #2c3e50;
color: var(--text--link);
width: 100%;
box-sizing: border-box;
font-size: 12px;
Expand All @@ -169,14 +169,14 @@
white-space: nowrap;

&.active
border-left-color: $accentColor;
border-left-color: var(--text--link--lighten);

a
color: $accentColor;
color: var(--text--link--lighten);

&:hover
a
color: $accentColor;
color: var(--text--link--lighten);

for i in range(3, 6)
.vuepress-toc-h{i} a
Expand Down
21 changes: 21 additions & 0 deletions components/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@ export const hashRE = /#.*$/
export const extRE = /\.(md|html)$/
export const endingSlashRE = /\/$/
export const outboundRE = /^(https?:|mailto:|tel:)/
export const darkThemeKey = 'ui-dark-theme'
export const darkTheme = {
'background': '#282c35',
'code--background': '#373c49',
'text': '#fff',
'text--code': '#fff',
'text--mask': 'rgba(255, 255, 255, 0.84)',
'text--mask2': 'rgba(255, 255, 255, 0.54)',
'text--link': '#ffa7c4',
'text--link--lighten': '#d23669',
'title': '#8a278c'
}

export function normalize (path) {
return decodeURI(path)
Expand All @@ -21,6 +33,15 @@ export function isTel (path) {
return /^tel:/.test(path)
}

export function initTheme() {
const isDark = window.localStorage.getItem(darkThemeKey) === 'true' || false
const style = window.document.body.style
Object.keys(darkTheme).forEach(key => {
isDark && style.setProperty(`--${key}`, darkTheme[key])
!isDark && style.removeProperty(`--${key}`)
})
}

export function ensureExt (path) {
if (isExternal(path)) {
return path
Expand Down
81 changes: 54 additions & 27 deletions global-components/BaseListLayout.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<template>
<div id="base-list-layout">
<div class="ui-posts">
<div class="ui-functional">
<span class="ui-site-title">{{ $site.title }}</span>
<component v-if="themeToggle" :is="themeToggle"/>
</div>

<div class="ui-post" v-for="page in pages">
<div class="ui-post-title">
<NavLink :link="page.path">{{ page.title }}</NavLink>
</div>

<div class="ui-post-summary">
{{ page.frontmatter.summary || page.summary }}
<!-- <Content :page-key="page.key" slot-key="intro"/>-->
Expand All @@ -22,37 +27,45 @@
</div>
</div>
</div>

<component v-if="$pagination.length > 1 && paginationComponent" :is="paginationComponent"></component>
</div>
</template>

<script>
/* global THEME_BLOG_PAGINATION_COMPONENT */

import Vue from 'vue'
import { NavigationIcon, ClockIcon } from 'vue-feather-icons'
import { Pagination, SimplePagination } from '@vuepress/plugin-blog/lib/client/components'
import {NavigationIcon, ClockIcon} from 'vue-feather-icons'
import {Pagination, SimplePagination} from '@vuepress/plugin-blog/lib/client/components'

export default {
components: { NavigationIcon, ClockIcon },
components: {NavigationIcon, ClockIcon},

data() {
return {
paginationComponent: null
paginationComponent: null,
themeToggle: null
}
},

created() {
this.paginationComponent = this.getPaginationComponent()
},


beforeMount() {
import('@theme/components/ThemeToggle.vue')
.then(module => {
this.themeToggle = module.default
})
},

computed: {
pages() {
return this.$pagination.pages
},
},

methods: {
getPaginationComponent() {
const n = THEME_BLOG_PAGINATION_COMPONENT
Expand All @@ -74,64 +87,78 @@
}
</script>

<style lang="stylus">
<style lang="stylus" scoped>
.common-layout
.content-wrapper
padding-bottom 80px


.ui-functional
display flex
flex-direction row
align-items center
justify-content space-between
width 100%
margin-bottom 2rem

.ui-site-title
color var(--title)
font-size 25px
font-weight 900


.ui-post
padding-bottom 25px
margin-bottom 25px
border-bottom 1px solid #f1f1f1

&:last-child
border-bottom 0px
margin-bottom 0px

p
margin 0

.ui-post-title
font-family PT Serif, Serif
font-size 28px
border-bottom 0

a
cursor pointer
color #000
color var(--text)
transition all .2s
text-decoration none

&:hover
text-decoration underline

.ui-post-summary
font-size 14px
margin-bottom 15px
color rgba(0, 0, 0, 0.54)
color var(--text--mask)
font-weight 200

.ui-post-author
display flex
align-items center
font-size 12px
line-height 12px
color rgba(0, 0, 0, 0.84)
color var(--text--mask2)
margin-bottom 3px
font-weight 400

svg
margin-right 5px
width 14px
height 14px

.ui-post-date
display flex
align-items center
font-size 12px
color rgba(0, 0, 0, 0.54)
color var(--text--mask)
font-weight 200

svg
margin-right 5px
width 14px
Expand Down
4 changes: 2 additions & 2 deletions global-components/BlogTag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
text-align left
box-sizing border-box
transition: background-color .3s
color #000
border 1px solid #000
color var(--text)
border 1px solid var(--text)
text-decoration none
transition all .5s

Expand Down
Loading