diff --git a/src/datepicker/datepicker-month-view.scss b/src/datepicker/datepicker-month-view.scss
index 6ce3259960..49d69c7b16 100644
--- a/src/datepicker/datepicker-month-view.scss
+++ b/src/datepicker/datepicker-month-view.scss
@@ -20,6 +20,7 @@ ngb-datepicker-month-view {
   &-weekdays {
     border-bottom: 1px solid rgba(0, 0, 0, 0.125);
     border-radius: 0;
+    background-color: var(--light);
   }
   &-day,
   &-weekday,
diff --git a/src/datepicker/datepicker-month-view.ts b/src/datepicker/datepicker-month-view.ts
index 31217f1081..bc800df086 100644
--- a/src/datepicker/datepicker-month-view.ts
+++ b/src/datepicker/datepicker-month-view.ts
@@ -10,7 +10,7 @@ import {DayTemplateContext} from './datepicker-day-template-context';
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./datepicker-month-view.scss'],
   template: `
-    <div *ngIf="showWeekdays" class="ngb-dp-week ngb-dp-weekdays bg-light">
+    <div *ngIf="showWeekdays" class="ngb-dp-week ngb-dp-weekdays">
       <div *ngIf="showWeekNumbers" class="ngb-dp-weekday ngb-dp-showweek"></div>
       <div *ngFor="let w of month.weekdays" class="ngb-dp-weekday small" role="columnheader">
         {{ i18n.getWeekdayShortName(w) }}
diff --git a/src/datepicker/datepicker.scss b/src/datepicker/datepicker.scss
index eecef691c2..4e9febf6e3 100644
--- a/src/datepicker/datepicker.scss
+++ b/src/datepicker/datepicker.scss
@@ -21,7 +21,7 @@ ngb-datepicker {
     border-bottom: 0;
     border-radius: .25rem .25rem 0 0;
     padding-top: .25rem;
-    background-color: #f8f9fa;
+    background-color: var(--light);
   }
 
   &-months {
@@ -36,7 +36,7 @@ ngb-datepicker {
       height: 2rem;
       line-height: 2rem;
       text-align: center;
-      background-color: #f8f9fa;
+      background-color: var(--light);
     }
 
     & + & {