diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index bf7adf5fcb..2a4025002b 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -25,8 +25,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background isDark ? #21242f : #eee
+.mk-widget-container
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -35,17 +35,14 @@ root(isDark)
 		background transparent !important
 		box-shadow none !important
 
-	&.hideHeader
-		background isDark ? #21242f : #fff
-
 	> header
 		> .title
 			margin 0
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background var(--face)
+			color var(--faceHeaderText)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
@@ -65,10 +62,4 @@ root(isDark)
 			font-size 15px
 			color #465258
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>