diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index c30fa2a1d..9212a84b3 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -39,10 +39,9 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -root(isDark) - $borderColor = isDark ? #5e6673 : #eee - border-top dashed 1px $borderColor - border-bottom dashed 1px $borderColor +.mk-reactions-viewer + border-top dashed 1px var(--reactionViewerBorder) + border-bottom dashed 1px var(--reactionViewerBorder) margin 4px 0 &:empty @@ -60,12 +59,6 @@ root(isDark) > span margin-left 4px font-size 1.2em - color isDark ? #d1d5dc : #444 - -.mk-reactions-viewer[data-darkmode] - root(true) - -.mk-reactions-viewer:not([data-darkmode]) - root(false) + color var(--text) </style> diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index 44a8e0e56..39828e364 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -69,6 +69,8 @@ "reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)", + "reactionViewerBorder": "rgba(255, 255, 255, 0.1)", + "urlPreviewBorder": "rgba(0, 0, 0, 0.4)", "urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)", "urlPreviewTitle": "$text", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index 8dd4b1fe7..2c45a5770 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -69,6 +69,8 @@ "reactionPickerButtonHoverBg": "#eee", + "reactionViewerBorder": "rgba(0, 0, 0, 0.1)", + "urlPreviewBorder": "rgba(0, 0, 0, 0.1)", "urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)", "urlPreviewTitle": "$text",