diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue index 5e2d448d8b..ef7ee111e2 100644 --- a/src/client/app/common/views/pages/follow.vue +++ b/src/client/app/common/views/pages/follow.vue @@ -1,5 +1,5 @@ <template> -<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> +<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching"> <div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div> <main> diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue index 09f766696b..18df1241a9 100644 --- a/src/client/app/common/views/widgets/posts-monitor.vue +++ b/src/client/app/common/views/widgets/posts-monitor.vue @@ -4,7 +4,7 @@ <template slot="header">%fa:chart-line%%i18n:@title%</template> <button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button> - <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode"> + <div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }"> <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2"> <defs> <linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0"> diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue index d8a94f6cbe..8ade6a7210 100644 --- a/src/client/app/desktop/views/components/received-follow-requests-window.vue +++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue @@ -2,7 +2,7 @@ <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> <span slot="header">%fa:envelope R% %i18n:@title%</span> - <div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode"> + <div class="slpqaxdoxhvglersgjukmvizkqbmbokc"> <div v-for="req in requests"> <router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link> <span> diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue index 75253e0788..4f944981a5 100644 --- a/src/client/app/desktop/views/components/user-lists-window.vue +++ b/src/client/app/desktop/views/components/user-lists-window.vue @@ -2,7 +2,7 @@ <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> <span slot="header">%fa:list% %i18n:@title%</span> - <div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode"> + <div class="xkxvokkjlptzyewouewmceqcxhpgzprp"> <button class="ui" @click="add">%i18n:@create-list%</button> <a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a> </div> diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue index 48c80c82c4..cd3336079b 100644 --- a/src/client/app/desktop/views/pages/deck/deck.vue +++ b/src/client/app/desktop/views/pages/deck/deck.vue @@ -1,6 +1,6 @@ <template> <mk-ui :class="$style.root"> - <div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode" :style="style"> + <div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style"> <template v-for="ids in layout"> <div v-if="ids.length > 1" class="folder"> <template v-for="id, i in ids"> diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue index 9b466053f7..36ae360248 100644 --- a/src/client/app/desktop/views/pages/user/user.friends.vue +++ b/src/client/app/desktop/views/pages/user/user.friends.vue @@ -40,7 +40,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.hozptpaliadatkehcmcayizwzwwctpbc background var(--face) box-shadow var(--shadow) border-radius var(--round) @@ -53,7 +53,7 @@ root(isDark) line-height 42px font-size 0.9em font-weight bold - background isDark ? #313543 : inherit + background var(--faceHeader) color var(--faceHeaderText) box-shadow 0 1px rgba(#000, 0.07) @@ -72,7 +72,7 @@ root(isDark) > .user padding 16px - border-bottom solid 1px isDark ? #21242f : #eee + border-bottom solid 1px var(--faceDivider) &:last-child border-bottom none @@ -98,24 +98,19 @@ root(isDark) margin 0 font-size 16px line-height 24px - color isDark ? #ccc : #555 + color var(--text) > .username display block margin 0 font-size 15px line-height 16px - color isDark ? #555 : #ccc + color var(--text) + opacity 0.7 > .mk-follow-button position absolute top 16px right 16px -.hozptpaliadatkehcmcayizwzwwctpbc[data-darkmode] - root(true) - -.hozptpaliadatkehcmcayizwzwwctpbc:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue index ec46e955b5..76eb8f9e1c 100644 --- a/src/client/app/desktop/views/pages/user/user.header.vue +++ b/src/client/app/desktop/views/pages/user/user.header.vue @@ -100,9 +100,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.header background var(--face) box-shadow var(--shadow) border-radius var(--round) @@ -182,12 +180,12 @@ root(isDark) > .body padding 16px 16px 16px 154px - color isDark ? #c5ced6 : #555 + color var(--text) > .status margin-top 16px padding-top 16px - border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1) + border-top solid 1px var(--faceDivider) font-size 80% > * @@ -196,13 +194,13 @@ root(isDark) margin-right 16px &:not(:last-child) - border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1) + border-right solid 1px var(--faceDivider) &.clickable cursor pointer &:hover - color isDark ? #fff : #000 + color var(--faceTextButtonHover) > b margin-right 4px @@ -210,10 +208,4 @@ root(isDark) font-weight bold color var(--primary) -.header[data-darkmode] - root(true) - -.header:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue index 6e9d09e79f..628d5b6d95 100644 --- a/src/client/app/desktop/views/pages/user/user.photos.vue +++ b/src/client/app/desktop/views/pages/user/user.photos.vue @@ -39,7 +39,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.dzsuvbsrrrwobdxifudxuefculdfiaxd background var(--face) box-shadow var(--shadow) border-radius var(--round) @@ -52,7 +52,7 @@ root(isDark) line-height 42px font-size 0.9em font-weight bold - background: isDark ? #313543 : inherit + background var(--faceHeader) color var(--faceHeaderText) box-shadow 0 1px rgba(#000, 0.07) @@ -87,10 +87,4 @@ root(isDark) > i margin-right 4px -.dzsuvbsrrrwobdxifudxuefculdfiaxd[data-darkmode] - root(true) - -.dzsuvbsrrrwobdxifudxuefculdfiaxd:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue index e5ea8d1cc9..fe10b54378 100644 --- a/src/client/app/desktop/views/pages/user/user.profile.vue +++ b/src/client/app/desktop/views/pages/user/user.profile.vue @@ -85,7 +85,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.profile background var(--face) box-shadow var(--shadow) border-radius var(--round) @@ -96,7 +96,7 @@ root(isDark) > .friend-form padding 16px text-align center - border-bottom solid 1px isDark ? #21242f : #eee + border-bottom solid 1px var(--faceDivider) > .followed margin 12px 0 0 0 @@ -114,7 +114,7 @@ root(isDark) > .action-form padding 16px text-align center - border-bottom solid 1px isDark ? #21242f : #eee + border-bottom solid 1px var(--faceDivider) > * width 100% @@ -122,10 +122,4 @@ root(isDark) &:not(:last-child) margin-bottom 12px -.profile[data-darkmode] - root(true) - -.profile:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue index fe3ca9154b..608c12b7e2 100644 --- a/src/client/app/desktop/views/pages/user/user.timeline.vue +++ b/src/client/app/desktop/views/pages/user/user.timeline.vue @@ -112,9 +112,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.oh5y2r7l5lx8j6jj791ykeiwgihheguk background var(--face) border-radius var(--round) overflow hidden @@ -123,7 +121,7 @@ root(isDark) padding 0 8px z-index 10 background var(--faceHeader) - box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08) + box-shadow 0 1px var(--desktopTimelineHeaderShadow) > span display inline-block @@ -148,11 +146,11 @@ root(isDark) background var(--primary) &:not([data-active]) - color isDark ? #9aa2a7 : #6f7477 + color var(--desktopTimelineSrc) cursor pointer &:hover - color isDark ? #d9dcde : #525a5f + color var(--desktopTimelineSrcHover) > .loading padding 64px 0 @@ -171,10 +169,4 @@ root(isDark) font-size 3em color #ccc -.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode] - root(true) - -.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue index a7065af5e7..a8da890936 100644 --- a/src/client/app/desktop/views/pages/user/user.vue +++ b/src/client/app/desktop/views/pages/user/user.vue @@ -1,6 +1,6 @@ <template> <mk-ui> - <div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> + <div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching"> <div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div> <div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div> <main> @@ -79,7 +79,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.xygkxeaeontfaokvqmiblezmhvhostak width 980px padding 16px margin 0 auto @@ -93,12 +93,12 @@ root(isDark) border-radius var(--round) &.is-suspended - color isDark ? #ffb4b4 : #570808 - background isDark ? #611d1d : #ffdbdb + color var(--suspendedInfoFg) + background var(--suspendedInfoBg) &.is-remote - color isDark ? #ffbd3e : #573c08 - background isDark ? #42321c : #fff0db + color var(--remoteInfoFg) + background var(--remoteInfoBg) > a font-weight bold @@ -139,21 +139,15 @@ root(isDark) > .nav padding 16px font-size 12px - color #aaa - background isDark ? #21242f : #fff + color var(--text) + background var(--face) box-shadow var(--shadow) border-radius var(--round) a - color #999 + color var(--text)99 i - color #ccc - -.xygkxeaeontfaokvqmiblezmhvhostak[data-darkmode] - root(true) - -.xygkxeaeontfaokvqmiblezmhvhostak:not([data-darkmode]) - root(false) + color var(--text) </style> diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue index 8ff0bb5d0d..c10ac1ca17 100644 --- a/src/client/app/desktop/views/widgets/polls.vue +++ b/src/client/app/desktop/views/widgets/polls.vue @@ -4,7 +4,7 @@ <template slot="header">%fa:chart-pie%%i18n:@title%</template> <button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button> - <div class="mkw-polls--body" :data-darkmode="$store.state.device.darkmode"> + <div class="mkw-polls--body"> <div class="poll" v-if="!fetching && poll != null"> <p v-if="poll.text"><router-link :to="poll | notePage">{{ poll.text }}</router-link></p> <p v-if="!poll.text"><router-link :to="poll | notePage">%fa:link%</router-link></p> @@ -64,11 +64,11 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.mkw-polls--body > .poll padding 16px font-size 12px - color isDark ? #9ea4ad : #555 + color var(--text) > p margin 0 0 8px 0 @@ -91,10 +91,4 @@ root(isDark) > [data-fa] margin-right 4px -.mkw-polls--body[data-darkmode] - root(true) - -.mkw-polls--body:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue index aea0c90e34..fa35138c31 100644 --- a/src/client/app/desktop/views/widgets/profile.vue +++ b/src/client/app/desktop/views/widgets/profile.vue @@ -46,8 +46,7 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) - +.egwyvoaaryotefqhqtmiyawwefemjfsd-body &[data-compact] > .banner:before content "" @@ -88,7 +87,7 @@ root(isDark) > .banner height 100px - background-color isDark ? #303e4a : #f5f5f5 + background-color var(--primaryDarken10) background-size cover background-position center cursor pointer @@ -109,19 +108,14 @@ root(isDark) margin 10px 0 0 84px line-height 16px font-weight bold - color isDark ? #fff : #555 + color var(--text) > .username display block margin 4px 0 8px 84px line-height 16px font-size 0.9em - color isDark ? #606984 : #999 - -.egwyvoaaryotefqhqtmiyawwefemjfsd-body[data-darkmode] - root(true) - -.egwyvoaaryotefqhqtmiyawwefemjfsd-body:not([data-darkmode]) - root(false) + color var(--text) + opacity 0.7 </style> diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue index 328fa56697..28c6372b6f 100644 --- a/src/client/app/desktop/views/widgets/users.vue +++ b/src/client/app/desktop/views/widgets/users.vue @@ -73,11 +73,11 @@ export default define({ </script> <style lang="stylus" scoped> -root(isDark) +.mkw-users .mkw-users--body > .user padding 16px - border-bottom solid 1px isDark ? #1c2023 : #eee + border-bottom solid 1px var(--faceDivider) &:last-child border-bottom none @@ -103,14 +103,15 @@ root(isDark) margin 0 font-size 16px line-height 24px - color isDark ? #fff : #555 + color var(--text) > .username display block margin 0 font-size 15px line-height 16px - color isDark ? #606984 : #ccc + color var(--text) + opacity 0.7 > .mk-follow-button position absolute @@ -132,10 +133,4 @@ root(isDark) > [data-fa] margin-right 4px -.mkw-users[data-darkmode] - root(true) - -.mkw-users:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue index 6d3fc2343a..5fca19939e 100644 --- a/src/client/app/mobile/views/components/drive-file-chooser.vue +++ b/src/client/app/mobile/views/components/drive-file-chooser.vue @@ -46,7 +46,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) +.cdxzvcfawjxdyxsekbxbfgtplebnoneb position fixed z-index 20000 top 0 @@ -59,11 +59,11 @@ root(isDark) > .body width 100% height 100% - background var(--face) + background var(--faceHeader) > header - border-bottom solid 1px isDark ? #1b1f29 : #eee - color isDark ? #fff : #111 + border-bottom solid 1px var(--faceDivider) + color var(--text) > h1 margin 0 @@ -96,10 +96,4 @@ root(isDark) overflow scroll -webkit-overflow-scrolling touch -.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode] - root(true) - -.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue index 616a3aee1b..edba8585bd 100644 --- a/src/client/app/mobile/views/pages/home.vue +++ b/src/client/app/mobile/views/pages/home.vue @@ -22,7 +22,7 @@ <button @click="fn">%fa:pencil-alt%</button> </template> - <main :data-darkmode="$store.state.device.darkmode"> + <main> <div class="nav" v-if="showNav"> <div class="bg" @click="showNav = false"></div> <div class="pointer"></div> diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index a3b508e37e..b83eaf6d33 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -1,7 +1,7 @@ <template> <mk-ui> <span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span> - <main :data-darkmode="$store.state.device.darkmode"> + <main> <div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div> <div> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index d7edda1a74..a2a6bd7a83 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -1,7 +1,7 @@ <template> <mk-ui> <template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template> - <main v-if="!fetching" :data-darkmode="$store.state.device.darkmode"> + <main v-if="!fetching"> <div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div> <div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div> <header> diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index f8b3420e7c..462999a64f 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -106,6 +106,11 @@ "mfmQuote": ":alpha<0.7<$text", "mfmQuoteLine": ":alpha<0.6<$text", + "suspendedInfoBg": "#611d1d", + "suspendedInfoFg": "#ffb4b4", + "remoteInfoBg": "#42321c", + "remoteInfoFg": "#ffbd3e", + "messagingRoomBg": "@bg", "messagingRoomInfo": "#fff", "messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index 7652c6027d..60824e0a84 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -106,6 +106,11 @@ "mfmQuote": ":alpha<0.6<$text", "mfmQuoteLine": ":alpha<0.5<$text", + "suspendedInfoBg": "#ffdbdb", + "suspendedInfoFg": "#570808", + "remoteInfoBg": "#fff0db", + "remoteInfoFg": "#573c08", + "messagingRoomBg": "#fff", "messagingRoomInfo": "#000", "messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",