liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dark mode handling

Browse Source
This commit is contained in:
Nicolas Giard
2018-12-01 23:03:14 -05:00
parent a7fc560573
commit 74aa09f39c
17 changed files with 156 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/themes/default/components/page.vue
View File

@@ -1,7 +1,8 @@
<template lang="pug">
v-app(v-scroll='upBtnScroll')
v-app(v-scroll='upBtnScroll', :dark='darkMode')
nav-header
v-navigation-drawer.primary(
v-navigation-drawer(
:class='darkMode ? `grey darken-3` : `primary`'
dark
app
clipped
@@ -12,12 +13,12 @@
v-model='navShown'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar
nav-sidebar(:color='darkMode ? `grey darken-3` : `primary`')
slot(name='sidebar')
v-content
template(v-if='path !== `home`')
v-toolbar(color='grey lighten-3', flat, dense)
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
v-icon(color='grey darken-2', left) menu
span Navigation
@@ -36,19 +37,19 @@
v-divider
v-layout(row)
v-flex(xs12, lg9, xl10)
v-toolbar(color='grey lighten-4', flat, :height='90')
v-toolbar(:color='darkMode ? `grey darken-4` : `grey lighten-4`', flat, :height='90')
div
.headline.grey--text.text--darken-3 {{title}}
.headline.grey--text(:class='darkMode ? `text-lighten-2` : `text--darken-3`') {{title}}
.caption.grey--text.text--darken-1 {{description}}
v-divider
.contents(ref='container')
slot(name='contents')
v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
v-toolbar(color='grey lighten-4', flat, :height='90')
v-toolbar(:color='darkMode ? `grey darken-4` : `grey lighten-4`', flat, :height='90')
div
.caption.grey--text.text--lighten-1 Last edited by
.body-2.grey--text.text--darken-3 {{ authorName }}
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
v-spacer
v-tooltip(left)
@@ -57,8 +58,8 @@
span Edit Page
v-divider
template(v-if='toc.length')
v-list.grey.lighten-3.pb-3(dense)
v-subheader.pl-4.primary--text Table of contents
v-list.grey.pb-3(dense, :class='darkMode ? `darken-3-d3` : `lighten-3`')
v-subheader.pl-4(:class='darkMode ? `blue--text text--lighten-1` : `primary--text`') Table of contents
template(v-for='(tocItem, tocIdx) in toc')
v-list-tile(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey') arrow_right
@@ -70,7 +71,7 @@
v-list-tile-title.pl-3.caption {{tocSubItem.title}}
v-divider(inset, v-if='tocIdx < toc.length - 1')
v-divider
v-list.grey.lighten-4(dense)
v-list.grey(dense, :class='darkMode ? `darken-3` : `lighten-4`')
v-subheader.pl-4.yellow--text.text--darken-4 Rating
.text-xs-center
v-rating(
@@ -82,7 +83,7 @@
)
.pb-2.caption.grey--text 5 votes
v-divider
v-list.grey.lighten-3(dense)
v-list.grey(dense, :class='darkMode ? `darken-3-d3` : `lighten-3`')
v-subheader.pl-4.teal--text Tags
v-list-tile
v-list-tile-avatar: v-icon(color='teal') label
@@ -96,7 +97,7 @@
v-list-tile-avatar: v-icon(color='teal') label
v-list-tile-title Planets
v-divider
v-toolbar(color='grey lighten-4', flat, dense)
v-toolbar(:color='darkMode ? `grey darken-3` : `grey lighten-4`', flat, dense)
v-spacer
v-tooltip(bottom)
v-btn(icon, slot='activator'): v-icon(color='grey') bookmark
@@ -117,6 +118,7 @@
<script>
import { StatusIndicator } from 'vue-status-indicator'
import Prism from '@/libs/prism/prism.js'
import { get } from 'vuex-pathify'
export default {
components: {
@@ -205,6 +207,7 @@ export default {
}
},
computed: {
darkMode: get('site/dark'),
navShown: {
get() { return this.navOpen || this.$vuetify.breakpoint.smAndUp },
set(val) { this.navOpen = val }

57
client/themes/default/scss/app.scss
View File

@@ -4,6 +4,10 @@
color: mc('grey', '800');
padding-bottom: 50px;
@at-root .theme--dark & {
color: mc('grey', '300');
}
// ---------------------------------
// HEADERS
// ---------------------------------
@@ -34,6 +38,10 @@
margin-top: 2rem;
position: relative;
@at-root .theme--dark & {
color: mc('blue', '500');
}
&::after {
content: '';
position: absolute;
@@ -54,6 +62,10 @@
color: mc('grey', '800');
position: relative;
@at-root .theme--dark & {
color: mc('grey', '500');
}
&::after {
content: '';
position: absolute;
@@ -62,6 +74,10 @@
width: 100%;
height: 1px;
background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
@at-root .theme--dark & {
background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
}
& + h3 {
@@ -74,6 +90,10 @@
color: mc('grey', '700');
position: relative;
@at-root .theme--dark & {
color: mc('grey', '600');
}
&::after {
content: '';
position: absolute;
@@ -100,6 +120,10 @@
height: 1px;
border: none;
background-color: mc('grey', '400');
@at-root .theme--dark & {
background-color: mc('grey', '700');
}
}
blockquote {
@@ -118,6 +142,13 @@
background-color: mc('blue', '50');
color: mc('blue', '800');
}
@at-root .theme--dark & {
background-color: mc('blue', '900');
background-image: radial-gradient(ellipse at top, mc('blue', '900'), darken(mc('blue', '900'), 5%));
border-color: mc('blue', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-warning {
background-color: mc('orange', '50');
@@ -129,6 +160,13 @@
background-color: mc('orange', '50');
color: mc('orange', '800');
}
@at-root .theme--dark & {
background-color: mc('orange', '900');
background-image: radial-gradient(ellipse at top, mc('orange', '900'), darken(mc('orange', '900'), 5%));
border-color: mc('orange', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-danger {
background-color: mc('red', '50');
@@ -140,6 +178,13 @@
background-color: mc('red', '50');
color: mc('red', '800');
}
@at-root .theme--dark & {
background-color: mc('red', '900');
background-image: radial-gradient(ellipse at top, mc('red', '900'), darken(mc('red', '900'), 5%));
border-color: mc('red', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-success {
background-color: mc('green', '50');
@@ -151,6 +196,13 @@
background-color: mc('green', '50');
color: mc('green', '800');
}
@at-root .theme--dark & {
background-color: mc('green', '900');
background-image: radial-gradient(ellipse at top, mc('green', '900'), darken(mc('green', '900'), 5%));
border-color: mc('green', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
}
@@ -235,6 +287,11 @@
font-size: .8rem;
line-height: 1rem;
text-align: center;
@at-root .theme--dark & {
background-color: mc('grey', '900');
border-color: mc('grey', '700');
}
}
&[checked] + label::before {