Resolved light dropdown issue on dark theme (#1604)

.changeset/sharp-colts-grab.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Resolved light dropdown issue on dark theme

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

@@ -46,7 +46,7 @@
 			</div>
 			{% endunless %}
 		</a>
-		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
 			<a href="#" class="dropdown-item">Status</a>
 			<a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a>
 			<a href="#" class="dropdown-item">Feedback</a>

src/pages/_includes/layout/navbar.html

@@ -13,7 +13,7 @@
 				{% 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 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 dark=include.dark %}
 
 			{% if condensed %}
 			<div class="collapse navbar-collapse" id="navbar-menu">

src/scss/_variables.scss

@@ -13,6 +13,7 @@ $enable-cssgrid: true !default;
 
 // DARK MODE
 $color-mode-type: data !default;
+
 // ASSETS BASE
 $assets-base: ".." !default;
 

src/scss/layout/_dark.scss

@@ -1,14 +1,14 @@
 // stylelint-disable declaration-no-important
 
 body {
-  &:not(.theme-dark):not([data-bs-theme="dark"]) {
+  &:not(.theme-dark):not([data-bs-theme=dark]) {
     .hide-theme-light {
       display: none !important;
     }
   }
 
   &.theme-dark,
-  &[data-bs-theme="dark"] {
+  &[data-bs-theme=dark] {
     .hide-theme-dark {
       display: none !important;
     }
@@ -65,4 +65,8 @@ body {
       }
     }
   }
+
+  body[data-bs-theme=dark] [data-bs-theme=light] {
+    @extend [data-bs-theme=dark];
+  }
 }

src/scss/layout/_root.scss

@@ -2,7 +2,11 @@
 :host {
   font-size: 16px;
   height: 100%;
+}
 
+:root,
+:host,
+[data-bs-theme="light"] {
   @each $name, $color in map-merge($theme-colors, $gray-colors) {
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};