feat: create a new button to switch theme

Author: ArthurData

NAMESPACE

@@ -76,6 +76,7 @@ export(set_golem_name)
 export(set_golem_options)
 export(set_golem_version)
 export(set_golem_wd)
+export(switch_theme_button)
 export(use_external_css_file)
 export(use_external_file)
 export(use_external_html_template)

R/switch_theme_button.R

@@ -0,0 +1,32 @@
+#' @export
+switch_theme_button <- function(inputId, label = NULL) {
+  if (!rlang::is_installed("bslib")) {
+    stop("You need to install bslib to use this function")
+  }
+
+  button <- bslib::input_switch(
+    id = inputId,
+    label = label,
+    width = "fit-content"
+  ) |>
+    shiny::tagAppendAttributes(
+      class = "golem-switch-themer"
+    )
+
+  css_file_path <- system.file(
+    "utils",
+    "golem_button_theme.css",
+    package = "golem"
+  )
+
+  css_dependency <- htmltools::htmlDependency(
+    name = "golem-switch-themer-css",
+    version = "1.0.0",
+    src = dirname(css_file_path),
+    stylesheet = basename(css_file_path)
+  )
+
+  button_with_dependency <- htmltools::attachDependencies(button, css_dependency)
+
+  button_with_dependency
+}

inst/utils/golem_button_theme.css

@@ -0,0 +1,20 @@
+
+.golem-switch-themer .form-switch .form-check-input:checked {
+    background-position: right center;
+    --bs-form-switch-bg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tb29uIj48cGF0aCBkPSJNMTIgM2E2IDYgMCAwIDAgOSA5IDkgOSAwIDEgMS05LTlaIi8+PC9zdmc+) !important;
+    background-color: var(--golem-switcher);
+}
+
+.golem-switch-themer .form-switch .form-check-input {
+    --bs-form-switch-bg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zdW4tbWVkaXVtIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTEyIDN2MSIvPjxwYXRoIGQ9Ik0xMiAyMHYxIi8+PHBhdGggZD0iTTMgMTJoMSIvPjxwYXRoIGQ9Ik0yMCAxMmgxIi8+PHBhdGggZD0ibTE4LjM2NCA1LjYzNi0uNzA3LjcwNyIvPjxwYXRoIGQ9Im02LjM0MyAxNy42NTctLjcwNy43MDciLz48cGF0aCBkPSJtNS42MzYgNS42MzYuNzA3LjcwNyIvPjxwYXRoIGQ9Im0xNy42NTcgMTcuNjU3LjcwNy43MDciLz48L3N2Zz4=) !important;
+    width: 2.6em !important;
+    height: 1.6em;
+    background-image: var(--bs-form-switch-bg);
+    border-radius: 2em;
+    transition: background-position 0.15s ease-in-out;
+    background-repeat: no-repeat;
+    background-size: 18px;
+    --golem-switcher: var(--bs-primary);
+    background-color: var(--golem-switcher);
+    cursor: pointer;
+}