Add color-theme support to silk

This ensures that Silk sites will update the browser UI affordances that surround the site when the theme changes. Fixes #627
varabyte · Dec 15, 2024 · 56dbdfe · 56dbdfe
1 parent b59e923
commit 56dbdfe
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/...d/silk-foundation/src/jsMain/kotlin/com/varabyte/kobweb/silk/theme/meta/MetaThemeColor.kt b/...d/silk-foundation/src/jsMain/kotlin/com/varabyte/kobweb/silk/theme/meta/MetaThemeColor.kt
@@ -0,0 +1,46 @@
+package com.varabyte.kobweb.silk.theme.meta
+
+import androidx.compose.runtime.*
+import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import kotlinx.browser.document
+import org.jetbrains.compose.web.css.*
+
+@Composable
+fun MetaThemeColor(color: CSSColorValue) = MetaThemeColor(color, color)
+
+@Composable
+fun MetaThemeColor(light: CSSColorValue, dark: CSSColorValue) {
+    run {
+        // Add the following entries to the <head> element
+        //
+        // <meta name="theme-color" media="(prefers-color-scheme: light)" content="...">
+        // <meta name="theme-color" media="(prefers-color-scheme: dark)" content="...">
+        // <meta name="color-scheme" content="light|dark">
+        //
+        // The color-scheme value will be updated dynamically based on
+        LaunchedEffect(Unit) {
+            val themeColorElements = document.querySelectorAll("""meta[name="theme-color"]""")
+            if (themeColorElements.length == 0) {
+                ColorMode.entries.toList().forEach { colorMode ->
+                    document.createElement("meta").apply {
+                        setAttribute("name", "theme-color")
+                        setAttribute("media", "(prefers-color-scheme: ${colorMode.name.lowercase()})")
+                        setAttribute("content", (if (colorMode.isLight) light else dark).toString())
+                    }.also { document.head!!.appendChild(it) }
+                }
+            }
+        }
+
+        val colorMode = ColorMode.current
+        LaunchedEffect(colorMode) {
+            var colorSchemeElement = document.querySelector("""meta[name="color-scheme"]""")
+            if (colorSchemeElement == null) {
+                colorSchemeElement = document.createElement("meta").apply {
+                    setAttribute("name", "color-scheme")
+                }.also { document.head!!.appendChild(it) }
+            }
+            colorSchemeElement.setAttribute("content", colorMode.name.lowercase())
+        }
+    }
+
+}
diff --git a/...widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/theme/colors/palette/MetaThemeColor.kt b/...widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/theme/colors/palette/MetaThemeColor.kt
@@ -0,0 +1,11 @@
+package com.varabyte.kobweb.silk.theme.meta
+
+import androidx.compose.runtime.*
+import com.varabyte.kobweb.silk.theme.colors.ColorMode
+import com.varabyte.kobweb.silk.theme.colors.palette.background
+import com.varabyte.kobweb.silk.theme.colors.palette.toPalette
+
+@Composable
+fun MetaThemeColor() {
+    MetaThemeColor(ColorMode.LIGHT.toPalette().background, ColorMode.DARK.toPalette().background)
+}
diff --git a/...ite/src/jsMain/kotlin/playground/MyApp.kt → .../src/jsMain/kotlin/playground/AppEntry.kt b/...ite/src/jsMain/kotlin/playground/MyApp.kt → .../src/jsMain/kotlin/playground/AppEntry.kt
@@ -19,6 +19,7 @@ import com.varabyte.kobweb.silk.style.common.SmoothColorStyle
 import com.varabyte.kobweb.silk.style.toModifier
 import com.varabyte.kobweb.silk.theme.colors.ColorMode
 import com.varabyte.kobweb.silk.theme.colors.systemPreference
+import com.varabyte.kobweb.silk.theme.meta.MetaThemeColor
 import kotlinx.browser.localStorage
 import org.jetbrains.compose.web.css.*
 
@@ -72,6 +73,8 @@ fun registerGlobalStyles(ctx: InitSilkContext) = ctx.stylesheet.apply {
 @Composable
 fun AppEntry(content: @Composable () -> Unit) {
     SilkApp {
+        MetaThemeColor()
+
         val colorMode = ColorMode.current
         LaunchedEffect(colorMode) { localStorage.setItem(COLOR_MODE_KEY, colorMode) }