Set Silk variables on the DOM root instead of the "root" div

The benefit of this change is that the colorScheme CSS style now applies
to the entire site, which is important as otherwise the site's scrollbars
don't pick up the color.

frontend/kobweb-silk/src/jsMain/kotlin/com/varabyte/kobweb/silk/SilkApp.kt

@@ -4,32 +4,13 @@ import androidx.compose.runtime.*
 import com.varabyte.kobweb.compose.KobwebComposeStyles
 import com.varabyte.kobweb.core.KobwebApp
 import com.varabyte.kobweb.silk.init.SilkWidgetVariables
-import com.varabyte.kobweb.silk.theme.colors.ColorMode
-import kotlinx.browser.document
 
 @Composable
 fun SilkApp(content: @Composable () -> Unit) {
     KobwebApp {
         KobwebComposeStyles()
         SilkFoundationStyles()
         SilkWidgetVariables()
-
-        // Create a meta element to communicate the current theme color of the overall site to the browser
-        // This affects UI like scrollbars and form controls
-        run {
-            val colorMode = ColorMode.current
-            DisposableEffect(colorMode) {
-                val colorSchemeElement = document.createElement("meta").apply {
-                    setAttribute("name", "color-scheme")
-                    setAttribute("content", colorMode.name.lowercase())
-                }.also { document.head!!.appendChild(it) }
-
-                onDispose {
-                    colorSchemeElement.remove()
-                }
-            }
-        }
-
         content()
     }
 }

frontend/silk-widgets/src/jsMain/kotlin/com/varabyte/kobweb/silk/init/InitSilkWidgets.kt

@@ -372,18 +372,29 @@ val SilkColorsStyle = CssStyle.base {
 /**
  * Set all CSS variables needed by the Silk library to work.
  *
- * @param provideRootElement An element which must live at a point in the DOM tree above any Silk widgets. This method
+ * @param provideElement An element which must live at a point in the DOM tree above any Silk widgets. This method
  *   will be called inside a `remember` block, meaning it will only be triggered once per composition.
  */
 @Composable
-fun SilkWidgetVariables(provideRootElement: () -> HTMLElement) {
-    val rootElement = remember { provideRootElement() }
+fun SilkWidgetVariables(provideElement: () -> HTMLElement) {
+    val rootElement = remember { provideElement() }
     SilkWidgetVariables(rootElement)
 }
 
+/**
+ * Set all Silk variables on the DOM root.
+ */
+@Composable
+fun SilkWidgetVariables() {
+    SilkWidgetVariables { document.documentElement as HTMLElement }
+}
+
+/**
+ * Set all Silk variables on an element with the target ID name.
+ */
 @Composable
-fun SilkWidgetVariables(rootElementId: String = "root") {
-    SilkWidgetVariables { document.getElementById(rootElementId) as HTMLElement }
+fun SilkWidgetVariables(elementId: String) {
+    SilkWidgetVariables { document.getElementById(elementId) as HTMLElement }
 }
 
 @Deprecated("Use `SilkWidgetVariables` instead, as it is more Compose-idiomatic.",
@@ -395,8 +406,8 @@ fun Document.setSilkWidgetVariables(rootElementId: String = "root") {
 }
 
 @Composable
-fun SilkWidgetVariables(rootElement: HTMLElement) {
-    rootElement.setSilkWidgetVariables(ColorMode.current)
+fun SilkWidgetVariables(element: HTMLElement) {
+    element.setSilkWidgetVariables(ColorMode.current)
 }
 
 @Deprecated("Use `SilkWidgetVariables` instead, as it is more Compose-idiomatic.",