diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index a24524d1c5..238b493a61 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -124,7 +124,7 @@ root(isDark)
.mkw-calendar--body
padding 16px 0
- color isDark ? #c5ced6 : #777
+ color var(--calendarDay)
&:after
content ""
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 6b753068fa..e2f1329b3b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,10 +128,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark)
- color isDark ? #c5ced6 : #777
+.mk-calendar
+ color var(--calendarDay)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
@@ -149,12 +147,10 @@ root(isDark)
line-height 42px
font-size 0.9em
font-weight bold
- color isDark ? #c5ced6 : #888
+ color var(--faceHeaderText)
+ background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07)
- if isDark
- background #313543
-
> [data-fa]
margin-right 4px
@@ -172,7 +168,7 @@ root(isDark)
color var(--faceTextButtonHover)
&:active
- color isDark ? #b2c1d5 : #999
+ color var(--faceTextButtonActive)
&:first-of-type
left 0
@@ -195,49 +191,46 @@ root(isDark)
font-size 14px
&.weekday
- color isDark ? #43d5dc : #19a2a9
+ color var(--calendarWeek)
&[data-is-donichi]
- color isDark ? #ff6679 : #ef95a0
+ color var(--calendarSaturdayOrSunday)
&[data-today]
- box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
+ box-shadow 0 0 0 1px var(--calendarWeek) inset
border-radius 6px
&[data-is-donichi]
- box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
+ box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
&.day
cursor pointer
- color isDark ? #c5ced6 : #777
+ color var(--calendarDay)
> div
border-radius 6px
&:hover > div
- background rgba(#000, isDark ? 0.1 : 0.025)
+ background var(--faceClearButtonHover)
&:active > div
- background rgba(#000, isDark ? 0.2 : 0.05)
+ background var(--faceClearButtonActive)
&[data-is-donichi]
- color isDark ? #ff6679 : #ef95a0
+ color var(--calendarSaturdayOrSunday)
&[data-is-out-of-range]
cursor default
- color rgba(isDark ? #c5ced6 : #777, 0.5)
-
- &[data-is-donichi]
- color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
+ opacity 0.5
&[data-selected]
font-weight bold
> div
- background rgba(#000, isDark ? 0.1 : 0.025)
+ background var(--faceClearButtonHover)
&:active > div
- background rgba(#000, isDark ? 0.2 : 0.05)
+ background var(--faceClearButtonActive)
&[data-today]
> div
@@ -250,10 +243,4 @@ root(isDark)
&:active > div
background var(--primaryDarken10)
-.mk-calendar[data-darkmode]
- root(true)
-
-.mk-calendar:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 2eb80dcd01..1f3f62395a 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -191,7 +191,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
.transition
.mk-notifications-enter
.mk-notifications-leave-to
@@ -208,7 +208,7 @@ root(isDark)
padding 16px
overflow-wrap break-word
font-size 13px
- border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+ border-bottom solid 1px var(--faceDivider)
&:last-child
border-bottom none
@@ -219,7 +219,7 @@ root(isDark)
top 16px
right 12px
vertical-align top
- color isDark ? #606984 : rgba(#000, 0.6)
+ color var(--noteHeaderInfo)
font-size small
&:after
@@ -249,10 +249,10 @@ root(isDark)
margin-right 4px
.note-preview
- color isDark ? #c2cad4 : rgba(#000, 0.7)
+ color var(--noteText)
.note-ref
- color isDark ? #c2cad4 : rgba(#000, 0.7)
+ color var(--noteText)
[data-fa]
font-size 1em
@@ -283,9 +283,9 @@ root(isDark)
line-height 32px
text-align center
font-size 0.8em
- color isDark ? #666b79 : #aaa
- background isDark ? #242731 : #fdfdfd
- border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+ color var(--dateDividerFg)
+ background var(--dateDividerBg)
+ border-bottom solid 1px var(--faceDivider)
span
margin 0 16px
@@ -327,10 +327,4 @@ root(isDark)
> [data-fa]
margin-right 4px
-.mk-notifications[data-darkmode]
- root(true)
-
-.mk-notifications:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 214ec3cdf7..7e171a2397 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -214,8 +214,8 @@ root(isDark)
line-height 32px
font-size 14px
text-align center
- color isDark ? #666b79 : #aaa
- background isDark ? #242731 : #fdfdfd
+ color var(--dateDividerFg)
+ background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 8a28061260..aa48571a5b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -177,8 +177,8 @@ root(isDark)
line-height 32px
text-align center
font-size 0.8em
- color isDark ? #666b79 : #aaa
- background isDark ? #242731 : #fdfdfd
+ color var(--dateDividerFg)
+ background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 8841b0e6bf..9153b1d551 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -243,8 +243,8 @@ root(isDark)
line-height 32px
text-align center
font-size 0.9em
- color isDark ? #666b79 : #aaa
- background isDark ? #242731 : #fdfdfd
+ color var(--dateDividerFg)
+ background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 8243a9bfb3..bfb6c1e62a 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -104,9 +104,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
margin 0 auto
- background isDark ? #282C37 :#fff
+ background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
overflow hidden
@@ -134,8 +134,8 @@ root(isDark)
line-height 32px
text-align center
font-size 0.8em
- color isDark ? #666b79 : #aaa
- background isDark ? #242731 : #fdfdfd
+ color var(--dateDividerFg)
+ background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
@@ -169,10 +169,4 @@ root(isDark)
> [data-fa]
margin-right 4px
-.mk-notifications[data-darkmode]
- root(true)
-
-.mk-notifications:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 403a5ded1d..ef5170e71e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -17,6 +17,8 @@
"faceTextButton": "#9baec8",
"faceTextButtonHover": "#b2c1d5",
"faceTextButtonActive": "#b2c1d5",
+ "faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
+ "faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -48,11 +50,14 @@
"cwButtonFg": "#393f4f",
"cwButtonHoverBg": "#707b97",
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+ "calendarWeek": "#43d5dc",
+ "calendarSaturdayOrSunday": "#ff6679",
+ "calendarDay": "#c5ced6",
"desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff",
"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
- "desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+ "desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
"desktopHeaderSearchFg": "#fff",
"desktopPostFormBg": "@face",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 474fc7ea8f..420a03d2cd 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -16,5 +16,5 @@
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
- "desktopHeaderBg": "#0c0b19"
+ "desktopHeaderBg": "#36314e"
}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f9f9a9a52d..bbffc8e143 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -17,6 +17,8 @@
"faceTextButton": "#ccc",
"faceTextButtonHover": "#aaa",
"faceTextButtonActive": "#999",
+ "faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
+ "faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
"popupBg": "#fff",
"popupFg": "#586069",
"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -48,6 +50,9 @@
"cwButtonFg": "#fff",
"cwButtonHoverBg": "#bbc4ce",
"reactionPickerButtonHoverBg": "#eee",
+ "calendarWeek": "#19a2a9",
+ "calendarSaturdayOrSunday": "#ef95a0",
+ "calendarDay": "#777",
"desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88",