search

unyt-org / uix

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

Bootstrap Theme #52

Open benStre opened 12 months ago

benStre commented 12 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 12 months ago

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

ren0x commented 12 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 12 months ago

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