feat: Add dark-mode toggle switch

R/input-switch.R

@@ -78,16 +78,44 @@ toggle_switch <- function(id, value = NULL, session = get_current_session()) {
 }
 
 # Keep this internal for now until we agree on the UX
-input_dark_mode_switch <- function(id, label, ..., width = "auto") {
-  res <- input_switch(id, label, ..., width = width)
-  # TODO: .navbar should probably do this for .shiny-input-container
-  res <- tagAppendAttributes(res, style = "margin-bottom: 0;")
-  tagAppendAttributes(
-    res, .cssSelector = "input",
-    onclick = "document.documentElement.setAttribute('data-bs-theme', this.checked ? 'dark' : 'light'); $(window).resize();"
+input_dark_mode_switch <- function(id, ..., mode = NULL) {
+  if (!is.null(mode)) {
+    mode <- rlang::arg_match(mode, c("light", "dark"))
+  }
+
+  if (any(!nzchar(rlang::names2(rlang::list2(...))))) {
+    abort("All arguments in `...` must be named.")
+  }
+
+  res <- web_component(
+    "bslib-dark-mode-switch",
+    id = id,
+    "theme-attribute" = "data-bs-theme",
+    "theme-value" = mode,
+    style = css(
+      "--text-1" = "var(--bs-emphasis-color)",
+      "--text-2" = "var(--bs-tertiary-color)",
+      "--vertical-correction" = " "
+    ),
+    ...
   )
+
+  res <- tag_require(res, version = 5, caller = "input_dark_mode_switch()")
+  as_fragment(res)
 }
 
+toggle_dark_mode_switch <- function(id, mode = NULL, session = get_current_session()) {
+  mode <- mode %||% "toggle"
+  mode <- rlang::arg_match(mode, c("light", "dark", "toggle"))
+
+  if (!rlang::is_string(id)) {
+    abort("`id` must be a single string containing the `id` of a switch input.")
+  }
+
+  session$sendInputMessage(id, list(method = "toggle", value = mode))
+}
+
+
 input_checkbox <- function(id, label, class = "bslib-input-checkbox", value = FALSE, width = NULL, inline = FALSE) {
   div(
     class = "form-group shiny-input-container",