diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss
index 095d34ad8e3..384fa2f2a89 100644
--- a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss
+++ b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss
@@ -97,14 +97,14 @@
 
         tr {
             td {
-                border-bottom: 1px solid var(--bs-border-color);
-                border-right: 1px solid var(--bs-border-color);
+                border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+                border-right: var(--bs-border-width) solid var(--bs-border-color);
                 vertical-align: top;
                 transition: background-color .2s ease;
                 cursor: pointer;
 
                 &:first-child {
-                    border-left: 1px solid var(--bs-border-color);
+                    border-left: var(--bs-border-width) solid var(--bs-border-color);
                 }
 
                 &.is-today {
@@ -118,7 +118,7 @@
             }
 
             &:first-child td {
-                border-top: 1px solid var(--bs-border-color);
+                border-top: var(--bs-border-width) solid var(--bs-border-color);
             }
 
             &:not(.is-range) td.next, &:not(.is-range) td.prev {
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
index 70fa26d31b3..83c7a18705d 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -93,27 +93,27 @@ $bb-slide-item-hover-color: var(--bs-body-color);
 
 // Calendar
 $bb-calendar-padding: 12px 20px;
-$bb-calendar-header-border-bottom: 1px solid var(--bs-border-color);
-$bb-calendar-title-color: #000;
+$bb-calendar-header-border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+$bb-calendar-title-color: var(--bs-body-color);
 $bb-calendar-title-font-size: 1rem;
 $bb-calendar-toolbar-border: 1px solid var(--bs-border-color);
 $bb-calendar-toolbar-font-size: .75rem;
 $bb-calendar-toolbar-padding: 7px 15px;
-$bb-calendar-toolbar-hover-bg: #ecf5ff;
+$bb-calendar-toolbar-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-calendar-toolbar-hover-color: #409eff;
-$bb-calendar-toolbar-hover-border-color: #c6e2ff;
-$bb-calendar-toolbar-focus-bg: #ecf5ff;
+$bb-calendar-toolbar-hover-border-color: var(--bs-border-color);
+$bb-calendar-toolbar-focus-bg: rgba(var(--bs-body-color-rgb),.1);
 $bb-calendar-toolbar-focus-color: #409eff;
-$bb-calendar-toolbar-focus-border-color: #c6e2ff;
+$bb-calendar-toolbar-focus-border-color: var(--bs-border-color);
 $bb-calendar-toolbar-active-color: #409eff;
-$bb-calendar-toolbar-active-border-color: #c6e2ff;
+$bb-calendar-toolbar-active-border-color: var(--bs-border-color);
 $bb-calendar-cell-padding: 8px;
 $bb-calendar-cell-height: 85px;
-$bb-calendar-cell-hover-bg: #f2f8fe;
+$bb-calendar-cell-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-calendar-header-padding: 12px 0;
 $bb-calendar-today-color: #409eff;
-$bb-calendar-selected-color: #1989fa;
-$bb-calendar-selected-bg: #f2f8fe;
+$bb-calendar-selected-color: #409eff;
+$bb-calendar-selected-bg: rgba(var(--bs-body-color-rgb),.12);
 $bb-calendar-week-header-border-bottom: 2px solid var(--bs-border-color);
 $bb-calendar-week-header-min-width: 52px;
 $bb-calendar-week-header-padding: 4px;