Unify dark mode with latest Bootstrap API and improve dark mode elements (#1561)

.changeset/rare-pumpkins-pull.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Unify dark mode with latest Bootstrap API and improve dark mode elements

src/js/demo-theme.js

@@ -21,5 +21,8 @@ if (!!params.theme) {
 	selectedTheme = storedTheme ? storedTheme : defaultTheme
 }
 
-document.body.classList.remove("theme-dark", "theme-light")
-document.body.classList.add(`theme-${selectedTheme}`)
+if (selectedTheme === 'dark') {
+	document.body.setAttribute("data-bs-theme", selectedTheme)
+} else {
+	document.body.removeAttribute("data-bs-theme")
+}

src/pages/_includes/layout/navbar-logo.html

@@ -11,9 +11,9 @@
 {% endif %}
 		{% unless include.hide-logo %}
 		{% if include.small-logo %}
-		<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
+		<img src="{{ site.base }}/static/logo-small.svg" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
 		{% else %}
-		<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" width="110" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
+		<img src="{{ site.base }}/static/logo.svg" width="110" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
 		{% endif %}
 		{% endunless %}
 

src/pages/_includes/layout/navbar-search.html

@@ -2,6 +2,6 @@
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
 	<form action="{{ site.base }}/" method="get" autocomplete="off" novalidate>
-		{% include ui/form/input-icon.html prepend=true dark=include.dark rounded=include.rounded aria-label="Search in website" %}
+		{% include ui/form/input-icon.html prepend=true rounded=include.rounded aria-label="Search in website" %}
 	</form>
 </div>

src/pages/_includes/layout/navbar-side.html

@@ -5,17 +5,10 @@
 	{% unless include.condensed %}
 	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
 		<div class="btn-list">
-			{% if include.dark %}
-			{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url
-			external=true %}
-			{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor"
-			href=site.github-sponsors-url external=true %}
-			{% else %}
 			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url
 			external=true %}
 			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor"
 			href=site.github-sponsors-url external=true %}
-			{% endif %}
 		</div>
 	</div>
 	{% endunless %}

src/pages/_includes/layout/navbar.html

@@ -5,22 +5,22 @@
 <div class="sticky-top">
 {% endif %}
 
-	<header class="navbar navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% else %}{% if include.dark %} navbar-dark{% else %} navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endif %}{% if include.sticky %} sticky-top{% endif %}{% if include.overlap %} navbar-overlap{% endif %}{% if include.class %} {{ include.class }}{% endif %} d-print-none"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
+	<header class="navbar navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% else %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endif %}{% if include.sticky %} sticky-top{% endif %}{% if include.overlap %} navbar-overlap{% endif %}{% if include.class %} {{ include.class }}{% endif %} d-print-none"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %} {% if include.dark %} data-bs-theme="dark"{% endif %}>
 		<div class="container-xl">
 			{% include layout/navbar-toggler.html target="navbar-menu" %}
 
 			{% unless include.hide-brand %}
-				{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
+				{% include layout/navbar-logo.html small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
 			{% endunless %}
 
-			{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id dark=include.dark breakpoint=breakpoint %}
+			{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint %}
 
 			{% if condensed %}
 			<div class="collapse navbar-collapse" id="navbar-menu">
 				{% if include.hide-search %}
 					{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
 				{% elsif include.hide-menu %}
-					{% include layout/navbar-search.html rounded=include.transparent dark=include.dark %}
+					{% include layout/navbar-search.html rounded=include.transparent %}
 				{% else %}
 					<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
 						{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
@@ -31,7 +31,7 @@
 								{% assign search-class = search-class | append: " flex-md-grow-0" %}
 							{% endunless %}
 
-							{% include layout/navbar-search.html breakpoint=breakpoint rounded=include.transparent class=search-class dark=include.dark %}
+							{% include layout/navbar-search.html breakpoint=breakpoint rounded=include.transparent class=search-class %}
 						{% endunless %}
 					</div>
 				{% endif %}
@@ -43,10 +43,10 @@
 	{% unless condensed %}
 	<header class="navbar-expand-{{ breakpoint }}">
 		<div class="collapse navbar-collapse" id="navbar-menu">
-			<div class="navbar {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}">
+			<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
 				<div class="container-xl">
 					{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons long-titles=true %}
-					{% include layout/navbar-search.html breakpoint=breakpoint dark=include.dark-secondary class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
+					{% include layout/navbar-search.html breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
 				</div>
 			</div>
 		</div>

src/pages/_includes/layout/sidebar.html

@@ -1,11 +1,11 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
-<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% else %}{% if include.dark %} navbar-dark{% else %} navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
+<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	<div class="container-fluid">
 		{% include layout/navbar-toggler.html target="sidebar-menu" %}
 
 		{% unless include.hide-brand %}
-			{% include layout/navbar-logo.html dark=include.dark breakpoint=breakpoint header=true %}
+			{% include layout/navbar-logo.html breakpoint=breakpoint header=true %}
 		{% endunless %}
 
 		{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id breakpoint=breakpoint %}

src/pages/_includes/ui/dropdown-menu.html

@@ -1,4 +1,4 @@
-<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	{% if include.menu %}
 		{% assign menu = include.menu | split: ',' %}
 

src/pages/_includes/ui/form/input-icon.html

@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
+	<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
 
 	{% unless include.prepend %}
 		{{ addon }}

src/scss/_config.scss

@@ -1,6 +1,7 @@
 @import "bootstrap/scss/functions";
 
 @import "variables";
+@import "variables-dark";
 @import "utilities";
 @import "mixins";
 

src/scss/_variables-dark.scss

@@ -0,0 +1,17 @@
+//
+// Dark mode
+//
+$darken-dark: darken($dark, 2%) !default;
+$lighten-dark: lighten($dark, 2%) !default;
+$border-color-dark: lighten($dark, 4%) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-dark-color-dark: lighten($dark, 4%) !default;
+$border-color-active-dark: lighten($dark, 12%) !default;
+
+//new bootsrap variables
+$body-color-dark: $light !default;
+$body-emphasis-color-dark: $white !default;
+
+$code-color-dark: var(--#{$prefix}gray-300) !default;
+$text-muted-dark: rgba(153, 159, 164, 1) !default;
+ 

src/scss/_variables.scss

@@ -11,6 +11,9 @@ $enable-negative-margins: false !default;
 $enable-rfs: false !default;
 $enable-cssgrid: true !default;
 
+// DARK MODE
+$color-mode-type: data !default;
+
 // ASSETS BASE
 $assets-base: ".." !default;
 
@@ -158,6 +161,7 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-bg: $gray-100 !default;
 $body-color: $dark !default;
+$body-emphasis-color: $dark !default;
 
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
@@ -289,16 +293,6 @@ $theme-colors: map-merge(
   map-merge($extra-colors, $social-colors)
 );
 
-//
-// Dark mode
-//
-$dark-mode-darken: darken($dark, 2%) !default;
-$dark-mode-lighten: lighten($dark, 2%) !default;
-$dark-mode-border-color: lighten($dark, 4%) !default;
-$dark-mode-border-dark-color: lighten($dark, 4%) !default;
-$dark-mode-border-color-active: lighten($dark, 12%) !default;
-$dark-mode-text: $light;
-
 // Borders
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
@@ -313,7 +307,6 @@ $icon-color: var(--#{$prefix}gray-500) !default;
 
 // Code
 $code-color: var(--#{$prefix}gray-600) !default;
-$code-color-dark: var(--#{$prefix}gray-300) !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
 $code-bg: var(--#{$prefix}bg-surface-secondary) !default;
@@ -630,7 +623,7 @@ $tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
 $loader-size: 2.5rem !default;
 
 // Lists
-$list-group-header-bg: var(--#{$prefix}light) !default;
+$list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $list-group-header-color: var(--#{$prefix}muted) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
@@ -656,7 +649,7 @@ $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
 $modal-header-border-width: var(--#{$prefix}border-width) !default;
 $modal-header-border-color: var(--#{$prefix}border-color) !default;
-$modal-header-bg: $white !default;
+$modal-header-bg: transparent !default;
 $modal-inner-padding: 1.5rem !default;
 
 $modal-footer-border-width: var(--#{$prefix}border-width) !default;

src/scss/demo.scss

@@ -3,15 +3,11 @@
 @import "demo/examples";
 
 .card-sponsor {
-  background: #dbe7f6 no-repeat center/100% 100%;
-  border-color: #548ed2;
+  background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;
+  border-color: var(--#{$prefix}primary);
   min-height: 316px;
 }
 
-body.no-transitions * {
-  transition: none !important;
-}
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
@@ -124,15 +120,19 @@ $demo-icon-size: 4rem;
   &-light {
     background: linear-gradient(135deg, $white 50%, $light 50%);
   }
+
   &-mixed {
     background-image: linear-gradient(135deg, $dark 50%, #fff 50%);
   }
+
   &-transparent {
     background: $light;
   }
+
   &-dark {
     background: $dark;
   }
+  
   &-colored {
     background-image: linear-gradient(
       135deg,

src/scss/demo/_examples.scss

@@ -76,20 +76,4 @@
   top: 0;
   height: 100%;
   border-radius: 2px 2px 0 0;
-}
-
-@include dark-mode {
-  .example {
-    background-color: $dark-mode-darken;
-    border-color: $dark-mode-border-color;
-  }
-
-  .example-content {
-    color: $dark-mode-text;
-  }
-
-  .example-code {
-    border-color: $dark-mode-border-color;
-    border-top: none;
-  }
 }

src/scss/layout/_dark.scss

@@ -1,188 +1,68 @@
 // stylelint-disable declaration-no-important
-body:not(.theme-dark) .hide-theme-light {
-  display: none !important;
+
+body {
+  &:not(.theme-dark):not([data-bs-theme="dark"]) {
+    .hide-theme-light {
+      display: none !important;
+    }
+  }
+
+  &.theme-dark,
+  &[data-bs-theme="dark"] {
+    .hide-theme-dark {
+      display: none !important;
+    }
+  }
 }
 
-@include dark-mode {
-  & {
-    --#{$prefix}body-color: #{$dark-mode-text};
-    --#{$prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
-    --#{$prefix}muted: rgba(153, 159, 164, 1);
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}muted: #{$text-muted-dark};
 
-    --#{$prefix}body-bg: #{$dark-mode-darken};
-    --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
+    --#{$prefix}body-bg: #{$darken-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    --#{$prefix}bg-forms: #{$dark-mode-darken};
+    --#{$prefix}bg-forms: #{$darken-dark};
     --#{$prefix}bg-surface: #{$dark};
-    --#{$prefix}bg-surface-dark: #{$dark-mode-darken};
-    --#{$prefix}bg-surface-secondary: #{$dark-mode-lighten};
-    --#{$prefix}bg-surface-tertiary: #{$dark-mode-darken};
+    --#{$prefix}bg-surface-dark: #{$darken-dark};
+    --#{$prefix}bg-surface-secondary: #{$lighten-dark};
+    --#{$prefix}bg-surface-tertiary: #{$darken-dark};
 
     --#{$prefix}link-color: #{lighten($primary, 8%)};
     --#{$prefix}link-hover-color: #{$primary};
 
-    --#{$prefix}active-bg: #{$dark-mode-lighten};
+    --#{$prefix}active-bg: #{$lighten-dark};
     --#{$prefix}disabled-color: var(--#{$prefix}gray-700);
 
-    --#{$prefix}card-bg: #{$dark-mode-darken};
-    --#{$prefix}card-bg-hover: #{$dark-mode-darken};
-    --#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
-    --#{$prefix}card-color: #{$dark-mode-text};
-
     --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
+    --#{$prefix}border-color-translucent: var(
+      --#{$prefix}dark-mode-border-color-translucent
+    );
     --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-    --#{$prefix}border-color-active: var(--#{$prefix}dark-mode-border-color-active);
+    --#{$prefix}border-color-active: var(
+      --#{$prefix}dark-mode-border-color-active
+    );
 
-    --#{$prefix}btn-color: #{$dark-mode-darken};
+    --#{$prefix}btn-color: #{$darken-dark};
 
     --#{$prefix}code-color: var(--#{$prefix}body-color);
-    --#{$prefix}code-bg: #{$dark-mode-border-dark-color};
+    --#{$prefix}code-bg: #{$border-dark-color-dark};
 
     @each $color, $value in $theme-colors {
-      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
+      --#{$prefix}#{$color}-lt: #{theme-color-lighter($value, $dark)};
+      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(
+          theme-color-lighter($value, $dark)
+        )};
     }
 
-    color-scheme: dark;
-    color: $dark-mode-text;
-    background-color: $dark-mode-darken;
-  }
-
-  .page {
-    color: $dark-mode-text;
-  }
-
-  .hide-theme-dark {
-    display: none !important;
-  }
-
-  .text-body {
-    color: $dark-mode-text!important;
-  }
-
-  .card,
-  .card-footer,
-  .card-stacked::after,
-  .footer:not(.footer-transparent),
-  .modal-content,
-  .modal-header,
-  .dropdown-menu,
-  .toast,
-  .toast-header,
-  .alert:not(.alert-important) {
-    background-color: var(--#{$prefix}bg-surface);
-    color: inherit;
-  }
-
-  .modal {
-    --#{$prefix}modal-border-color: var(--#{$prefix}border-color);
-  }
-
-  .bg-light {
-    background-color: $dark-mode-darken !important;
-  }
-
-  .card-tabs .nav-tabs .nav-link {
-    background-color: $dark-mode-darken;
-    color: inherit;
-  }
-
-  .card-tabs .nav-tabs .nav-link.active {
-    background-color: $dark;
-    color: inherit;
-  }
-
-  .form-check-input:not(:checked),
-  .form-select,
-  .form-file-text,
-  .form-control,
-  .form-selectgroup-check {
-    background-color: $dark-mode-darken;
-    color: $dark-mode-text;
-    border-color: $dark-mode-border-color;
-  }
-
-  .form-control-plaintext {
-    color: $dark-mode-text;
-  }
-
-  .input-group-flat .input-group-text {
-    background-color: $dark-mode-darken;
-  }
-
-  .input-group-text {
-    border-color: $dark-mode-border-color;
-  }
-
-  .highlight {
-    background-color: $dark-mode-darken;
-  }
-
-  .timeline-event-icon {
-    background-color: #{$dark-mode-lighten};
-  }
-
-  .markdown,
-  .markdown>*,
-  .accordion-button {
-    color: inherit;
-  }
-
-  .btn-close,
-  .accordion-button:after {
-    filter: $btn-close-white-filter;
-  }
-
-  .apexcharts-text {
-    fill: $dark-mode-text;
-  }
-
-  .apexcharts-gridline {
-    stroke: var(--#{$prefix}border-color);
-  }
-
-  .apexcharts-legend-text {
-    color: inherit !important;
-  }
-
-  .navbar-brand-autodark {
-    @include autodark-image;
-  }
-
-  .table thead th,
-  .input-group-text {
-    background: transparent;
-  }
-
-  .list-group-header {
-    background: $dark-mode-darken;
-  }
-
-  .list-group-item {
-    //border-color: $border-color-transparent;
-  }
-
-  .list-group-item:not(.disabled):not(:disabled) {
-    color: $dark-mode-text;
-  }
-
-  .list-group-item {
-    &.disabled,
-    &:disabled {
-      color: $gray-600;
+    .navbar-brand-autodark {
+      .navbar-brand-image {
+        @include autodark-image;
+      }
     }
   }
-
-  .apexcharts-radialbar-area {
-    stroke: $dark-mode-border-color;
-  }
-
-  .form-control.is-invalid,
-  .was-validated .form-control:invalid {
-    border-color: var(--#{$prefix}danger);
-  }
-
-  .form-control.is-valid,
-  .was-validated .form-control:valid {
-    border-color: var(--#{$prefix}success);
-  }
 }

src/scss/layout/_navbar.scss

@@ -135,11 +135,12 @@
 Navbar
  */
 .navbar {
+  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}navbar-border-width: #{$navbar-border-width};
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-bg: transparent;
   --#{$prefix}navbar-color: inherit;
+  --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;
   box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
@@ -154,12 +155,6 @@ Navbar
     min-height: 0;
   }
 
-  //@include navbar-color();
-
-  @include dark-mode {
-    @include navbar-dark();
-  }
-
   .dropdown-menu {
     position: absolute;
     z-index: $zindex-fixed;
@@ -206,20 +201,17 @@ Navbar
           flex: 1 1 auto;
         }
 
-        &.navbar-light,
-        .navbar-light {
-          .nav-item.active {
-            position: relative;
+        .nav-item.active {
+          position: relative;
 
-            &:after {
-              content: "";
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -.25rem;
-              border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
-              border-bottom-width: 2px;
-            }
+          &:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -.25rem;
+            border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
+            border-bottom-width: 2px;
           }
         }
 
@@ -325,20 +317,12 @@ Navbar toggler
   }
 }
 
-/**
-Navbar light
- */
-.navbar-light {
-  --#{$prefix}navbar-border-color: #{$navbar-border-color};
-  --#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
-}
-
-/**
-Navbar dark
- */
-.navbar-dark {
-  @include navbar-dark;
-}
+// /**
+// Navbar dark
+//  */
+// .navbar-dark {
+//   @include navbar-dark;
+// }
 
 /**
 Navbar transparent

src/scss/layout/_root.scss

@@ -39,9 +39,10 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
-  --#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
-  --#{$prefix}dark-mode-border-dark-color: #{$dark-mode-border-dark-color};
-  --#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};
+  --#{$prefix}dark-mode-border-color: #{$border-color-dark};
+  --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
+  --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+  --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
   --#{$prefix}page-padding: #{$page-padding};
   --#{$prefix}page-padding-y: #{$page-padding-y};

src/scss/mixins/_mixins.scss

@@ -48,38 +48,6 @@
   filter: brightness(0) invert(1);
 }
 
-@mixin dark-mode {
-  @if $enable-dark-mode {
-    $selector: &;
-
-    @media not print {
-      @if ($selector) {
-        .theme-dark & {
-          @content
-        }
-      } @else {
-        .theme-dark {
-          @content
-        }
-      }
-    }
-
-    @media not print {
-      @media (prefers-color-scheme: dark) {
-        @if ($selector) {
-          .theme-dark-auto & {
-            @content
-          }
-        } @else {
-          .theme-dark-auto {
-            @content
-          }
-        }
-      }
-    }
-  }
-}
-
 //
 // Elements list
 //

src/scss/ui/_tables.scss

@@ -1,18 +1,3 @@
-@include dark-mode {
-  $table-variants: (
-    "primary":    shift-color($primary, $table-bg-scale-dark),
-    "secondary":  shift-color($secondary, $table-bg-scale-dark),
-    "success":    shift-color($success, $table-bg-scale-dark),
-    "info":       shift-color($info, $table-bg-scale-dark),
-    "warning":    shift-color($warning, $table-bg-scale-dark),
-    "danger":     shift-color($danger, $table-bg-scale-dark),
-  );
-
-  @each $color, $value in $table-variants {
-    @include table-variant($color, $value);
-  }
-}
-
 .table {
   thead {
     th {

src/scss/vendor/_apexcharts.scss

@@ -25,4 +25,20 @@
 .apexcharts-tooltip-marker {
   width: 10px !important;
   height: 10px !important;
+}
+
+.apexcharts-text {
+  fill: var(--#{$prefix}body-color) !important;
+}
+
+.apexcharts-gridline {
+  stroke: var(--#{$prefix}border-color) !important;
+}
+
+.apexcharts-legend-text {
+  color: inherit !important;
+}
+
+.apexcharts-radialbar-area {
+  stroke: var(--#{$prefix}border-color-dark) !important;
 }

src/scss/vendor/_tinymce.scss

@@ -8,6 +8,10 @@
   padding: 0 .5rem 0;
 }
 
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
 .tox:not(.tox-tinymce-inline) {
   .tox-editor-header {
     border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
@@ -17,7 +21,7 @@
 }
 
 .tox-tbtn {
-  margin: 0 !important;
+  margin: 0 !important; 
 }
 
 .tox-statusbar {