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 c6925d5cec..2555c6f7e0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -343,7 +343,7 @@ root(isDark)
> .reply
margin-right 8px
- color isDark ? #99abbf : #717171
+ color var(--noteText)
> .rp
margin-left 4px
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e30e6c1c8f..de9c9c1450 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -27,17 +27,18 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.mk-note-card
display inline-block
width 150px
//height 120px
font-size 12px
background var(--face)
border-radius 4px
+ box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
> a
display block
- color isDark ? #fff : #2c3940
+ color var(--noteText)
&:hover
text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
left 0
width 100%
height 20px
- background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
+ background linear-gradient(to bottom, transparent 0%, var(--face) 100%)
> .mk-time
display inline-block
padding 8px
color #aaa
-.mk-note-card[data-darkmode]
- root(true)
-
-.mk-note-card:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8bb9f43fab..4af19ade29 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,9 +228,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark)
+.note
font-size 12px
border-bottom solid 1px var(--faceDivider)
@@ -383,7 +381,7 @@ root(isDark)
> .reply
margin-right 8px
- color isDark ? #99abbf : #717171
+ color var(--noteText)
> .rp
margin-left 4px
@@ -449,7 +447,7 @@ root(isDark)
margin-right 28px
&:hover
- color isDark ? #9198af : #666
+ color var(--noteActionsHover)
> .count
display inline
@@ -459,12 +457,6 @@ root(isDark)
&.reacted
color var(--primary)
-.note[data-darkmode]
- root(true)
-
-.note:not([data-darkmode])
- root(false)
-
</style>
<style lang="stylus" module>