From 5ec7f05f94a6faba043cb8bfa66fdd7318878629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Fri, 26 May 2023 23:10:07 +0200
Subject: [PATCH] Resolved light dropdown issue on dark theme (#1604)

---
 .changeset/sharp-colts-grab.md              | 5 +++++
 src/pages/_includes/layout/navbar-side.html | 2 +-
 src/pages/_includes/layout/navbar.html      | 2 +-
 src/scss/_variables.scss                    | 1 +
 src/scss/layout/_dark.scss                  | 8 ++++++--
 src/scss/layout/_root.scss                  | 4 ++++
 6 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/sharp-colts-grab.md

diff --git a/.changeset/sharp-colts-grab.md b/.changeset/sharp-colts-grab.md
new file mode 100644
index 000000000..d5065c13b
--- /dev/null
+++ b/.changeset/sharp-colts-grab.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Resolved light dropdown issue on dark theme
diff --git a/src/pages/_includes/layout/navbar-side.html b/src/pages/_includes/layout/navbar-side.html
index 93a4bf4b3..dc2e9062f 100644
--- a/src/pages/_includes/layout/navbar-side.html
+++ b/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>
diff --git a/src/pages/_includes/layout/navbar.html b/src/pages/_includes/layout/navbar.html
index 805708924..ac19aca4f 100644
--- a/src/pages/_includes/layout/navbar.html
+++ b/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">
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e53ba475c..783baf40e 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -13,6 +13,7 @@ $enable-cssgrid: true !default;
 
 // DARK MODE
 $color-mode-type: data !default;
+
 // ASSETS BASE
 $assets-base: ".." !default;
 
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index 6a7bba15f..d84296f5c 100644
--- a/src/scss/layout/_dark.scss
+++ b/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];
+  }
 }
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 58da0c1ec..0fa2b9a24 100644
--- a/src/scss/layout/_root.scss
+++ b/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)};