laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] darkmode

Browse Source
This commit is contained in:
syuilo 2018-04-20 03:41:24 +09:00
parent d4a2c6cef4
commit f2fea7f3cd
11 changed files with 130 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/app/boot.js
View File

@ -62,6 +62,14 @@
app = isMobile ? 'mobile' : 'desktop'; app = isMobile ? 'mobile' : 'desktop';
} }
// Dark/Light
const me = JSON.parse(localStorage.getItem('me') || null);
if (me && me.clientSettings) {
if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
document.documentElement.setAttribute('data-darkmode', 'true');
}
}
// Script version // Script version
const ver = localStorage.getItem('v') || VERSION; const ver = localStorage.getItem('v') || VERSION;

25
src/client/app/desktop/script.ts
View File

@ -2,6 +2,7 @@
* Desktop Client * Desktop Client
*/ */
import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
// Style // Style
@ -43,6 +44,30 @@ init(async (launch) => {
require('./views/components'); require('./views/components');
require('./views/widgets'); require('./views/widgets');
// Dark/Light
Vue.mixin({
mounted() {
const set = () => {
if (!this.$el || !this.os || !this.os.i) return;
if (this.os.i.clientSettings.dark) {
document.documentElement.setAttribute('data-darkmode', 'true');
this.$el.setAttribute('data-darkmode', 'true');
} else {
document.documentElement.removeAttribute('data-darkmode');
this.$el.removeAttribute('data-darkmode');
}
};
set();
this.$watch('os.i.clientSettings', i => {
set();
}, {
deep: true
});
}
});
// Init router // Init router
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',

3
src/client/app/desktop/style.styl
View File

@ -44,6 +44,9 @@ html
height 100% height 100%
background #f7f7f7 background #f7f7f7
&[data-darkmode]
background #191B22
body body
display flex display flex
flex-direction column flex-direction column

34
src/client/app/desktop/views/components/notes.note.vue
View File

@ -291,11 +291,11 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.note root(isDark)
margin 0 margin 0
padding 0 padding 0
background #fff background isDark ? #282C37 : #fff
border-bottom solid 1px #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child &:first-child
border-top-left-radius 6px border-top-left-radius 6px
@ -374,7 +374,7 @@ export default Vue.extend({
&:hover &:hover
> .main > footer > button > .main > footer > button
color #888 color isDark ? #707b97 : #888
> .avatar-anchor > .avatar-anchor
display block display block
@ -407,7 +407,7 @@ export default Vue.extend({
margin 0 .5em 0 0 margin 0 .5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color #627079 color isDark ? #fff : #627079
font-size 1em font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
@ -426,7 +426,7 @@ export default Vue.extend({
> .username > .username
margin 0 .5em 0 0 margin 0 .5em 0 0
color #ccc color isDark ? #606984 : #ccc
> .info > .info
margin-left auto margin-left auto
@ -443,7 +443,7 @@ export default Vue.extend({
border-right solid 1px #eaeaea border-right solid 1px #eaeaea
> .created-at > .created-at
color #c0c0c0 color isDark ? #606984 : #c0c0c0
> .body > .body
@ -454,7 +454,7 @@ export default Vue.extend({
padding 0 padding 0
overflow-wrap break-word overflow-wrap break-word
font-size 1.1em font-size 1.1em
color #717171 color isDark ? #fff : #717171
>>> .title >>> .title
display block display block
@ -462,7 +462,7 @@ export default Vue.extend({
padding 4px padding 4px
font-size 90% font-size 90%
text-align center text-align center
background #eef1f3 background isDark ? #2f3944 : #eef1f3
border-radius 4px border-radius 4px
>>> .code >>> .code
@ -471,12 +471,12 @@ export default Vue.extend({
>>> .quote >>> .quote
margin 8px margin 8px
padding 6px 12px padding 6px 12px
color #aaa color isDark ? #6f808e : #aaa
border-left solid 3px #eee border-left solid 3px isDark ? #637182 : #eee
> .reply > .reply
margin-right 8px margin-right 8px
color #717171 color isDark ? #99abbf : #717171
> .rp > .rp
margin-left 4px margin-left 4px
@ -547,13 +547,13 @@ export default Vue.extend({
padding 0 8px padding 0 8px
line-height 32px line-height 32px
font-size 1em font-size 1em
color #ddd color isDark ? #606984 : #ddd
background transparent background transparent
border none border none
cursor pointer cursor pointer
&:hover &:hover
color #666 color isDark ? #9198af : #666
> .count > .count
display inline display inline
@ -572,6 +572,12 @@ export default Vue.extend({
padding-top 4px padding-top 4px
background rgba(0, 0, 0, 0.0125) background rgba(0, 0, 0, 0.0125)
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>

16
src/client/app/desktop/views/components/notes.vue
View File

@ -50,17 +50,16 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notes root(isDark)
> .date > .date
display block display block
margin 0 margin 0
line-height 32px line-height 32px
font-size 14px font-size 14px
text-align center text-align center
color #aaa color isDark ? #666b79 : #aaa
background #fdfdfd background isDark ? #242731 : #fdfdfd
border-bottom solid 1px #eaeaea border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span span
margin 0 16px margin 0 16px
@ -86,4 +85,11 @@ export default Vue.extend({
&:active &:active
background #eee background #eee
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style> </style>

16
src/client/app/desktop/views/components/settings.vue
View File

@ -37,14 +37,17 @@
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
<h1>デザインと表示</h1> <h1>デザインと表示</h1>
<div class="div"> <div class="div">
<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button> <button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</div>
<div class="div">
<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div> </div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/> <mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/> <mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開"> <mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
<span>位置情報が添付された投稿のマップを自動的に展開します。</span> <span>位置情報が添付された投稿のマップを自動的に展開します。</span>
</mk-switch> </mk-switch>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</section> </section>
<section class="web" v-show="page == 'web'"> <section class="web" v-show="page == 'web'">
@ -298,6 +301,12 @@ export default Vue.extend({
autoWatch: v autoWatch: v
}); });
}, },
onChangeDark(v) {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: v
});
},
onChangeShowPostFormOnTopOfTl(v) { onChangeShowPostFormOnTopOfTl(v) {
(this as any).api('i/update_client_setting', { (this as any).api('i/update_client_setting', {
name: 'showPostFormOnTopOfTl', name: 'showPostFormOnTopOfTl',
@ -431,7 +440,6 @@ export default Vue.extend({
> .web > .web
> .div > .div
border-bottom solid 1px #eee border-bottom solid 1px #eee
padding 0 0 16px 0 margin 16px 0
margin 0 0 16px 0
</style> </style>

16
src/client/app/desktop/views/components/timeline.vue
View File

@ -66,14 +66,16 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-timeline root(isDark)
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px
> header > header
padding 0 8px padding 0 8px
z-index 10 z-index 10
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px rgba(0, 0, 0, 0.08) box-shadow 0 1px rgba(0, 0, 0, 0.08)
> span > span
@ -99,10 +101,16 @@ export default Vue.extend({
background $theme-color background $theme-color
&:not([data-is-active]) &:not([data-is-active])
color #6f7477 color isDark ? #9aa2a7 : #6f7477
cursor pointer cursor pointer
&:hover &:hover
color #525a5f color isDark ? #d9dcde : #525a5f
.mk-timeline[data-darkmode]
root(true)
.mk-timeline:not([data-darkmode])
root(false)
</style> </style>

4
src/client/app/desktop/views/components/ui.header.vue
View File

@ -169,10 +169,10 @@ root(isDark)
> .mk-ui-header-search > .mk-ui-header-search
display none display none
.header[data-is-darkmode] .header[data-darkmode]
root(true) root(true)
.header .header:not([data-darkmode])
root(false) root(false)
</style> </style>

23
src/client/app/desktop/views/components/widget-container.vue
View File

@ -34,8 +34,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-widget-container root(isDark)
background #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px
overflow hidden overflow hidden
@ -45,6 +45,8 @@ export default Vue.extend({
border none !important border none !important
> header > header
background isDark ? #313543 : #fff
> .title > .title
z-index 1 z-index 1
margin 0 margin 0
@ -52,7 +54,7 @@ export default Vue.extend({
line-height 42px line-height 42px
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa] > [data-fa]
@ -70,16 +72,23 @@ export default Vue.extend({
width 42px width 42px
font-size 0.9em font-size 0.9em
line-height 42px line-height 42px
color #ccc color isDark ? #9baec8 : #ccc
&:hover &:hover
color #aaa color isDark ? #b2c1d5 : #aaa
&:active &:active
color #999 color isDark ? #b2c1d5 : #999
&.withGradient &.withGradient
> .title > .title
background linear-gradient(to bottom, #fff, #ececec) background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px rgba(#000, 0.11) box-shadow 0 1px rgba(#000, 0.11)
.mk-widget-container[data-darkmode]
root(true)
.mk-widget-container:not([data-darkmode])
root(false)
</style> </style>

22
src/client/app/desktop/views/components/window.vue
View File

@ -465,7 +465,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-window root(isDark)
display block display block
> .bg > .bg
@ -559,7 +559,7 @@ export default Vue.extend({
> .body > .body
height 100% height 100%
overflow hidden overflow hidden
background #fff background isDark ? #282C37 : #fff
border-radius 6px border-radius 6px
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2) box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
@ -571,12 +571,12 @@ export default Vue.extend({
overflow hidden overflow hidden
white-space nowrap white-space nowrap
cursor move cursor move
background #fff background isDark ? #313543 : #fff
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
box-shadow 0 1px 0 rgba(#000, 0.1) box-shadow 0 1px 0 rgba(#000, 0.1)
&.withGradient &.withGradient
background linear-gradient(to bottom, #fff, #ececec) background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px 0 rgba(#000, 0.15) box-shadow 0 1px 0 rgba(#000, 0.15)
&, * &, *
@ -593,7 +593,7 @@ export default Vue.extend({
font-size 1em font-size 1em
line-height $header-height line-height $header-height
font-weight normal font-weight normal
color #666 color isDark ? #e3e5e8 : #666
> div:last-child > div:last-child
position absolute position absolute
@ -608,16 +608,16 @@ export default Vue.extend({
padding 0 padding 0
cursor pointer cursor pointer
font-size 1em font-size 1em
color rgba(#000, 0.4) color isDark ? #9baec8 : rgba(#000, 0.4)
border none border none
outline none outline none
background transparent background transparent
&:hover &:hover
color rgba(#000, 0.6) color isDark ? #b2c1d5 : rgba(#000, 0.6)
&:active &:active
color darken(#000, 30%) color isDark ? #b2c1d5 : darken(#000, 30%)
> [data-fa] > [data-fa]
padding 0 padding 0
@ -632,4 +632,10 @@ export default Vue.extend({
> .main > .body > .content > .main > .body > .content
height calc(100% - 40px) height calc(100% - 40px)
.mk-window[data-darkmode]
root(true)
.mk-window:not([data-darkmode])
root(false)
</style> </style>

7
src/client/app/init.css
View File

@ -56,6 +56,13 @@ body > noscript {
animation-delay: 0.32s; animation-delay: 0.32s;
} }
html[data-darkmode] #ini {
background: #191b22;
}
html[data-darkmode] #ini > p {
color: #fff;
}
@keyframes ini { @keyframes ini {
0%, 80%, 100% { 0%, 80%, 100% {
opacity: 1; opacity: 1;