Bootstrap dark theme

[MrReSc]

Danke @tbnobody für das wirklich gute Projekt!

Kannst du mit einen Tip geben, wie und wo das Bootstrap theme geladen wird?
Hätte gerne eine dark Variant. Man könnte anhand der Info vom OS https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme das Theme automatisch umschalten.

[tbnobody]

Wenn ich das korrekt gelesen habe wird Bootstrap 5.3 sowieso einen Dark Theme out of the box unterstützen.
Ein Platz für eigene SCSS Anpassungen währe z.B. hier: https://github.com/tbnobody/OpenDTU/blob/master/webapp/src/scss/styles.scss

[MrReSc]

Ich habe mal ein sehr einfaches "Dark Theme" erstellt. Es ist nicht wirklich ein Theme, sondern die Farben werden invertiert. So kann das Ganze in ein paar Zeilen CSS erledigt werden. Es deckt auch noch nicht 100 % ab. Abhängig davon, was beim Betriebssystem (@media (prefers-color-scheme: dark)) eingestellt ist, wird das helle oder dunkle Theme verwendet.

In der Datei webapp/src/scss/styles.scss habe ich folgendes eingefügt und die Webapp neu kompiliert.

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";


@media (prefers-color-scheme: dark) {

    :root, .dropdown-menu, .tooltip, .form-select.me-2 {
        filter: invert(95%) hue-rotate(180deg);
    }

    .bg-dark {
        filter: invert(100%) hue-rotate(180deg);
    }
    
}

@tbnobody falls du möchtest, würde ich ein PR erstellen. Ansonsten lasse ich das mal so stehen.
Aber wie du schon gesagt hast, wird 5.3 einen dark mode haben https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode.