wip

src/client/app/common/views/components/media-banner.vue

@@ -43,7 +43,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-media-banner
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -71,7 +71,7 @@ root(isDark)
 			font-size 1.6em
 
 	> .download
-		background isDark ? #21242d : #f7f7f7
+		background var(--noteAttachedFile)
 
 	> .sensitive
 		background #111
@@ -82,9 +82,4 @@ root(isDark)
 			display block
 			width 100%
 
-.mk-media-banner[data-darkmode]
-	root(true)
-
-.mk-media-banner:not([data-darkmode])
-	root(false)
 </style>

src/client/app/common/views/components/welcome-timeline.vue

@@ -90,7 +90,7 @@ export default Vue.extend({
 	opacity 0
 	transform translateY(-30px)
 
-root(isDark)
+.mk-welcome-timeline
 	background var(--face)
 
 	> div
@@ -101,8 +101,8 @@ root(isDark)
 			padding 16px
 			overflow-wrap break-word
 			font-size .9em
-			color isDark ? #fff : #4C4C4C
+			color var(--noteText)
-			border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 
 			&:after
 				content ""
@@ -141,22 +141,16 @@ root(isDark)
 
 					> .username
 						margin 0 .5em 0 0
-						color isDark ? #606984 : #ccc
+						color var(--noteHeaderAcct)
 
 					> .info
 						margin-left auto
 						font-size 0.9em
 
 						> .created-at
-							color isDark ? #606984 : #c0c0c0
+							color var(--noteHeaderInfo)
 
 				> .text
 					text-align left
 
-.mk-welcome-timeline[data-darkmode]
-	root(true)
-
-.mk-welcome-timeline:not([data-darkmode])
-	root(false)
-
 </style>

src/client/theme/dark.json

@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#d6dce2",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
 
+	"noteAttachedFile": "rgba(255, 255, 255, 0.1)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
-	"dateDividerBg": "#242731",
+	"dateDividerBg": ":darken<2<$secondary",
-	"dateDividerFg": "#666b79",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
-	"desktopHeaderBg": "#313543",
+	"desktopHeaderBg": ":lighten<5<$secondary",
-	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",

src/client/theme/halloween.json

@@ -14,6 +14,5 @@
 
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-	"quoteBorder": "#c3631c",
+	"quoteBorder": "#c3631c"
-	"desktopHeaderBg": "#36314e"
 }

src/client/theme/light.json

@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#586069",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
 
+	"noteAttachedFile": "rgba(0, 0, 0, 0.05)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
-	"dateDividerBg": "#fdfdfd",
+	"dateDividerBg": ":darken<2<$secondary",
-	"dateDividerFg": "#aaa",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
-	"desktopHeaderBg": "#f7f7f7",
+	"desktopHeaderBg": ":lighten<5<$secondary",
-	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",