refactor(Offcanvas): add dark theme support

Author: mrholek

scss/_offcanvas.scss

@@ -5,17 +5,17 @@
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  color: $offcanvas-color;
+  color: var(--#{$variable-prefix}offcanvas-color, $offcanvas-color);
   visibility: hidden;
-  background-color: $offcanvas-bg-color;
+  background-color: var(--#{$variable-prefix}offcanvas-bg-color, $offcanvas-bg-color);
   background-clip: padding-box;
   outline: 0;
   @include box-shadow($offcanvas-box-shadow);
   @include transition(transform $offcanvas-transition-duration ease-in-out);
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  @include overlay-backdrop($zindex-offcanvas-backdrop, var(--#{$variable-prefix}offcanvas-backdrop-bg, $offcanvas-backdrop-bg), $offcanvas-backdrop-opacity);
 }
 
 .offcanvas-header {
@@ -47,15 +47,15 @@
   top: 0;
   @include ltr-rtl("left", 0);
   width: $offcanvas-horizontal-width;
-  @include ltr-rtl("border-right", $offcanvas-border-width solid $offcanvas-border-color);
+  @include ltr-rtl("border-right", $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color));
   @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
 }
 
 .offcanvas-end {
   top: 0;
   @include ltr-rtl("right", 0);
   width: $offcanvas-horizontal-width;
-  @include ltr-rtl("border-left", $offcanvas-border-width solid $offcanvas-border-color);
+  @include ltr-rtl("border-left", $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color));
   @include ltr-rtl-value-only("transform", translateX(100%), translateX(-100%));
 }
 
@@ -65,7 +65,7 @@
   left: 0;
   height: $offcanvas-vertical-height;
   max-height: 100%;
-  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+  border-bottom: $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color);
   transform: translateY(-100%);
 }
 
@@ -74,7 +74,7 @@
   left: 0;
   height: $offcanvas-vertical-height;
   max-height: 100%;
-  border-top: $offcanvas-border-width solid $offcanvas-border-color;
+  border-top: $offcanvas-border-width solid var(--#{$variable-prefix}offcanvas-border-color, $offcanvas-border-color);
   transform: translateY(100%);
 }
 

scss/themes/dark/_variables.scss

@@ -514,7 +514,6 @@ $list-group-variants-dt: (
 
 // Modals
 
-// Dark theme
 // scss-docs-start modal-dark-theme
 $modal-content-color-dt:         null !default;
 $modal-content-bg-dt:            $bg-elevation-24 !default;
@@ -568,9 +567,24 @@ $nav-theme-map: (
   "nav-underline-link-active-border-color":  $nav-underline-link-active-border-color-dt
 ) !default;
 
+// Offcanvas
+
+// scss-docs-start offcanvas-dark-theme
+$offcanvas-color-dt:         null !default;
+$offcanvas-bg-color-dt:      $bg-elevation-12 !default;
+$offcanvas-border-color-dt:  transparent !default;
+// scss-docs-end offcanvas-dark-theme
+
+$offcanvas-theme-map: (
+  "offcanvas-color":         $offcanvas-color-dt,
+  "offcanvas-bg-color":      $offcanvas-bg-color-dt,
+  "offcanvas-border-color":  $offcanvas-border-color-dt
+) !default;
+
+
 // Pagination
-// scss-docs-start pagination-variables
 
+// scss-docs-start pagination-variables
 $pagination-color-dt:                  $link-color-dt !default;
 $pagination-bg-dt:                     transparent !default;
 $pagination-border-color-dt:           $border-color-dt !default;
@@ -828,6 +842,7 @@ $theme-map: (
   "list-group":         $list-group-theme-map,
   "modal":              $modal-theme-map,
   "nav":                $nav-theme-map,
+  "offcanvas":          $offcanvas-theme-map,
   "pagination":         $pagination-theme-map,
   "picker":             $picker-theme-map,
   "popover":            $popover-theme-map,