From d0012e56723fbc90445870fb8c7481c51d43372d Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 19 Aug 2025 14:30:15 +0200 Subject: [PATCH] fix(theming): correctly parse CSS colors for user primary color picker Signed-off-by: Ferdinand Thiessen --- apps/theming/src/components/UserPrimaryColor.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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 } },