feat: add color modes support

src/styles/_example.scss

@@ -1,33 +1,23 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
 .example {
   &:not(:first-child) {
     margin-top: 1.5rem;
   }
 
   .tab-content {
-    background-color: $light-50 !important;
-
-    @at-root .dark-theme & {
-      background-color: rgba(255, 255, 255, .1) !important;
-    }
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-size: .875rem !important;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
+    background-color: var(--#{$prefix}tertiary-bg) !important;
   }
 
   & + p {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
   }
 
   // Components examples
-  .preview,
-  .preview .col {
+  .preview {
     + p {
       margin-top: 2rem;
     }
@@ -105,5 +95,20 @@
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}

src/styles/_variables.scss

@@ -1 +1,3 @@
 // Variable overrides
+//
+// If you want to customize your project please add your variables below.

src/styles/style.scss

@@ -4,14 +4,14 @@
 $enable-ltr: true;
 $enable-rtl: true;
 
-// Import styles
-@import "~@coreui/coreui/scss/coreui";
+// Import CoreUI for React components library
+@import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js Tooltips
-@import "~@coreui/chartjs/scss/tooltips";
+// Import Chart.js custom tooltips styles
+@import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
 @import "example";
 
-// If you want to add something do it here
+// If you want to add custom CSS you can put it here.
 @import "custom";