From a7eeececd8e48a1d823d20cf0bcc80c14adf817e Mon Sep 17 00:00:00 2001 From: Kartikay Date: Mon, 10 Mar 2025 03:27:26 +0530 Subject: [PATCH] Fix text color handling in custom themes --- .../DialogBox/Themes/ApplyThemes.vue | 41 +++++++++++++++---- .../src/themer/customThemeAbstraction.js | 4 +- v0/src/simulator/src/themer/themer.js | 23 +++++++++-- .../src/themer/customThemeAbstraction.js | 2 +- v1/src/simulator/src/themer/themer.js | 25 +++++++++-- 5 files changed, 79 insertions(+), 16 deletions(-) diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue index 72763ad6..59e8f578 100644 --- a/src/components/DialogBox/Themes/ApplyThemes.vue +++ b/src/components/DialogBox/Themes/ApplyThemes.vue @@ -181,16 +181,43 @@ function changeTheme(theme: string) { } function changeCustomTheme(e: InputEvent) { - const customTheme = customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList]; + const target = e.target as HTMLInputElement; + const name = target.name as keyof typeof customThemesList; + const value = target.value; + + // Update the UI model + const customTheme = customThemesList[name]; if (customTheme) { - customTheme.color = (e.target as HTMLInputElement).value; + customTheme.color = value; + + // Apply to all referenced CSS properties customTheme.ref.forEach((property: string) => { - themeOptions['Custom Theme'][property] = (e.target as HTMLInputElement).value - }) + themeOptions['Custom Theme'][property] = value; + }); + + // Extra handling for text color + if (name === 'Text') { + // Ensure the --text variable is always set + themeOptions['Custom Theme']['--text'] = value; + } + } + + // Save back to the model + customThemesList[name] = customTheme; + + // Apply the theme + updateThemeForStyle('Custom Theme'); + updateBG(); + + // Force text elements to update + if (window.globalScope) { + setTimeout(() => { + // Re-render canvas with new colors + if (window.globalScope && window.globalScope.renderCanvas) { + window.globalScope.renderCanvas(); + } + }, 10); } - customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList] = customTheme - updateThemeForStyle('Custom Theme') - updateBG() } function applyTheme() { diff --git a/v0/src/simulator/src/themer/customThemeAbstraction.js b/v0/src/simulator/src/themer/customThemeAbstraction.js index 399134ea..d1fef60d 100644 --- a/v0/src/simulator/src/themer/customThemeAbstraction.js +++ b/v0/src/simulator/src/themer/customThemeAbstraction.js @@ -31,9 +31,9 @@ export const CreateAbstraction = (themeOptions) => { ref: ['--canvas-stroke'], }, Text: { - color: themeOptions['--text-lite'], + color: themeOptions['--text'], description: 'text color', - ref: ['--text-lite', '--text-panel', '--text-dark'], + ref: ['--text', '--text-panel', '--input-text'], }, Borders: { color: themeOptions['--br-secondary'], diff --git a/v0/src/simulator/src/themer/themer.js b/v0/src/simulator/src/themer/themer.js index 2c61865e..1ee7d477 100644 --- a/v0/src/simulator/src/themer/themer.js +++ b/v0/src/simulator/src/themer/themer.js @@ -84,12 +84,29 @@ export let colors = getCanvasColors() */ export function updateThemeForStyle(themeName) { const selectedTheme = themeOptions[themeName] - if (selectedTheme === undefined) return - const html = document.getElementsByTagName('html')[0] - Object.keys(selectedTheme).forEach((property, i) => { + if (!selectedTheme) return + + const html = document.documentElement + + // Set all theme properties + Object.keys(selectedTheme).forEach((property) => { html.style.setProperty(property, selectedTheme[property]) }) + + // Ensure text color is properly set for custom themes + if (themeName === 'Custom Theme' && selectedTheme['--text']) { + html.style.setProperty('--text', selectedTheme['--text']) + } + + // Update colors object with current CSS variables colors = getCanvasColors() + + // Force canvas refresh to apply new colors + if (window.globalScope && window.globalScope.renderCanvas) { + setTimeout(() => { + window.globalScope.renderCanvas() + }, 10) + } } /** diff --git a/v1/src/simulator/src/themer/customThemeAbstraction.js b/v1/src/simulator/src/themer/customThemeAbstraction.js index 399134ea..3d7d2f89 100644 --- a/v1/src/simulator/src/themer/customThemeAbstraction.js +++ b/v1/src/simulator/src/themer/customThemeAbstraction.js @@ -33,7 +33,7 @@ export const CreateAbstraction = (themeOptions) => { Text: { color: themeOptions['--text-lite'], description: 'text color', - ref: ['--text-lite', '--text-panel', '--text-dark'], + ref: ['--text-lite', '--text-panel', '--text-dark', '--text'], }, Borders: { color: themeOptions['--br-secondary'], diff --git a/v1/src/simulator/src/themer/themer.js b/v1/src/simulator/src/themer/themer.js index 2c61865e..68f53781 100644 --- a/v1/src/simulator/src/themer/themer.js +++ b/v1/src/simulator/src/themer/themer.js @@ -69,6 +69,9 @@ const getCanvasColors = () => { colors['canvas_fill'] = getComputedStyle( document.documentElement ).getPropertyValue('--canvas-fill') + colors['text'] = getComputedStyle( + document.documentElement + ).getPropertyValue('--text') return colors } @@ -84,12 +87,28 @@ export let colors = getCanvasColors() */ export function updateThemeForStyle(themeName) { const selectedTheme = themeOptions[themeName] - if (selectedTheme === undefined) return - const html = document.getElementsByTagName('html')[0] - Object.keys(selectedTheme).forEach((property, i) => { + if (!selectedTheme) return + + const html = document.documentElement + + // Set all theme properties + Object.keys(selectedTheme).forEach((property) => { html.style.setProperty(property, selectedTheme[property]) }) + + // Special handling for text color in all themes + if (selectedTheme['--text']) { + // Ensure text color is explicitly set + html.style.setProperty('--text', selectedTheme['--text']) + } + + // Update colors object for canvas elements colors = getCanvasColors() + + // Force a redraw of the canvas to apply the new colors + if (window.globalScope && window.globalScope.renderCanvas) { + setTimeout(() => window.globalScope.renderCanvas(), 10) + } } /**