fix(VCalendar): add theme background color (#19745)

fixes #18988 Co-authored-by: John Leider <[email protected]>
vuetifyjs · May 7, 2024 · 5a39b60 · 5a39b60
1 parent c4b33c0
commit 5a39b60
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendar.sass b/packages/vuetify/src/labs/VCalendar/VCalendar.sass
@@ -2,15 +2,16 @@
 @use './variables' as *
 
 @include tools.layer('components')
+  .v-calendar
+    @include tools.theme($calendar-theme...)
+
   .v-calendar-weekly
     width: 100%
     height: 100%
     display: flex
     flex-direction: column
     // https://github.com/vuetifyjs/vuetify/issues/8319
     min-height: 0
-    // Themed
-    background-color: #fff
 
   .v-calendar__container
     border-top: $calendar-line-width solid $calendar-line-color

diff --git a/packages/vuetify/src/labs/VCalendar/_variables.scss b/packages/vuetify/src/labs/VCalendar/_variables.scss
@@ -1,3 +1,6 @@
+$calendar-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !default;
+$calendar-background: rgb(var(--v-theme-background)) !default;
+
 $calendar-line-width: thin !default;
 $calendar-line-color: #e0e0e0 !default;
 
@@ -45,3 +48,8 @@ $calendar-event-border-width: 1px !default;
 $calendar-event-font-size: 12px !default;
 $calendar-event-line-height: 20px !default;
 $calendar-event-right-empty: 10px !default;
+
+$calendar-theme: (
+  $calendar-background,
+  $calendar-color
+) !default;