💄 Facades for setting the theme

demo/src/main/scala/demo/EntryPoint.scala

@@ -8,6 +8,7 @@ import org.scalajs.dom
 import org.scalajs.dom.{window, URL}
 
 import demo.BadgeExample
+import demo.helpers.ThemeSelector
 object EntryPoint {
  def main(args: Array[String]): Unit = {
  val demoElement = {
@@ -131,7 +132,8 @@ object EntryPoint {
  onInput.mapToValue.compose(_.throttle(1000)) --> { v =>
  componentListVar.set(componentsDemo.filter(_.name.toLowerCase.contains(v)))
  }
- )
+ ),
+ ThemeSelector()
  ),
  padding("0.5rem"),
  cursor := "pointer",

demo/src/main/scala/demo/helpers/ThemeSelector.scala

@@ -0,0 +1,42 @@
+package demo.helpers
+
+import com.raquo.laminar.api.L.*
+import be.doeraene.webcomponents.ui5.*
+import be.doeraene.webcomponents.ui5.theming.Theming
+
+object ThemeSelector {
+
+ /** Allows to select the theme for the web-components.
+ *
+ * That does not take care of the "rest" of the ui (for example, the general background colour, or text colours...)
+ *
+ * You would need to use the `selectedChoiceVar` current value and adjust remaining css when relevant.
+ */
+ def apply(): HtmlElement = {
+
+ val themeChoices = Vector(
+ "sap_fiori_3",
+ "sap_fiori_3_dark"
+ )
+
+ val selectedChoiceVar = Var(themeChoices(0))
+
+ Select(
+ themeChoices.map { theme =>
+ Select.option(
+ theme,
+ _.value := theme,
+ _.selected <-- selectedChoiceVar.signal.map(_ == theme)
+ )
+ },
+ _.events.onChange.map(_.detail.selectedOption.maybeValue.getOrElse(themeChoices(0))) --> selectedChoiceVar.writer,
+ selectedChoiceVar.signal.changes --> Observer(Theming.setTheme)
+ )
+
+ }
+
+ // registering the themes
+ Theming.WebComponentsAssets
+ Theming.WebComponentsFioriAssets
+
+}

web-components/src/main/scala/be/doeraene/webcomponents/ui5/theming/Theming.scala

@@ -0,0 +1,41 @@
+package be.doeraene.webcomponents.ui5.theming
+
+import scala.scalajs.js.annotation.JSImport
+
+import scala.scalajs.js
+
+//noinspection ScalaUnusedSymbol
+object Theming {
+
+ @js.native
+ @JSImport("@ui5/webcomponents-base/dist/config/Theme.js", "setTheme")
+ def setTheme(theme: String): js.Promise[Unit] = js.native
+
+ @js.native
+ @JSImport("@ui5/webcomponents-base/dist/config/Theme.js", "getTheme")
+ def getTheme(): String = js.native
+
+ @js.native
+ @JSImport("@ui5/webcomponents-base/dist/asset-registries/Themes.js", "registerThemePropertiesLoader")
+ def registerThemePropertiesLoader(
+ packageName: String,
+ themeName: String,
+ loader: js.Function0[js.Promise[js.Object]]
+ ): Unit =
+ js.native
+
+ @js.native
+ @JSImport(
+ "@ui5/webcomponents/dist/Assets.js",
+ JSImport.Namespace
+ )
+ object WebComponentsAssets extends js.Object
+
+ @js.native
+ @JSImport(
+ "@ui5/webcomponents-fiori/dist/Assets.js",
+ JSImport.Namespace
+ )
+ object WebComponentsFioriAssets extends js.Object
+
+}