feat!: Use shiny.ui.Theme

examples/basic-darkly/app.py

@@ -4,11 +4,9 @@
 import shinyswatch
 
 app_ui = ui.page_fluid(
-    # Theme code - start
-    shinyswatch.theme.darkly,
-    # Theme code - end
     ui.input_slider("num", "Number:", min=10, max=100, value=30),
     ui.output_text_verbatim("slider_val"),
+    theme=shinyswatch.theme.darkly,
 )
 
 

examples/big-sketchy/app.py

@@ -6,12 +6,6 @@
 import shinyswatch
 
 app_ui = ui.page_fluid(
-    # Theme code - start
-    # Add the Theme's HTML Dependency object in the UI code
-    shinyswatch.get_theme("sketchy"),
-    # # Equivalent to:
-    # shinyswatch.theme.sketchy,
-    # Theme code - end
     ui.panel_title("Changing the values of inputs from the server"),
     ui.row(
         ui.column(
@@ -93,6 +87,7 @@
             ),
         ),
     ),
+    theme=shinyswatch.get_theme("sketchy"),
 )
 
 

examples/components/app.py

@@ -6,7 +6,6 @@
 app_ui = ui.page_navbar(
     ui.nav_panel(
         "Navbar 1",
-        shinyswatch.theme.superhero,
         ui.layout_sidebar(
             ui.panel_sidebar(
                 ui.input_file("file", "File input:"),
@@ -42,6 +41,7 @@
     ui.nav_panel("Plot", "Plot content"),
     ui.nav_panel("Table", "Table content"),
     title="shinyswatch",
+    theme=shinyswatch.theme.superhero,
 )
 
 

examples/page-sidebar/app.py

@@ -8,7 +8,7 @@
 app_ui = ui.page_sidebar(
     ui.sidebar(
         ui.input_slider("n", "N", min=0, max=100, value=20),
-        shinyswatch.theme_picker_ui("zephyr"),
+        shinyswatch.theme_picker_ui(),
     ),
     ui.card(ui.output_plot("plot")),
     title="Shiny Sidebar Page",
@@ -21,19 +21,24 @@ def server(input):
     @render.plot(alt="A histogram")
     def plot():
         req(input.shinyswatch_theme_picker())
-        theme = getattr(shinyswatch.theme, input.shinyswatch_theme_picker())
+        if input.shinyswatch_theme_picker() != "default":
+            theme = getattr(shinyswatch.theme, input.shinyswatch_theme_picker())
+            color_accent = theme.colors.primary
+            color_fg = theme.colors.body_color
+        else:
+            color_accent = "#007BC2"
+            color_fg = "#1D1F21"
 
         np.random.seed(19680801)
         x = 100 + 15 * np.random.randn(437)
 
         fig, ax = plt.subplots()
-        ax.hist(x, input.n(), density=True, color=theme.colors.primary)
+        ax.hist(x, input.n(), density=True, color=color_accent)
 
         # Theme the plot to match light/dark mode
         fig.patch.set_facecolor("none")
         ax.set_facecolor("none")
 
-        color_fg = theme.colors.body_color
         ax.tick_params(axis="both", colors=color_fg)
         ax.spines["bottom"].set_color(color_fg)
         ax.spines["top"].set_color(color_fg)

examples/theme-picker/app.py

@@ -4,13 +4,8 @@
 import shinyswatch
 
 app_ui = ui.page_navbar(
-    ui.nav(
+    ui.nav_panel(
         "Navbar 1",
-        # !! DO NOT INCLUDE THEME in `app_ui` !!
-        # shinyswatch.theme.superhero(),
-        # !! !!
-        # Include theme_picker_ui UI module somewhere in your UI
-        shinyswatch.theme_picker_ui(),
         ui.layout_sidebar(
             ui.panel_sidebar(
                 ui.input_file("file", "File input:"),
@@ -25,7 +20,7 @@
             ),
             ui.panel_main(
                 ui.navset_tab(
-                    ui.nav(
+                    ui.nav_panel(
                         "Tab 1",
                         ui.output_table("table"),
                         ui.tags.h4("Verbatim text output"),
@@ -36,17 +31,21 @@
                         ui.tags.h4("Header 4"),
                         ui.tags.h5("Header 5"),
                     ),
-                    ui.nav("Tab 2", "Tab 2 content"),
-                    ui.nav("Tab 3", "Tab 3 content"),
+                    ui.nav_panel("Tab 2", "Tab 2 content"),
+                    ui.nav_panel("Tab 3", "Tab 3 content"),
                 )
             ),
         ),
     ),
-    ui.nav("Plot", "Plot content"),
-    ui.nav("Table", "Table content"),
-    sidebar=ui.sidebar("Sidebar content"),
+    ui.nav_panel("Plot", "Plot content"),
+    ui.nav_panel("Table", "Table content"),
+    sidebar=ui.sidebar(
+        "Sidebar content",
+        shinyswatch.theme_picker_ui(),
+    ),
     title="shinyswatch",
     inverse=True,
+    theme=shinyswatch.theme.superhero,
 )
 
 

pyrightconfig.json

@@ -1,9 +1,6 @@
 {
-    "ignore": ["build", "docs"],
+    "ignore": ["build", "docs", "scripts"],
     "typeCheckingMode": "basic",
-    "strict": [
-        "shinyswatch/",
-        "scripts/",
-    ],
+    "strict": ["shinyswatch/"],
     "reportImportCycles": false
 }

scripts/get_theme_values.py

@@ -0,0 +1,45 @@
+import json
+
+import tinycss2
+from shiny.ui import Theme
+
+
+def get_theme_color_values(theme: Theme):
+    # If it matters, should copy the theme to avoid modifying the original
+    theme.add_rules(
+        """
+        #values {
+            --value: {
+            "body_color": "#{$body-color}",
+            "body_bg": "#{$body-bg}",
+            "light": "#{$light}",
+            "dark": "#{$dark}",
+            "primary": "#{$primary}",
+            "secondary": "#{$secondary}",
+            "info": "#{$info}",
+            "success": "#{$success}",
+            "warning": "#{$warning}",
+            "danger": "#{$danger}"
+            }
+        }
+        """
+    )
+
+    theme_css = theme.to_css()
+
+    rules = tinycss2.parse_stylesheet(theme_css)
+    value_rule = [rule for rule in rules if is_value_rule(rule)][0]
+    value = [
+        value
+        for value in value_rule.content
+        if isinstance(value, tinycss2.ast.CurlyBracketsBlock)
+    ]
+    return json.loads(value[0].serialize())
+
+
+def is_value_rule(rule):
+    return (
+        isinstance(rule, tinycss2.ast.QualifiedRule)
+        and isinstance(rule.prelude[0], tinycss2.ast.HashToken)
+        and rule.prelude[0].value == "values"
+    )