diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 938ab602f0..ca1b6eb928 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -137,7 +137,7 @@ root(isDark)
overflow hidden
font-weight bold
text-overflow ellipsis
- color isDark ? #fff : #627079
+ color var(--noteHeaderName)
> .username
margin 0 .5em 0 0
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 5e7c8b42ca..9222d8fab9 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,8 +225,6 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
root(isDark)
overflow hidden
text-align left
@@ -243,24 +241,24 @@ root(isDark)
text-align center
color #999
cursor pointer
- background isDark ? #21242d : #fafafa
+ background var(--subNoteBg)
outline none
border none
- border-bottom solid 1px isDark ? #1c2023 : #eef0f2
- border-radius 6px 6px 0 0
+ border-bottom solid 1px var(--faceDivider)
+ border-radius var(--round) var(--round) 0 0
&:hover
- background isDark ? #2e3440 : #f6f6f6
+ box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:active
- background isDark ? #21242b : #f0f0f0
+ box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
&:disabled
- color isDark ? #21242b : #ccc
+ cursor wait
> .conversation
> *
- border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+ border-bottom 1px solid var(--faceDivider)
> .renote
color var(--renoteText)
@@ -287,7 +285,7 @@ root(isDark)
padding-top 8px
> .reply-to
- border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+ border-bottom 1px solid var(--faceDivider)
> article
padding 28px 32px 18px 32px
@@ -299,7 +297,7 @@ root(isDark)
&:hover
> footer > button
- color isDark ? #707b97 : #888
+ color var(--noteActionsHighlighted)
> .avatar
width 60px
@@ -316,7 +314,7 @@ root(isDark)
display inline-block
margin 0
line-height 24px
- color isDark ? #fff : #627079
+ color var(--noteHeaderName)
font-size 18px
font-weight 700
text-align left
@@ -394,20 +392,20 @@ root(isDark)
background transparent
border none
font-size 1em
- color isDark ? #606984 : #ccc
+ color var(--noteActions)
cursor pointer
&:hover
- color isDark ? #a1a8bf : #444
+ color var(--noteActionsHover)
&.replyButton:hover
- color #0af
+ color var(--noteActionsReplyHover)
&.renoteButton:hover
- color #8d0
+ color var(--noteActionsRenoteHover)
&.reactionButton:hover
- color #fa0
+ color var(--noteActionsReactionHover)
> .count
display inline
@@ -415,11 +413,11 @@ root(isDark)
color #999
&.reacted, &.reacted:hover
- color #fa0
+ color var(--noteActionsReactionHover)
> .replies
> *
- border-top 1px solid isDark ? #1c2023 : #eef0f2
+ border-top 1px solid var(--faceDivider)
.mk-note-detail[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 8f01ddd43c..13e2991683 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -47,7 +47,7 @@ root(isDark)
margin 0
padding 16px 32px
font-size 0.9em
- background isDark ? #21242d : #fcfcfc
+ background var(--subNoteBg)
> .avatar
flex-shrink 0
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 17f7e2235a..160de5199d 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -398,7 +398,7 @@ root(isDark)
&:hover
> .main > footer > button
- color isDark ? #707b97 : #888
+ color var(--noteActionsHighlighted)
> .avatar
flex-shrink 0
@@ -500,22 +500,22 @@ root(isDark)
padding 0 8px
line-height 32px
font-size 1em
- color isDark ? #606984 : #ddd
+ color var(--noteActions)
background transparent
border none
cursor pointer
&:hover
- color isDark ? #a1a8bf : #444
+ color var(--noteActionsHover)
&.replyButton:hover
- color #0af
+ color var(--noteActionsReplyHover)
&.renoteButton:hover
- color #8d0
+ color var(--noteActionsRenoteHover)
&.reactionButton:hover
- color #fa0
+ color var(--noteActionsReactionHover)
> .count
display inline
@@ -523,7 +523,7 @@ root(isDark)
color #999
&.reacted, &.reacted:hover
- color #fa0
+ color var(--noteActionsReactionHover)
> .detail
padding-top 4px
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 3ba9ae914e..f1bf60d528 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -33,7 +33,7 @@ root(isDark)
display flex
padding 16px
font-size 10px
- background isDark ? #21242d : #fcfcfc
+ background var(--subNoteBg)
&.smart
> .main
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index f1c4a5979a..ffb284fb42 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -402,7 +402,7 @@ root(isDark)
border none
box-shadow none
font-size 1em
- color isDark ? #606984 : #ddd
+ color var(--noteActions)
cursor pointer
&:not(:last-child)
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index c56d10093d..472c18088d 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,8 +223,6 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
root(isDark)
overflow hidden
width 100%
@@ -248,22 +246,22 @@ root(isDark)
text-align center
color #999
cursor pointer
- background isDark ? #21242d : #fafafa
+ background var(--subNoteBg)
outline none
border none
- border-bottom solid 1px isDark ? #1c2023 : #eef0f2
+ border-bottom solid 1px var(--faceDivider)
border-radius 6px 6px 0 0
box-shadow none
&:hover
- background isDark ? #16181d : #f6f6f6
+ box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
- &:disabled
- color #ccc
+ &:active
+ box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
> .conversation
> *
- border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+ border-bottom 1px solid var(--faceDivider)
> .renote
color var(--renoteText)
@@ -290,7 +288,7 @@ root(isDark)
padding-top 8px
> .reply-to
- border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+ border-bottom 1px solid var(--faceDivider)
> article
padding 14px 16px 9px 16px
@@ -323,7 +321,7 @@ root(isDark)
> .name
display inline-block
margin .4em 0
- color isDark ? #fff : #627079
+ color var(--noteHeaderName)
font-size 16px
font-weight bold
text-align left
@@ -407,7 +405,7 @@ root(isDark)
border none
box-shadow none
font-size 1em
- color isDark ? #606984 : #ddd
+ color var(--noteActions)
cursor pointer
&:not(:last-child)
@@ -426,7 +424,7 @@ root(isDark)
> .replies
> *
- border-top 1px solid isDark ? #1c2023 : #eef0f2
+ border-top 1px solid var(--faceDivider)
.mk-note-detail[data-darkmode]
root(true)
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index c25f827dad..2f38c9e97d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -45,7 +45,7 @@ root(isDark)
display flex
padding 16px
font-size 10px
- background isDark ? #21242d : #fcfcfc
+ background var(--subNoteBg)
@media (min-width 350px)
font-size 12px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8b7c559997..859fc88043 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -442,7 +442,7 @@ root(isDark)
border none
box-shadow none
font-size 1em
- color isDark ? #606984 : #ddd
+ color var(--noteActions)
cursor pointer
&:not(:last-child)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 533910de76..77a41228d0 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,8 +14,15 @@
"faceDivider": "rgba(0, 0, 0, 0.3)",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
+ "subNoteBg": "rgba(0, 0, 0, 0.18)",
"renoteGradient": "#314027",
"renoteText": "#9dbb00",
+ "noteActions": "#606984",
+ "noteActionsHover": "#a1a8bf",
+ "noteActionsReplyHover": "#0af",
+ "noteActionsRenoteHover": "#8d0",
+ "noteActionsReactionHover": "#fa0",
+ "noteActionsHighlighted": "#707b97",
"modalBackdrop": "rgba(0, 0, 0, 0.5)",
"dateDividerBg": "#242731",
"dateDividerFg": "#666b79",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 18d214d041..7c26fbf6e6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -7,9 +7,9 @@
"primary": "#fb8d4e",
"primaryForeground": "#fff",
"bg": "#1b1a35",
- "face": "#282c37",
- "faceHeader": "#313543",
- "faceDivider": "rgba(0, 0, 0, 0.3)",
+ "face": "#2e2a3e",
+ "faceHeader": "#36314e",
+ "dateDividerBg": "#26253c",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"renoteGradient": "#5d2d1a",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index df85fb973d..28cc71bdb7 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,8 +14,15 @@
"faceDivider": "rgba(0, 0, 0, 0.082)",
"popupBg": "#fff",
"popupFg": "#586069",
+ "subNoteBg": "rgba(0, 0, 0, 0.01)",
"renoteGradient": "#edfde2",
"renoteText": "#9dbb00",
+ "noteActions": "#ddd",
+ "noteActionsHover": "#444",
+ "noteActionsReplyHover": "#0af",
+ "noteActionsRenoteHover": "#8d0",
+ "noteActionsReactionHover": "#fa0",
+ "noteActionsHighlighted": "#888",
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
"dateDividerBg": "#fdfdfd",
"dateDividerFg": "#aaa",