Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Resolved light dropdown issue on dark theme (#1604)

Browse Source
This commit is contained in:
Paweł Kuna
2023-05-26 23:10:07 +02:00
committed by GitHub
parent b3812738df
commit 5ec7f05f94
6 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/sharp-colts-grab.md Normal file
View File

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

2
src/pages/_includes/layout/navbar-side.html
View File

@@ -46,7 +46,7 @@
</div> </div>
{% endunless %} {% endunless %}
</a> </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="#" class="dropdown-item">Status</a>
<a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a> <a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a> <a href="#" class="dropdown-item">Feedback</a>

2
src/pages/_includes/layout/navbar.html
View File

@@ -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 %} {% 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 %} {% 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 %} {% if condensed %}
<div class="collapse navbar-collapse" id="navbar-menu"> <div class="collapse navbar-collapse" id="navbar-menu">

1
src/scss/_variables.scss
View File

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

8
src/scss/layout/_dark.scss
View File

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

4
src/scss/layout/_root.scss
View File

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