diff --git a/packages/viewer-d3fc/src/ts/series/colorStyles.ts b/packages/viewer-d3fc/src/ts/series/colorStyles.ts
index 55b4fc3752..00955e4798 100644
--- a/packages/viewer-d3fc/src/ts/series/colorStyles.ts
+++ b/packages/viewer-d3fc/src/ts/series/colorStyles.ts
@@ -60,7 +60,11 @@ export const initialiseStyles = (
 };
 
 const getOpacityFromColor = (color) => {
-    return d3.color(color).opacity;
+    if (!color) {
+        return 1.0; // Default to fully opaque when color is undefined
+    }
+    const parsed = d3.color(color);
+    return parsed ? parsed.opacity : 1.0;
 };
 
 const stepAsColor = (value, opacity) => {
diff --git a/packages/workspace/src/themes/pro-dark.less b/packages/workspace/src/themes/pro-dark.less
index 9ecdeb9feb..c3b7144456 100644
--- a/packages/workspace/src/themes/pro-dark.less
+++ b/packages/workspace/src/themes/pro-dark.less
@@ -39,6 +39,7 @@ perspective-workspace perspective-viewer[settings] {
 perspective-workspace {
     @include perspective-workspace-pro-base;
     @include perspective-viewer-pro-dark--colors;
+    @include perspective-viewer-pro-dark--d3fc;  // Fix: Add d3fc CSS variables for chart plugins
 
     background-color: #000202;
     color: white;
diff --git a/packages/workspace/src/themes/pro.less b/packages/workspace/src/themes/pro.less
index 45d86a1bc0..21b9fa7e26 100644
--- a/packages/workspace/src/themes/pro.less
+++ b/packages/workspace/src/themes/pro.less
@@ -21,6 +21,7 @@ perspective-indicator[theme="Pro Light"] {
 perspective-workspace {
     @include perspective-workspace-pro-base;
     @include perspective-viewer-pro--colors;
+    @include perspective-viewer-pro--d3fc;  // Fix: Add d3fc CSS variables for chart plugins
     background-color: #dadada;
 }