diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 90668aee6e..8e62587c20 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -209,7 +209,7 @@ root(isDark)
padding 8px
resize none
font-size 1em
- color isDark ? #fff : #000
+ color var(--inputText)
outline none
border none
border-top solid 1px isDark ? #4b5056 : #eee
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 219f0a7fd5..7f52c62c23 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -103,7 +103,7 @@ root(isDark)
padding 6px 8px
width 300px
font-size 14px
- color isDark ? #fff : #000
+ color var(--inputText)
background isDark ? #191b22 : #fff
border solid 1px var(--primaryAlpha01)
border-radius 4px
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 13cabbdc04..5728a8171b 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -62,7 +62,7 @@ root(isDark)
&:hover
> .button
- border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ border solid 2px var(--inputLabel)
&.disabled
opacity 0.6
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 98c9bf7f5a..d7b83d81cd 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -167,7 +167,7 @@ root(isDark, fill)
width 24px
text-align center
line-height 32px
- color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ color var(--inputLabel)
&:not(:empty) + .input
margin-left 28px
@@ -183,7 +183,7 @@ root(isDark, fill)
left 0
right 0
height 1px
- background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+ background var(--inputBorder)
&:after
content ''
@@ -242,7 +242,7 @@ root(isDark, fill)
transition-duration 0.3s
font-size 16px
line-height 32px
- color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ color var(--inputLabel)
pointer-events none
//will-change transform
transform-origin top left
@@ -257,7 +257,7 @@ root(isDark, fill)
font-weight fill ? bold : normal
font-size 16px
line-height 32px
- color isDark ? #fff : #000
+ color var(--inputText)
background transparent
border none
border-radius 0
@@ -280,7 +280,7 @@ root(isDark, fill)
top 0
font-size 16px
line-height fill ? 44px : 32px
- color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ color var(--inputLabel)
pointer-events none
&:empty
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index ded6b5650c..3a4407abc0 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -87,7 +87,7 @@ root(isDark)
width 20px
height 20px
background none
- border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ border solid 2px var(--inputLabel)
border-radius 100%
transition inherit
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index c32865c690..bdb730fea9 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -103,7 +103,7 @@ root(isDark, fill)
left 0
right 0
height 1px
- background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+ background var(--inputBorder)
&:after
content ''
@@ -143,7 +143,7 @@ root(isDark, fill)
font-weight fill ? bold : normal
font-size 16px
height 32px
- color isDark ? #fff : #000
+ color var(--inputText)
background transparent
border none
border-radius 0
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 53b7dcaf8c..67898ee059 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
margin 42px 0 32px 0
> .input
@@ -84,7 +82,7 @@ root(isDark, fill)
left 0
right 0
background none
- border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+ border solid 1px var(--inputBorder)
border-radius 3px
pointer-events none
@@ -112,7 +110,7 @@ root(isDark, fill)
transition-duration 0.3s
font-size 16px
line-height 32px
- color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+ color var(--inputLabel)
pointer-events none
//will-change transform
transform-origin top left
@@ -126,7 +124,7 @@ root(isDark, fill)
font inherit
font-weight fill ? bold : normal
font-size 16px
- color isDark ? #fff : #000
+ color var(--inputText)
background transparent
border none
border-radius 0
@@ -159,16 +157,10 @@ root(isDark, fill)
left 0 !important
transform scale(0.75)
-.ui-textarea[data-darkmode]
- &.fill
- root(true, true)
- &:not(.fill)
- root(true, false)
+.ui-textarea.fill
+ root(true)
-.ui-textarea:not([data-darkmode])
- &.fill
- root(false, true)
- &:not(.fill)
- root(false, false)
+.ui-textarea:not(.fill)
+ root(false)
</style>
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index f9b8415b5b..86489cf8be 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -200,17 +200,17 @@ export default Vue.extend({
top 0
width 100%
-root(isDark)
+.mk-url-preview
> a
display block
font-size 14px
- border solid 1px isDark ? #191b1f : #eee
+ border solid 1px var(--urlPreviewBorder)
border-radius 4px
overflow hidden
&:hover
text-decoration none
- border-color isDark ? #4f5561 : #ddd
+ border-color var(--urlPreviewBorderHover)
> article > header > h1
text-decoration underline
@@ -235,11 +235,11 @@ root(isDark)
> h1
margin 0
font-size 1em
- color isDark ? #d6dae0 : #555
+ color var(--urlPreviewTitle)
> p
margin 0
- color isDark ? #a4aab3 : #777
+ color var(--urlPreviewText)
font-size 0.8em
> footer
@@ -256,7 +256,7 @@ root(isDark)
> p
display inline-block
margin 0
- color isDark ? #b0b4bf : #666
+ color var(--urlPreviewInfo)
font-size 0.8em
line-height 16px
vertical-align top
@@ -322,10 +322,4 @@ root(isDark)
width 12px
height 12px
-.mk-url-preview[data-darkmode]
- root(true)
-
-.mk-url-preview:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8962235f2f..44a8e0e568 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -6,9 +6,10 @@
"vars": {
"primary": "#fb4e4e",
"secondary": "#282C37",
- "text": "#d0e0ea"
+ "text": "#d6dae0"
}
},
+
"primary": "$primary",
"primaryForeground": "#fff",
"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
"dateDividerFg": "#666b79",
"switchTrack": "rgba(255, 255, 255, 0.15)",
+ "inputBorder": "rgba(255, 255, 255, 0.7)",
+ "inputLabel": "rgba(255, 255, 255, 0.7)",
+ "inputText": "#fff",
"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
@@ -65,6 +69,12 @@
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+ "urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
+ "urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
+ "urlPreviewTitle": "$text",
+ "urlPreviewText": ":alpha<0.7<$text",
+ "urlPreviewInfo": ":alpha<0.8<$text",
+
"calendarWeek": "#43d5dc",
"calendarSaturdayOrSunday": "#ff6679",
"calendarDay": "#c5ced6",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 327d04cad6..1fc60c00ad 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,6 +11,7 @@
"text": "#b1bee3"
}
},
+
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 11b001ceb1..8dd4b1fe7b 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -9,6 +9,7 @@
"text": "#666"
}
},
+
"primary": "$primary",
"primaryForeground": "#fff",
"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
"dateDividerFg": "#aaa",
"switchTrack": "rgba(0, 0, 0, 0.25)",
+ "inputBorder": "rgba(0, 0, 0, 0.42)",
+ "inputLabel": "rgba(0, 0, 0, 0.54)",
+ "inputText": "#000",
"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
@@ -65,6 +69,12 @@
"reactionPickerButtonHoverBg": "#eee",
+ "urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
+ "urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
+ "urlPreviewTitle": "$text",
+ "urlPreviewText": ":alpha<0.7<$text",
+ "urlPreviewInfo": ":alpha<0.8<$text",
+
"calendarWeek": "#19a2a9",
"calendarSaturdayOrSunday": "#ef95a0",
"calendarDay": "#777",