search

unyt-org / uix

The UIX Framework
https://uix.unyt.org
MIT License
54 stars 3 forks source link

Bootstrap Theme #52

Open benStre opened 9 months ago

benStre commented 9 months ago

Gleich als einen weiteren Vorschlag vielleicht Bootstrap? Noch binde ich es über ein custom theme ein, wie in den Docs vorgeschlagen:

// Bootstrap theme
UIX.Theme.setMode('light');
UIX.Theme.useThemes("uix-light-plain")

UIX.Theme.registerTheme({
  name: 'bootstrap-light-theme',
  mode: 'light', 
  stylesheets: [
    'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
  ],
  onActivate() {
    console.log("bla");
  }
});

UIX.Theme.useThemes("bootstrap-light-theme");

Semantisch scheint mir das aber suboptimal, weil es nicht wirklich "mein custom theme" ist. Wäre cool, wenn man beides einbinden könnte! :)

Originally posted by @ren0x in https://github.com/unyt-org/uix/issues/51#issuecomment-1831725107

benStre commented 9 months ago

Reden wir hier nur von Bootstrap CSS ohne erweiterte JS funktionalität? Wie wird dark/light mode mit Bootstrap gehandelt?

ren0x commented 9 months ago

Erstmal geht es mir nur um Bootstrap CSS (Die JS-Funktionalität zu haben wäre natürlich cool, aber ich kann mir vorstellen, dass das nicht einfach zu implementieren ist...).

Seit Bootstrap 5.3 wird auch Dark-/Light-Mode unterstützt (color modes):

[...] color mode styles are controlled by the data-bs-theme attribute. This attribute can be applied to the <html> element, or to any other element or Bootstrap component. If applied to the <html> element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.

Dafür gibt es auch eine Demo: https://github.com/twbs/examples/tree/main/color-modes

benStre commented 9 months ago

Wär ja auch zu einfach wenn die standardisierte prefers-color-scheme selektoren oder so verwenden würden :)