compatibility established

Signed-off-by: dartcafe <github@dartcafe.de>

5 files changed, 30 insertions, 24 deletions

diff --git a/src/js/assets/scss/colors-dark.scss b/src/js/assets/scss/colors-dark.scss
index 3bf58d3d..c7deb53d 100644
--- a/src/js/assets/scss/colors-dark.scss
+++ b/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;
diff --git a/src/js/assets/scss/colors.scss b/src/js/assets/scss/colors.scss
index adee456c..d38d8d7c 100644
--- a/src/js/assets/scss/colors.scss
+++ b/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,10 +19,25 @@
 	--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,
+[data-theme-dark] {
+	--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);
+}
 
-	.theme--dark {
-		// @deprecated: compatibility for nc versions before 25
-		--color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+@media (prefers-color-scheme: dark) {
+	body#body-public,
+	[data-theme-default] {
 		--color-foreground-error: #dddddd;
 		--color-foreground-success: #dddddd;
 		--color-background-success: #2e4600;
@@ -29,6 +45,8 @@
 		--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);
 	}
+	
 }
+
diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss
index e33c128f..38b91e3e 100644
--- a/src/js/assets/scss/hacks.scss
+++ b/src/js/assets/scss/hacks.scss
@@ -1,12 +1,13 @@
 // some hacks, do alter the display of third parity components
 
 // until NC24: compatibility hack
-:root {
+: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 {
+	&.theme--dark {
 		--color-main-background-rgb: 23, 23, 23;
-	}
+	}}
 }
 
 // fill full input with background color
diff --git a/src/js/views/Combo.vue b/src/js/views/Combo.vue
index 5110c6ac..b2c27f2c 100644
--- a/src/js/views/Combo.vue
+++ b/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()
 	},
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index fb41933f..cab067c2 100644
--- a/src/js/views/Vote.vue
+++ b/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) })
 	},