feat(CCarosuel): add dark variant

Author: mrholek

packages/coreui-vue/src/components/offcanvas/COffcanvas.ts

@@ -26,6 +26,10 @@ const COffcanvas = defineComponent({
         return false
       },
     },
+    /**
+     * Sets a darker color scheme.
+     */
+    dark: Boolean,
     /**
      * Closes the offcanvas when escape key is pressed.
      */
@@ -182,6 +186,7 @@ const COffcanvas = defineComponent({
                 ref: offcanvasRef,
                 role: 'dialog',
                 tabindex: -1,
+                ...(props.dark && { 'data-coreui-theme': 'dark' }),
               },
               slots.default && slots.default(),
             ),

packages/docs/components/offcanvas.md

@@ -205,6 +205,36 @@ If you set a `backdrop` to `static`, your Vue offcanvas component will not close
 </script>
 ```
 
+## Dark offcanvas
+
+Change the appearance of offcanvases with `dark` boolean property to better match them to different contexts like dark navbars.
+
+::: demo
+<div class="docs-example-offcanvas bg-body-secondary p-0 overflow-hidden">
+  <COffcanvas :backdrop="false" dark placement="start" :visible="true">
+    <COffcanvasHeader>
+      <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+      <CCloseButton class="text-reset" />
+    </COffcanvasHeader>
+    <COffcanvasBody>
+      Content for the offcanvas goes here. You can place just about any React component or custom elements here.
+    </COffcanvasBody>
+  </COffcanvas>
+</div>
+:::
+```vue
+<COffcanvas :backdrop="false" dark placement="start" :visible="true">
+  <COffcanvasHeader>
+    <COffcanvasTitle>Offcanvas</COffcanvasTitle>
+    <CCloseButton class="text-reset" />
+  </COffcanvasHeader>
+  <COffcanvasBody>
+    Content for the offcanvas goes here. You can place just about any React component or custom elements here.
+  </COffcanvasBody>
+</COffcanvas>
+```
+
+
 ## Responsive 
 
 Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.