-
{{ displayName }}
-
-
-
-
- {{ t('theming', 'Upload') }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{ label }}
+
-
-
- {{ errorMessage }}
-
+ v-if="mime.startsWith('image/')"
+ :class="$style.fileInputField__preview"
+ role="img"
+ :aria-label="t('theming', 'Preview of the selected image')" />
+
+
+
+
-
-
-
diff --git a/apps/theming/src/components/admin/TextField.vue b/apps/theming/src/components/admin/TextField.vue
index 55467700430..4892916b2a7 100644
--- a/apps/theming/src/components/admin/TextField.vue
+++ b/apps/theming/src/components/admin/TextField.vue
@@ -3,82 +3,59 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
-
-
-
-
+
-
+
+
+
+
+
+
diff --git a/apps/theming/src/components/admin/shared/field.scss b/apps/theming/src/components/admin/shared/field.scss
deleted file mode 100644
index 2347f31f7c5..00000000000
--- a/apps/theming/src/components/admin/shared/field.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*!
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-.field {
- display: flex;
- flex-direction: column;
- gap: 4px 0;
-
- &__row {
- display: flex;
- gap: 0 4px;
- }
-}
diff --git a/apps/theming/src/composables/useAdminThemingValue.ts b/apps/theming/src/composables/useAdminThemingValue.ts
new file mode 100644
index 00000000000..6c71836120a
--- /dev/null
+++ b/apps/theming/src/composables/useAdminThemingValue.ts
@@ -0,0 +1,111 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue'
+
+import axios, { isAxiosError } from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import { watchDebounced } from '@vueuse/core'
+import { isReadonly, isRef, readonly, ref, toValue } from 'vue'
+import { logger } from '../utils/logger.ts'
+
+/**
+ * @param name - The property name
+ * @param modelValue - The model value
+ * @param defaultValue - The default value
+ */
+export function useAdminThemingValue
(name: MaybeRefOrGetter, modelValue: Ref, defaultValue: MaybeRef) {
+ let resetted = false
+ const isSaving = ref(false)
+ const isSaved = ref(false)
+
+ watchDebounced(modelValue, async () => {
+ if (isSaving.value) {
+ return
+ }
+
+ if (resetted) {
+ resetted = false
+ return
+ }
+
+ isSaving.value = true
+ isSaved.value = false
+ try {
+ await setValue(toValue(name), toValue(modelValue))
+ isSaved.value = true
+ window.setTimeout(() => {
+ isSaved.value = false
+ }, 2000)
+ } finally {
+ isSaving.value = false
+ }
+ }, { debounce: 800, flush: 'sync' })
+
+ /**
+ * Reset to default value
+ */
+ async function reset() {
+ isSaving.value = true
+ isSaved.value = false
+ try {
+ const result = await resetValue(toValue(name))
+ if (result && isRef(defaultValue) && !isReadonly(defaultValue)) {
+ defaultValue.value = result as T
+ }
+ resetted = true
+ modelValue.value = toValue(defaultValue)
+ } finally {
+ isSaving.value = false
+ }
+ }
+
+ return {
+ isSaving: readonly(isSaving),
+ isSaved: readonly(isSaved),
+ reset,
+ }
+}
+
+/**
+ * @param setting - The setting name
+ * @param value - The setting value
+ */
+async function setValue(setting: string, value: unknown) {
+ const url = generateUrl('/apps/theming/ajax/updateStylesheet')
+ try {
+ await axios.post(url, {
+ setting,
+ value: String(value),
+ })
+ } catch (error) {
+ logger.error('Failed to save changes', { error, setting, value })
+ if (isAxiosError(error) && error.response?.data?.data?.message) {
+ showError(error.response.data.data.message)
+ }
+ throw error
+ }
+}
+
+/**
+ * Reset theming value for a given setting
+ *
+ * @param setting - The setting name
+ */
+async function resetValue(setting: string) {
+ const url = generateUrl('/apps/theming/ajax/undoChanges')
+ try {
+ const { data } = await axios.post<{ data: { value?: string } }>(url, { setting })
+ return data.data.value
+ } catch (error) {
+ logger.error('Failed to reset theming value', { error, setting })
+ if (isAxiosError(error) && error.response?.data?.data?.message) {
+ showError(error.response.data.data.message)
+ return false
+ }
+ throw error
+ }
+}
diff --git a/apps/theming/src/mixins/admin/FieldMixin.js b/apps/theming/src/mixins/admin/FieldMixin.js
deleted file mode 100644
index e9a2d3c3877..00000000000
--- a/apps/theming/src/mixins/admin/FieldMixin.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-const styleRefreshFields = [
- 'color',
- 'logo',
- 'background',
- 'logoheader',
- 'favicon',
- 'disable-user-theming',
-]
-
-export default {
- emits: [
- 'update:theming',
- ],
-
- data() {
- return {
- showSuccess: false,
- errorMessage: '',
- }
- },
-
- computed: {
- id() {
- return `admin-theming-${this.name}`
- },
- },
-
- methods: {
- reset() {
- this.showSuccess = false
- this.errorMessage = ''
- },
-
- handleSuccess() {
- this.showSuccess = true
- setTimeout(() => {
- this.showSuccess = false
- }, 2000)
- if (styleRefreshFields.includes(this.name)) {
- this.$emit('update:theming')
- }
- },
- },
-}
diff --git a/apps/theming/src/mixins/admin/TextValueMixin.js b/apps/theming/src/mixins/admin/TextValueMixin.js
deleted file mode 100644
index 0e83c1bd084..00000000000
--- a/apps/theming/src/mixins/admin/TextValueMixin.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import { logger } from '../../logger.ts'
-import FieldMixin from './FieldMixin.js'
-
-export default {
- mixins: [
- FieldMixin,
- ],
-
- watch: {
- value(value) {
- this.localValue = value
- },
- },
-
- data() {
- return {
- /** @type {string|boolean} */
- localValue: this.value,
- }
- },
-
- computed: {
- valueToPost() {
- if (this.type === 'url') {
- // if this is already encoded just make sure there is no doublequote (HTML XSS)
- // otherwise simply URL encode
- return this.isUrlEncoded(this.localValue)
- ? this.localValue.replaceAll('"', '%22')
- : encodeURI(this.localValue)
- }
- // Convert boolean to string as server expects string value
- if (typeof this.localValue === 'boolean') {
- return this.localValue ? 'yes' : 'no'
- }
- return this.localValue
- },
- },
-
- methods: {
- /**
- * Check if URL is percent-encoded
- *
- * @param {string} url The URL to check
- * @return {boolean}
- */
- isUrlEncoded(url) {
- try {
- return decodeURI(url) !== url
- } catch {
- return false
- }
- },
-
- async save() {
- this.reset()
- const url = generateUrl('/apps/theming/ajax/updateStylesheet')
-
- try {
- await axios.post(url, {
- setting: this.name,
- value: this.valueToPost,
- })
- this.$emit('update:value', this.localValue)
- this.handleSuccess()
- } catch (error) {
- logger.error('Failed to save changes', { error })
- this.errorMessage = error.response?.data.data?.message
- }
- },
-
- async undo() {
- this.reset()
- const url = generateUrl('/apps/theming/ajax/undoChanges')
- try {
- const { data } = await axios.post(url, {
- setting: this.name,
- })
-
- if (data.data.value) {
- this.$emit('update:defaultValue', data.data.value)
- }
- this.$emit('update:value', data.data.value || this.defaultValue)
- this.handleSuccess()
- } catch (e) {
- this.errorMessage = e.response.data.data?.message
- }
- },
- },
-}
diff --git a/apps/theming/src/personal-settings.js b/apps/theming/src/personal-settings.js
deleted file mode 100644
index fe815752332..00000000000
--- a/apps/theming/src/personal-settings.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import Vue from 'vue'
-import App from './UserTheming.vue'
-import { refreshStyles } from './helpers/refreshStyles.js'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.OC = OC
-Vue.prototype.t = t
-
-const View = Vue.extend(App)
-const theming = new View()
-theming.$mount('#theming')
-theming.$on('update:background', refreshStyles)
diff --git a/apps/theming/src/settings-admin.ts b/apps/theming/src/settings-admin.ts
new file mode 100644
index 00000000000..ec7a87ac9d8
--- /dev/null
+++ b/apps/theming/src/settings-admin.ts
@@ -0,0 +1,13 @@
+/*!
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import AdminTheming from './views/AdminTheming.vue'
+
+import 'vite/modulepreload-polyfill'
+
+const app = createApp(AdminTheming)
+app.config.idPrefix = 'settings'
+app.mount('#settings-admin-theming')
diff --git a/apps/theming/src/settings-personal.ts b/apps/theming/src/settings-personal.ts
new file mode 100644
index 00000000000..bff8415c994
--- /dev/null
+++ b/apps/theming/src/settings-personal.ts
@@ -0,0 +1,13 @@
+/*!
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import UserTheming from './views/UserTheming.vue'
+
+import 'vite/modulepreload-polyfill'
+
+const app = createApp(UserTheming)
+app.config.idPrefix = 'settings'
+app.mount('#settings-personal-theming')
diff --git a/apps/theming/src/types.d.ts b/apps/theming/src/types.d.ts
new file mode 100644
index 00000000000..1f52ace941d
--- /dev/null
+++ b/apps/theming/src/types.d.ts
@@ -0,0 +1,38 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Modifiable parameters for the admin theming settings.
+ */
+export interface AdminThemingParameters {
+ backgroundMime: string
+ backgroundURL: string
+ backgroundColor: string
+ faviconMime: string
+ legalNoticeUrl: string
+ logoheaderMime: string
+ logoMime: string
+ name: string
+ primaryColor: string
+ privacyPolicyUrl: string
+ slogan: string
+ url: string
+ disableUserTheming: boolean
+ defaultApps: string[]
+}
+
+/**
+ * Admin theming information.
+ */
+export interface AdminThemingInfo {
+ isThemeable: boolean
+ canThemeIcons: boolean
+
+ notThemeableErrorMessage: string
+ defaultBackgroundURL: string
+ defaultBackgroundColor: string
+ docUrl: string
+ docUrlIcons: string
+}
diff --git a/apps/theming/src/utils/color.spec.ts b/apps/theming/src/utils/color.spec.ts
new file mode 100644
index 00000000000..f72169b6780
--- /dev/null
+++ b/apps/theming/src/utils/color.spec.ts
@@ -0,0 +1,36 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test } from 'vitest'
+import { getTextColor } from './color.ts'
+
+test('getTextColor returns black for light backgrounds', () => {
+ expect(getTextColor('#FFFFFF')).toBe('#000000') // white background
+ expect(getTextColor('#DDDDDD')).toBe('#000000') // light gray background
+ expect(getTextColor('#FFFFAA')).toBe('#000000') // light yellow background
+})
+
+test('getTextColor returns white for dark backgrounds', () => {
+ expect(getTextColor('#000000')).toBe('#ffffff') // black background
+ expect(getTextColor('#333333')).toBe('#ffffff') // dark gray background
+ expect(getTextColor('#0000AA')).toBe('#ffffff') // dark blue background
+})
+
+test('getTextColor handles edge cases', () => {
+ expect(getTextColor('#808080')).toBe('#ffffff') // medium gray background
+ expect(getTextColor('#C0C0C0')).toBe('#000000') // silver background
+ expect(getTextColor('#404040')).toBe('#ffffff') // dark gray background
+})
+
+test('getTextColor handles shorthand hex colors', () => {
+ expect(getTextColor('#FFF')).toBe('#000000') // white background
+ expect(getTextColor('#000')).toBe('#ffffff') // black background
+ expect(getTextColor('#888')).toBe('#ffffff') // medium gray background
+})
+
+test('getTextColor handles invalid hex colors', () => {
+ expect(getTextColor('invalid')).toBe('#ffffff')
+ expect(getTextColor('#GG')).toBe('#ffffff')
+})
diff --git a/apps/theming/src/utils/color.ts b/apps/theming/src/utils/color.ts
new file mode 100644
index 00000000000..4b060e93619
--- /dev/null
+++ b/apps/theming/src/utils/color.ts
@@ -0,0 +1,45 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Get the text color for a given background color
+ *
+ * @param color - The hex color
+ */
+export function getTextColor(color: string) {
+ return calculateLuma(color) > 0.6
+ ? '#000000'
+ : '#ffffff'
+}
+
+/**
+ * Calculate luminance of provided hex color
+ *
+ * @param color - The hex color
+ */
+function calculateLuma(color: string) {
+ const [red, green, blue] = hexToRGB(color)
+ return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
+}
+
+/**
+ * Convert hex color to RGB
+ *
+ * @param hex - The hex color
+ */
+function hexToRGB(hex: string): [number, number, number] {
+ if (hex.length < 6) {
+ // handle shorthand hex colors like #FFF
+ const result = /^#?([a-f\d])([a-f\d])([a-f\d])/i.exec(hex)
+ if (result) {
+ hex = `#${result[1]!.repeat(2)}${result[2]!.repeat(2)}${result[3]!.repeat(2)}`
+ }
+ }
+
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ return result
+ ? [parseInt(result[1]!, 16), parseInt(result[2]!, 16), parseInt(result[3]!, 16)]
+ : [0, 0, 0]
+}
diff --git a/apps/theming/src/logger.ts b/apps/theming/src/utils/logger.ts
similarity index 100%
rename from apps/theming/src/logger.ts
rename to apps/theming/src/utils/logger.ts
diff --git a/apps/theming/src/helpers/refreshStyles.js b/apps/theming/src/utils/refreshStyles.ts
similarity index 70%
rename from apps/theming/src/helpers/refreshStyles.js
rename to apps/theming/src/utils/refreshStyles.ts
index ba198be0a00..37db9321815 100644
--- a/apps/theming/src/helpers/refreshStyles.js
+++ b/apps/theming/src/utils/refreshStyles.ts
@@ -1,4 +1,4 @@
-/**
+/*!
* SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
@@ -8,12 +8,13 @@
* This resolves when all themes are reloaded
*/
export async function refreshStyles() {
- const themes = [...document.head.querySelectorAll('link.theme')]
- const promises = themes.map((theme) => new Promise((resolve) => {
+ const themes = [...document.head.querySelectorAll('link.theme')] as HTMLLinkElement[]
+ const promises = themes.map((theme) => new Promise((resolve, reject) => {
const url = new URL(theme.href)
- url.searchParams.set('v', Date.now())
- const newTheme = theme.cloneNode()
+ url.searchParams.set('v', Date.now().toString())
+ const newTheme = theme.cloneNode() as HTMLLinkElement
newTheme.href = url.toString()
+ newTheme.onerror = reject
newTheme.onload = () => {
theme.remove()
resolve()
diff --git a/apps/theming/src/views/AdminTheming.vue b/apps/theming/src/views/AdminTheming.vue
new file mode 100644
index 00000000000..c34f7e64f8a
--- /dev/null
+++ b/apps/theming/src/views/AdminTheming.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
diff --git a/apps/theming/src/views/UserTheming.vue b/apps/theming/src/views/UserTheming.vue
new file mode 100644
index 00000000000..96933ef901a
--- /dev/null
+++ b/apps/theming/src/views/UserTheming.vue
@@ -0,0 +1,268 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('theming', 'Misc accessibility options') }}
+
+ {{ t('theming', 'Enable blur background filter (may increase GPU load)') }}
+
+
+
+
+ {{ t('theming', 'Customization has been disabled by your administrator') }}
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index 05bbd3684b5..3f689304f2c 100644
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -5,4 +5,4 @@
*/
?>
-
+
diff --git a/apps/theming/templates/settings-personal.php b/apps/theming/templates/settings-personal.php
index 494a466c840..ba8fa04f901 100644
--- a/apps/theming/templates/settings-personal.php
+++ b/apps/theming/templates/settings-personal.php
@@ -6,4 +6,4 @@
?>
-