#6372: Fix badge & progress-bar foreground color in dark mode

This commit is contained in:
checktheroads 2021-05-07 16:40:24 -07:00
parent 32e1d7e879
commit 1a843f95b7
7 changed files with 20 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -62,6 +62,16 @@
margin-bottom: $spacer;
}
// Use proper contrasting color for badge & progress-bar foreground color.
@each $color, $value in $theme-colors {
.badge,
.progress-bar {
&.bg-#{$color} {
color: color-contrast($value);
}
}
}
body {
background-color: var(--nbx-body-bg);
color: var(--nbx-body-color);
@ -80,8 +90,10 @@ body {
}
&[data-netbox-color-mode='light'] {
.btn.btn-primary {
color: $white;
.btn.btn-primary,
.progress-bar.bg-primary,
.badge.bg-primary {
color: $gray-50;
}
}
&[data-netbox-color-mode='dark'] {

View File

@ -22,7 +22,7 @@
aria-valuemax="100"
aria-valuenow="{{ utilization }}"
style="width: {{ utilization }}%;"
class="progress-bar bg-warning text-dark"
class="progress-bar bg-warning"
>
{{ utilization }}%
</div>