diff --git a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx index 8c4bbbe03..df68e9be3 100644 --- a/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx +++ b/studio/src/app/popovers/editor/style/app-element-style/app-element-style.tsx @@ -213,6 +213,7 @@ export class AppElementStyle { this.emitStyleChange()}>, this.renderImage(), diff --git a/studio/src/app/utils/editor/node.utils.ts b/studio/src/app/utils/editor/node.utils.ts index 073f6f8b3..edc1974ed 100644 --- a/studio/src/app/utils/editor/node.utils.ts +++ b/studio/src/app/utils/editor/node.utils.ts @@ -32,7 +32,7 @@ export class NodeUtils { }, []); } - static async findColors(node: HTMLElement, color: 'color' | 'background', slide: HTMLElement, deck: HTMLElement): Promise { + static async findColors(node: HTMLElement, color: 'color' | 'background', deck: HTMLElement, slide: HTMLElement): Promise { // Just in case if (node.nodeName.toUpperCase() === 'HTML' || node.nodeName.toUpperCase() === 'BODY') { return undefined; @@ -46,8 +46,8 @@ export class NodeUtils { return deck.style.getPropertyValue(`--${color}`); } - if (node.isEqualNode(slide) && slide.style[color] !== '') { - return slide.style[color]; + if (node.isEqualNode(slide) && (slide.style.getPropertyValue(`--${color}`) !== '' || slide.style[color] !== '')) { + return slide.style.getPropertyValue(`--${color}`) !== '' ? slide.style.getPropertyValue(`--${color}`) : slide.style[color]; } const styleAttr: string = color === 'background' ? 'background-color' : 'color'; @@ -57,6 +57,6 @@ export class NodeUtils { return node.style[styleAttr]; } - return await this.findColors(node.parentElement, color, slide, deck); + return await this.findColors(node.parentElement, color, deck, slide); } }