Merge pull request #22195 from nextcloud/design/accessibility-highcontrast-class

Add highcontrast class to body just like with dark theme

apps/accessibility/src/Accessibility.vue

@@ -90,14 +90,18 @@ export default {
 		// SELECT handlers
 		selectHighContrast(id) {
 			this.selectItem('highcontrast', id)
+			document.body.classList.toggle('theme--highcontrast')
 		},
 		selectTheme(id) {
 			const previous = this.selected.theme
 			if (previous) {
-				document.body.classList.remove(previous)
+				document.body.classList.remove(`theme--${previous}`)
 			}
 			if (id) {
-				document.body.classList.add(id)
+				document.body.classList.remove('theme--light')
+				document.body.classList.add(`theme--${id}`)
+			} else {
+				document.body.classList.add('theme--light')
 			}
 
 			this.selectItem('theme', id)

apps/accessibility/src/accessibilityoca.js

@@ -23,5 +23,11 @@ import { loadState } from '@nextcloud/initial-state'
 
 OCA.Accessibility = loadState('accessibility', 'data')
 if (OCA.Accessibility.theme !== false) {
-	document.body.classList.add(OCA.Accessibility.theme)
+	document.body.classList.add(`theme--${OCA.Accessibility.theme}`)
+} else {
+	document.body.classList.add('theme--light')
+}
+
+if (OCA.Accessibility.highcontrast !== false) {
+	document.body.classList.add('theme--highcontrast')
 }