zhaoyingbo/canary_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add dark mode

Browse Source
This commit is contained in:
RainSun 2020-02-24 15:39:36 +08:00
parent 672d09c138
commit f2f879d16d
9 changed files with 170 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@ -8,6 +8,8 @@
<style lang="scss">
@import './style/main';
@import './style/font';
@import "~vue-material/dist/theme/engine";
@import "~vue-material/dist/theme/all";
body,
h1,
h2,
@ -107,12 +109,23 @@ button {
border: none;
outline: none;
}
html[data-theme="dark"] {
@include set-theme-dark();
@import '~vue-material/dist/theme/all';
.md-caption {
color: rgba(255, 255, 255, 0.7);
}
}
html[data-theme="light"] {
@include set-theme-light();
@import '~vue-material/dist/theme/all';
}
#app {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
// color: #2c3e50;
position: absolute;
top: 0;
left: 0;

1
src/main.js
View File

@ -12,6 +12,7 @@ Vue.component('icon', Icon);
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
// import 'vue-material/dist/theme/default-dark.css'
import 'material-design-icons/iconfont/material-icons.css'
Vue.use(VueMaterial)

31
src/style/main.scss
View File

@ -1 +1,30 @@
$main-color: #448aff;
$main-color: #448aff;
@import '~vue-material/dist/theme/engine'; // Import the theme engine
@mixin set-theme-light() {
@include md-register-theme(
'default',
(
primary: md-get-palette-color(blue, A200),
// The primary color of your application
accent: md-get-palette-color(red, A200),
// The accent or secondary color
theme: light// This can be dark or light
)
);
}
@mixin set-theme-dark() {
@include md-register-theme(
'default',
(
primary: md-get-palette-color(blue, A200),
// The primary color of your application
accent: md-get-palette-color(red, A200),
// The accent or secondary color
theme: dark// This can be dark or light
)
);
}
@import '~vue-material/dist/theme/all'; // Apply the theme

28
src/views/Account/Account.vue
View File

@ -9,6 +9,7 @@
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<icon class="logo" name="canary"></icon>
<template v-if="page_type == 'login'">
<md-field :class="mail_addr_verify ? '' : 'md-invalid'">
@ -104,7 +105,8 @@ export default {
activation_loading: false,
show_snackbar: false,
snakebar_msg:'',
lang:''
lang:'',
clientHeight:''
};
},
computed: {
@ -115,7 +117,13 @@ export default {
},
methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
@ -419,8 +427,19 @@ export default {
console.log('临时语言系统加载完成')
this.init()
},
mounted() {},
mounted() {
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}`;
//document.body.clientWidth;
window.onresize = function temp() {
this.clientHeight = `${document.documentElement.clientHeight}`;
};
},
watch: {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
// 如果 `mail_addr` 发生改变，就会清空错误状态
mail_addr: function() {
this.mail_addr_verify = true
@ -467,5 +486,8 @@ export default {
margin-right: -11px;
margin-top: -11px;
}
.toolbar {
position: fixed !important;
}
}
</style>

30
src/views/Add/Add.vue
View File

@ -7,8 +7,8 @@
<h3 class="md-title" style="flex: 1">{{id_cache?lang.title[1]:lang.title[0]}}</h3>
</div>
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-field :class="title_verify? '':'md-invalid'">
<label>{{lang.subheader[0]}}</label>
<md-input v-model="title" required></md-input>
@ -53,6 +53,7 @@ export default {
name: 'Add',
data() {
return {
clientHeight: '',
title: '',
user_name: '',
password: '',
@ -71,7 +72,13 @@ export default {
},
methods: {
...mapActions(['setRowData', 'setRowPwd']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
@ -239,8 +246,20 @@ export default {
console.log('临时语言系统加载完成')
this.init()
},
mounted() {},
watch: {},
mounted() {
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}`;
//document.body.clientWidth;
window.onresize = function temp() {
this.clientHeight = `${document.documentElement.clientHeight}`;
};
},
watch: {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
},
beforeDestroy() {},
components: {}
};
@ -257,5 +276,8 @@ export default {
margin: 0 !important;
min-height: 1.2rem !important;
}
.toolbar {
position: fixed !important;
}
}
</style>

39
src/views/Detail/Detail.vue
View File

@ -13,12 +13,13 @@
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-list class="md-double-line">
<md-list-item>
<label class="md-caption">{{lang.label[0]}}</label>
<div class="msg-box">
<p>{{content.user_name}}</p>
<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
</div>
</md-list-item>
<md-list-item>
@ -26,7 +27,7 @@
<div class="msg-box">
<p class="password">{{show_password? content.password : doitPassword}}</p>
<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy" :class="settings.is_dark_mode? 'dark-theme-icon': ''"></icon></md-button>
</div>
</md-list-item>
<md-list-item>
@ -75,7 +76,8 @@ export default {
content: {},
show_password: false,
show_dialog: false,
lang:''
lang:'',
clientHeight:''
};
},
computed: {
@ -92,7 +94,12 @@ export default {
},
methods: {
...mapActions(['setRowData', 'setRowPwd']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
window.document.getElementsByClassName('md-app-content')[0].style.minHeight = clientHeight + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
@ -229,8 +236,20 @@ export default {
console.log('临时语言系统加载完成')
this.init()
},
mounted() {},
watch: {},
mounted() {
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}`;
//document.body.clientWidth;
window.onresize = function temp() {
this.clientHeight = `${document.documentElement.clientHeight}`;
};
},
watch: {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
},
beforeDestroy() {},
components: {}
};
@ -242,6 +261,9 @@ export default {
width: 100%;
min-height: 100%;
background: #fff;
.md-toolbar {
position: fixed !important;
}
.md-list-item-content {
position: relative;
label {
@ -266,7 +288,10 @@ export default {
.icon {
height: 24px;
width: 24px;
color: grey;
color: gray;
}
.dark-theme-icon {
color: #fff !important;
}
.node {
width: 100%;

10
src/views/Home/Home.vue
View File

@ -23,7 +23,7 @@
<md-app-drawer :md-active.sync="menuVisible">
<div class="drawer-banner">
<md-icon class="default-avatar md-size-2x">face</md-icon>
<md-icon class="default-avatar md-size-2x face">face</md-icon>
<p class="md-title">Canary Codebook</p>
<p class="md-caption">{{ user_infos.mail_addr }}</p>
</div>
@ -72,7 +72,7 @@
md-icon="devices_other"
:md-label="lang.empty_state.label"
:md-description="lang.empty_state.description"
v-if="show_list.length == 0"
v-if="show_list.length == 0 && !search_start"
>
<md-button class="md-primary md-raised" @click="turnToAdd()">{{lang.empty_state.button}}</md-button>
</md-empty-state>
@ -82,7 +82,7 @@
<p class="md-caption">{{ code.user_name }}</p>
</div>
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0 || search_start">
<md-speed-dial-target class="md-primary" @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
</md-speed-dial>
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
@ -132,6 +132,7 @@ export default {
// console.log(clientHeight);
this.$refs.home.children[0].style.minHeight = clientHeight + 'px';
this.$refs.list_placeholder.parentNode.style.maxHeight = clientHeight + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
@ -429,4 +430,7 @@ export default {
.md-app-scroller > div {
overflow-y:scroll!important;
}
.face {
color: #fff !important;
}
</style>

32
src/views/Settings/Settings.vue
View File

@ -9,6 +9,7 @@
</md-app-toolbar>
<md-app-content>
<div style="height: 54px;"></div>
<md-list>
<md-subheader class="md-primary">{{lang.subheader[0]}}</md-subheader>
<md-list-item @click="resetAccount()">
@ -45,7 +46,7 @@
<md-list-item>
<md-icon>brightness_6</md-icon>
<span class="md-list-item-text">{{lang.option_list[1]}}</span>
<md-switch v-model="is_dark_mode" class="md-primary" disabled></md-switch>
<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
</md-list-item>
<md-list-item>
@ -109,7 +110,8 @@ export default {
snakebar_msg: '',
// 初始化完成状态
has_init: false,
lang: ''
lang: '',
clientHeight:''
};
},
computed: {
@ -117,7 +119,14 @@ export default {
},
methods: {
...mapActions(['setUserInfo', 'setRowData', 'setRowPwd', 'setSettings']),
// 修改md-app的最小高度
changeFixed(clientHeight) {
//动态修改样式
// console.log(clientHeight);
window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
},
// 初始化
init() {
// 刷新vuex
@ -255,6 +264,7 @@ export default {
} else {
this.lang = lang().settings.EN
}
window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
console.log('语言配置完成')
this.snakebar_msg = this.lang.snakebar_msg.reset_settings;
this.show_snackbar = true;
@ -285,8 +295,19 @@ export default {
console.log('临时语言系统加载完成')
this.init();
},
mounted() {},
mounted() {
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}`;
//document.body.clientWidth;
window.onresize = function temp() {
this.clientHeight = `${document.documentElement.clientHeight}`;
};
},
watch: {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function() {
this.changeFixed(this.clientHeight);
},
// 如果 `is_chinese` 发生改变，就会执行设置函数
is_chinese: function() {
if (this.has_init) this.resetSettings();
@ -327,6 +348,9 @@ export default {
margin-right: -11px;
margin-top: -11px;
}
.toolbar {
position: fixed !important;
}
}
</style>
<!--

8
src/views/Unlock/Unlock.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="unlock">
<div class="unlock" :class="settings.is_dark_mode? 'dark-theme-unlock':''">
<md-toolbar class="md-primary">
<h3 class="md-title" style="flex: 1">{{ is_create ? lang.title[0] : lang.title[1] }}</h3>
</md-toolbar>
@ -199,4 +199,10 @@ export default {
margin-top: 1rem;
}
}
.dark-theme-unlock {
background: #424242;
.center {
color: #fff !important;
}
}
</style>