diff --git a/apps/theming/src/components/UserPrimaryColor.vue b/apps/theming/src/components/UserPrimaryColor.vue
index f10b8a01825..a76dc621851 100644
--- a/apps/theming/src/components/UserPrimaryColor.vue
+++ b/apps/theming/src/components/UserPrimaryColor.vue
@@ -76,13 +76,23 @@ export default defineComponent({
 	methods: {
 		t,
 
+		numberToHex(numeric: string) {
+			const parsed = Number.parseInt(numeric)
+			return parsed.toString(16).padStart(2, '0')
+		},
+
 		/**
 		 * Global styles are reloaded so we might need to update the current value
 		 */
 		reload() {
 			const trigger = this.$refs.trigger as HTMLButtonElement
-			const newColor = window.getComputedStyle(trigger).backgroundColor
-			if (newColor.toLowerCase() !== this.primaryColor) {
+			let newColor = window.getComputedStyle(trigger).backgroundColor
+			// sometimes the browser returns the color in the "rgb(255, 132, 234)" format
+			const rgbMatch = newColor.replaceAll(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/)
+			if (rgbMatch) {
+				newColor = `#${this.numberToHex(rgbMatch[1])}${this.numberToHex(rgbMatch[2])}${this.numberToHex(rgbMatch[3])}`
+			}
+			if (newColor.toLowerCase() !== this.primaryColor.toLowerCase()) {
 				this.primaryColor = newColor
 			}
 		},