Allow to override the default theme

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

2 files changed, 28 insertions, 13 deletions

diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index 1fd6cb20866..f78e63484d6 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -6,16 +6,17 @@
 		<div class="theming__preview-list">
 			<ItemPreview v-for="theme in themes"
 				:key="theme.id"
-				:theme="theme"
+				:enforced="theme.id === enforceTheme"
 				:selected="selectedTheme.id === theme.id"
-				:themes="themes"
+				:theme="theme"
+				:unique="themes.length === 1"
 				type="theme"
 				@change="changeTheme" />
 			<ItemPreview v-for="theme in fonts"
 				:key="theme.id"
-				:theme="theme"
 				:selected="theme.enabled"
-				:themes="fonts"
+				:theme="theme"
+				:unique="fonts.length === 1"
 				type="font"
 				@change="changeFont" />
 		</div>
@@ -31,6 +32,7 @@ import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
 import ItemPreview from './components/ItemPreview'
 
 const availableThemes = loadState('theming', 'themes', [])
+const enforceTheme = loadState('theming', 'enforceTheme', '')
 
 console.debug('Available themes', availableThemes)
 
@@ -44,6 +46,7 @@ export default {
 	data() {
 		return {
 			availableThemes,
+			enforceTheme,
 		}
 	},
 
diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index 82d588059a2..e7c5866b662 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -4,8 +4,12 @@
 		<div class="theming__preview-description">
 			<h3>{{ theme.title }}</h3>
 			<p>{{ theme.description }}</p>
+			<span v-if="enforced" class="theming__preview-warning" role="note">
+				{{ t('theming', 'Theme selection is enforced') }}
+			</span>
 			<CheckboxRadioSwitch class="theming__preview-toggle"
 				:checked.sync="checked"
+				:disabled="enforced"
 				:name="name"
 				:type="switchType">
 				{{ theme.enableLabel }}
@@ -24,30 +28,34 @@ export default {
 		CheckboxRadioSwitch,
 	},
 	props: {
-		theme: {
-			type: Object,
-			required: true,
+		enforced: {
+			type: Boolean,
+			default: false,
 		},
 		selected: {
 			type: Boolean,
 			default: false,
 		},
+		theme: {
+			type: Object,
+			required: true,
+		},
 		type: {
 			type: String,
 			default: '',
 		},
-		themes: {
-			type: Array,
-			default: () => [],
+		unique: {
+			type: Boolean,
+			default: false,
 		},
 	},
 	computed: {
 		switchType() {
-			return this.themes.length === 1 ? 'switch' : 'radio'
+			return this.unique ? 'switch' : 'radio'
 		},
 
 		name() {
-			return this.switchType === 'radio' ? this.type : null
+			return !this.unique ? this.type : null
 		},
 
 		img() {
@@ -62,7 +70,7 @@ export default {
 				console.debug('Selecting theme', this.theme, checked)
 
 				// If this is a radio, we can only enable
-				if (this.switchType === 'radio') {
+				if (!this.unique) {
 					this.$emit('change', { enabled: true, id: this.theme.id })
 					return
 				}
@@ -109,6 +117,10 @@ $ratio: 16;
 			padding: 12px 0;
 		}
 	}
+
+	&-warning {
+		color: var(--color-warning);
+	}
 }
 
 @media (max-width: (1024px / 1.5)) {