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);
}
}