diff --git a/src/common/color.js b/src/common/color.js
index a372f24401a9a..61704170f565d 100644
--- a/src/common/color.js
+++ b/src/common/color.js
@@ -83,7 +83,7 @@ const getCardColors = ({
   theme,
 }) => {
   const defaultTheme = themes["default"];
-  const isThemeProvided = theme !== null && theme !== undefined;
+  const isThemeProvided = theme !== null && theme !== undefined && theme in themes;
 
   // @ts-ignore
   const selectedTheme = isThemeProvided ? themes[theme] : defaultTheme;
diff --git a/tests/color.test.js b/tests/color.test.js
index 9fc6d067794ad..20d52aae767de 100644
--- a/tests/color.test.js
+++ b/tests/color.test.js
@@ -73,4 +73,18 @@ describe("Test color.js", () => {
       borderColor: "#fff",
     });
   });
+
+  it("getCardColors: should fallback to default theme if theme is invalid", () => {
+    let colors = getCardColors({
+      theme: "invalidTheme",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#2f80ed",
+      textColor: "#434d58",
+      iconColor: "#4c71f2",
+      bgColor: "#fffefe",
+      borderColor: "#e4e2e2",
+      theme: "default",
+    });
+  });
 });