Merge pull request #2559 from nextcloud/fix/dark-mode-25

Fix darkmode in NC25+

appinfo/info.xml

@@ -23,7 +23,7 @@
     <screenshot>https://raw.githubusercontent.com/nextcloud/polls/master/screenshots/edit-poll.png</screenshot>
     <dependencies>
         <php min-version="7.4"/>
-        <nextcloud min-version="22" max-version="24" />
+        <nextcloud min-version="22" max-version="25" />
     </dependencies>
     <activity>
 		<providers>

src/js/assets/scss/colors-dark.scss

@@ -1,8 +1,11 @@
 // TODO: preparation for full support of @media:prefers-color-scheme by core
 // until then, this ha no effect
 
+// dark mode, when
+// @media (prefers-color-scheme: dark) && [data-themes="default"]
+
 @media (prefers-color-scheme: dark) {
-	:root {
+	:root, [data-theme-default] {
 		--color-foreground-error: #dddddd;
 		--color-foreground-success: #dddddd;
 		--color-background-success: #2e4600;

src/js/assets/scss/colors.scss

@@ -1,3 +1,4 @@
+// TODO: Remove :root selector after NC24
 :root {
 	--color-foreground-error: #222222;
 	--color-foreground-success: #222222;
@@ -18,9 +19,12 @@
 	--color-polls-dashboard-light-text: #ffffff;
 	--color-background-translucent: rgba(255,255,255,0.8);
 	--background-blur: blur(10px);
+	// TODO  remove after NC24, compatibility for nc versions before 25
+	--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
 }
 
-:root .theme--dark {
+:root .theme--dark,
+[data-theme-dark] {
 	--color-foreground-error: #dddddd;
 	--color-foreground-success: #dddddd;
 	--color-background-success: #2e4600;
@@ -28,5 +32,21 @@
 	--color-polls-background-yes: #2e4600;
 	--color-polls-background-no: #4d0d00;
 	--color-polls-background-maybe: #665600;
-	--color-background-translucent: rgba(24,24,24,0.8);
+	--color-background-translucent: rgba(24, 24, 24, 0.8);
 }
+
+@media (prefers-color-scheme: dark) {
+	body#body-public,
+	[data-theme-default] {
+		--color-foreground-error: #dddddd;
+		--color-foreground-success: #dddddd;
+		--color-background-success: #2e4600;
+		--color-background-error: #4d0d00;
+		--color-polls-background-yes: #2e4600;
+		--color-polls-background-no: #4d0d00;
+		--color-polls-background-maybe: #665600;
+		--color-background-translucent: rgba(24, 24, 24, 0.8);
+	}
+	
+}
+

src/js/assets/scss/hacks.scss

@@ -1,5 +1,15 @@
 // some hacks, do alter the display of third parity components
 
+// until NC24: compatibility hack
+:root body {
+	&:not([data-themes]) {
+	--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+	--color-main-background-rgb: 255, 255, 255;
+	&.theme--dark {
+		--color-main-background-rgb: 23, 23, 23;
+	}}
+}
+
 // fill full input with background color
 .mx-input {
 	background-clip: initial !important;
@@ -31,6 +41,7 @@
 .user-item.add-public > .icon-add {
 	margin-right: 20px !important;
 }
+
 // fix avatardiv size to match the image
 .avatardiv img {
 	display: block;

src/js/assets/scss/theming.scss

@@ -111,7 +111,7 @@
 	[class*=" area__"],
 	[class^="area__"] {
 		backdrop-filter: blur(10px);
-		background-color: var(--color-background-translucent);
+		background-color: var(--color-main-background-blur);
 	}
 }
 

src/js/views/Combo.vue

@@ -107,12 +107,6 @@ export default {
 	},
 
 	created() {
-		// simulate @media:prefers-color-scheme until it is supported for logged in users
-		// This simulates the theme--dark
-		// TODO: remove, when completely supported by core
-		if (!window.matchMedia) {
-			return true
-		}
 		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
 		this.verifyPolls()
 	},

src/js/views/Vote.vue

@@ -158,16 +158,6 @@ export default {
 	},
 
 	created() {
-		// simulate @media:prefers-color-scheme until it is supported for logged in users
-		// This simulates the theme--dark
-		// TODO: remove, when completely supported by core
-		if (!window.matchMedia) {
-			return true
-		}
-
-		if (this.$route.name === 'publicVote' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			document.body.classList.add('theme--dark')
-		}
 
 		emit('polls:sidebar:toggle', { open: (window.innerWidth > 920) })
 	},