diff --git a/projects/igniteui-angular/src/lib/card/card.component.ts b/projects/igniteui-angular/src/lib/card/card.component.ts
index f3736eaac88..61b5c5a843a 100644
--- a/projects/igniteui-angular/src/lib/card/card.component.ts
+++ b/projects/igniteui-angular/src/lib/card/card.component.ts
@@ -316,7 +316,7 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      */
     @HostBinding('class.igx-card-actions--vertical')
     @Input()
-    public vertical: boolean;
+    public vertical = false;
 
     /**
      * A getter that returns `true` when the layout has been
@@ -365,7 +365,9 @@ export class IgxCardActionsComponent implements OnInit, OnChanges {
      * @internal
      */
     public ngOnInit() {
-        this.vertical = !this.isVerticalSet && this.card.horizontal;
+        if (!this.isVerticalSet && this.card.horizontal) {
+            this.vertical = true;
+        };
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
index 24a309febd2..fc7b6e90050 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
@@ -307,7 +307,7 @@ $bootstrap-dark-palette: palette(
     $success: color($bootstrap-palette, 'success'),
     $warn: color($bootstrap-palette, 'warn'),
     $error: color($bootstrap-palette, 'error'),
-    $surface: #333,
+    $surface: #212529,
     $grays: #fff,
     $variant: 'bootstrap'
 ) !default;