From 792f0e87cf981153754652c229ff3e8f552ccc65 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Wed, 6 May 2026 02:15:39 +0300 Subject: [PATCH] fix(app): use color parser for theme CSS colors - Remove hand-rolled rgb/rgba parsing from shell theme handling - Parse ruler CSS custom properties through the shared core color helper --- src/app/shell/theme.ts | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/app/shell/theme.ts b/src/app/shell/theme.ts index 231c36d59..23b3d5ed8 100644 --- a/src/app/shell/theme.ts +++ b/src/app/shell/theme.ts @@ -2,6 +2,7 @@ import { useLocalStorage, usePreferredDark } from '@vueuse/core' import { computed, watch } from 'vue' import { getActiveEditorStoreOrNull } from '@/app/editor/active-store' +import { parseColor } from '@open-pencil/core/color' import { IS_BROWSER } from '@open-pencil/core/constants' import type { RulerTheme } from '@open-pencil/core/canvas' @@ -18,25 +19,14 @@ const resolvedTheme = computed<'dark' | 'light'>(() => { return theme.value }) -function cssColorToRgba(value: string) { - const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/) - if (!match) return { r: 0, g: 0, b: 0, a: 1 } - return { - r: Number(match[1]) / 255, - g: Number(match[2]) / 255, - b: Number(match[3]) / 255, - a: match[4] ? Number(match[4]) : 1 - } -} - function readRulerTheme(): RulerTheme | null { if (!IS_BROWSER || !('document' in globalThis)) return null const style = getComputedStyle(document.documentElement) return { - background: cssColorToRgba(style.getPropertyValue('--color-ruler-bg')), - tick: cssColorToRgba(style.getPropertyValue('--color-ruler-tick')), - text: cssColorToRgba(style.getPropertyValue('--color-ruler-text')), - label: cssColorToRgba(style.getPropertyValue('--color-ruler-label')) + background: parseColor(style.getPropertyValue('--color-ruler-bg')), + tick: parseColor(style.getPropertyValue('--color-ruler-tick')), + text: parseColor(style.getPropertyValue('--color-ruler-text')), + label: parseColor(style.getPropertyValue('--color-ruler-label')) } }