diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index 6b91e65fd9..e03e1f2883 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -8,7 +8,7 @@ export function hostContext(selector: string, el: HTMLElement): boolean {
  * Create the mode and color classes for the component based on the classes passed in
  */
 export function createColorClasses(color: Color | undefined | null): CssClassMap | undefined {
-  return (color != null) ? {
+  return (typeof color === 'string' && color.length > 0) ? {
     'ion-color': true,
     [`ion-color-${color}`]: true
   } : undefined;