From 00d956ef3ba89e0e4cfd0f3670009b62534e55fd Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@posit.co>
Date: Tue, 19 Mar 2024 18:12:23 -0400
Subject: [PATCH] fix(input_dark_mode): Allow users to customize `style`
 attribute (#1207)

---
 CHANGELOG.md                         |  2 ++
 shiny/ui/_input_dark_mode.py         | 18 ++++++++++--------
 tests/pytest/test_input_dark_mode.py | 18 ++++++++++++++++++
 3 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 tests/pytest/test_input_dark_mode.py

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff5efe395..f99233a26 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * On Windows, Shiny Express app files are now read in as UTF-8. (#1203)
 
+* `input_dark_mode()` now accepts a `style` argument that can be used to customize the appearance and position of the dark mode toggle switch. (#1207)
+
 * Calling `ui.update_selectize()` with `choices` and `selected` now clears the current selection before updating the choices and selected value. (#1221)
 
 * Fixed an issue that could happen with a `ui.card()` or `ui.value_box()` that is rendered dynamically via `@render.ui` when an updated card replaces a card that the user has expanded into full screen mode. Now the full screen state is reset for the new card or value box. If you want to update a card without potentially exiting the full-screen mode, update specific parts of the card using `ui.output_ui()` or `ui.output_text()`. (#1221)
diff --git a/shiny/ui/_input_dark_mode.py b/shiny/ui/_input_dark_mode.py
index 2439000d7..1d4f68bc6 100644
--- a/shiny/ui/_input_dark_mode.py
+++ b/shiny/ui/_input_dark_mode.py
@@ -55,17 +55,19 @@ def input_dark_mode(
 
     return web_component(
         "bslib-input-dark-mode",
+        {
+            "style": css(
+                **{
+                    "--text-1": "var(--bs-emphasis-color)",
+                    "--text-2": "var(--bs-tertiary-color)",
+                    # TODO: Fix the vertical correction to work better with Bootstrap
+                    "--vertical-correction": " ",
+                },
+            )
+        },
         id=id,
         attribute="data-bs-theme",
         mode=mode,
-        style=css(
-            **{
-                "--text-1": "var(--bs-emphasis-color)",
-                "--text-2": "var(--bs-tertiary-color)",
-                # TODO: Fix the vertical correction to work better with Bootstrap
-                "--vertical-correction": " ",
-            }
-        ),
         **kwargs,
     )
 
diff --git a/tests/pytest/test_input_dark_mode.py b/tests/pytest/test_input_dark_mode.py
new file mode 100644
index 000000000..1b287249a
--- /dev/null
+++ b/tests/pytest/test_input_dark_mode.py
@@ -0,0 +1,18 @@
+from htmltools import css
+
+from shiny.ui import input_dark_mode
+
+
+def test_input_dark_mode_style():
+    base = input_dark_mode()
+    base_style = base.attrs["style"]
+    assert isinstance(base_style, str)
+
+    dark_mode = input_dark_mode(style="color: red;")
+    assert dark_mode.attrs["style"] == base_style + " color: red;"
+
+    css_position = css(position="absolute", top="1em", left="1em")
+    assert isinstance(css_position, str)
+
+    dark_mode = input_dark_mode(style=css_position)
+    assert dark_mode.attrs["style"] == base_style + " " + css_position