diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 5e2d448d8bfdf08f97730ba77f02c638fed2fb02..ef7ee111e26f90619cee6689a6f9a89e018bc216 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 09f766696bd895f64b72ac5212b8daf66a4631b3..18df1241a9bdfebe5e964602d7c4eb3960fb910d 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 d8a94f6cbe9f2fea20b4980d5fe235b16b661df6..8ade6a72102d82ca36514b1f13a15585e684208a 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 75253e0788452b9623be583bedf361b7a260c2ae..4f944981a5e67fc788c378919279754762d9066f 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 48c80c82c4c7297d4268aff724071aff1e25f027..cd3336079b17d6f8a5d3503f7863ae551e7b9ec7 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 9b466053f779efc54f8b7fb5cb5c0fddb2c9b649..36ae360248513f132778e3297a50b43fdaf1cb03 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 ec46e955b5fea1c32f580ebc64a1100ccc859a92..76eb8f9e1c23a17db88a14a9f3a6fcdf15825ad9 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 6e9d09e79f82655b4dcd73f0fa811341bc4d59aa..628d5b6d95a8f460f7d7266246730b47731deb56 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 e5ea8d1cc9ec9fdac6e7ecc931fc4ed546e14f7b..fe10b5437826febc65628e38f782abda8f3a57e3 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 fe3ca9154b955763ba7815666bab18c7d2248897..608c12b7e2ae92c5eb9668be35d23af9ac506cc1 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 a7065af5e757263c566e1fd5457c05a357614db3..a8da8909366f2b032edd3540602ce6ecae25f36a 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 8ff0bb5d0d4165ad4e5a88538ae5eb0e37a7127f..c10ac1ca17bcfe6f5c7cf73ffaf291c7b595bd15 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 aea0c90e34af639f0a2d3b39aee6ca40a16bda64..fa35138c31aefed718bf75e086c1a618c530f4bf 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 328fa56697b637d9d46a43a46e3a9ce7a9c1e5b2..28c6372b6f98fdda8d4192a673ef18107e2905b5 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 6d3fc2343a8cf2718016ea0eaf3223c80d851050..5fca19939ed921f64699e9e28d803aa5ac305939 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 616a3aee1b8ca717c1843124aa3a144434626183..edba8585bd9a3f155273ba4974e6fa476e6219d3 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 a3b508e37e2fad815b15ea3ea436bac082f829f3..b83eaf6d33815e43697015e65aa2f6079afca6bf 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 d7edda1a74f79bb4688e5a10c4ce1113a9d1ca02..a2a6bd7a83ad028f1e5afa347c4b27b4d5a678a3 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 f8b3420e7c63428665ff19a2dba60c5a4c1166d8..462999a64f52f62d1a0447f0d83466b536692094 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 7652c6027d518da785f9874d69ac85622c8ff99e..60824e0a84b04fce6ecf1f26b1609d8cb75d6d0d 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)",