Skip to content

Commit 2374b9b

Browse files
vquilonvquilon
committed
CI/CD para el cambiador de tema nativo
1 parent 3494932 commit 2374b9b

File tree

4 files changed

+111
-70
lines changed

4 files changed

+111
-70
lines changed

‎.github/workflows/ci-cd-component-theme-changer.yml

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# This workflow will upload a Python Package using Twine when a release is created
2+
# For more information see: https://help.github.com/en/actions/language-and-framework-guides/using-python-with-github-actions#publishing-to-package-registries
3+
4+
name: Upload streamlit-component-loader Python Package
5+
6+
on:
7+
release:
8+
types: [published]
9+
10+
jobs:
11+
deploy:
12+
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- uses: actions/checkout@v3
17+
- name: Set up Python
18+
uses: actions/setup-python@v5
19+
with:
20+
python-version: '>=3.10'
21+
- name: Install dependencies
22+
run: |
23+
python -m pip install --upgrade pip
24+
pip install setuptools wheel twine
25+
- name: Build and publish
26+
env:
27+
TWINE_USERNAME: ${{ secrets.PYPI_USERNAME }}
28+
TWINE_PASSWORD: ${{ secrets.PYPI_PASSWORD }}
29+
run: |
30+
git fetch --all --tags
31+
python streamlit_plugins/components/theme_changer/packaging/setup.py sdist bdist_wheel
32+
twine upload dist/streamlit-plugins-component-theme-changer/*

‎streamlit_plugins/components/theme_changer/README.md

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,52 @@
1-
# Change Theme (on client Side!)
1+
# Change Theme (on the Client Side!)
2+
3+
## Code example
4+
```python
5+
import streamlit as st
6+
7+
from streamlit_plugins.components.theme_changer import st_theme_changer
8+
9+
st.title("Theme Changer Component")
10+
st.caption("Just push the button to change the theme! On the client side, of course.")
11+
# specify the primary menu definition
12+
st_theme_changer()
13+
14+
st_theme_changer(render_mode="pills")
15+
```
16+
217

318
## Custom Config
419

5-
The name of the theme cannot be "Dark" or "Light", because are reserved for the base themes in streamlit.
20+
The theme name can’t be "Dark" or "Light" since those are reserved for the default Streamlit themes.
21+
22+
## All Theme Configurations (CSS Properties)
623

7-
## All theme configuracions (CSS props)
824
### Theme Configuration Table
925

10-
Below is a description of the theme configuration parameters and their functionality:
26+
Here’s an overview of the theme configuration options and what they do:
1127

12-
| **Key** | **Value** | **Description** |
13-
|-----------------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
14-
| `primaryColor` | `"#1A6CE7"` | `primaryColor` defines the accent color most often used throughout a Streamlit app. A few examples of Streamlit widgets that use `primaryColor` include `st.checkbox`, `st.slider`, and `st.text_input` (when focused). |
15-
| `backgroundColor` | `"#FFFFFF"` | Defines the background color used in the main content area of your app. |
16-
| `secondaryBackgroundColor` | `"#F5F5F5"` | This color is used where a second background color is needed for added contrast. Most notably, it is the sidebar's background color. It is also used as the background color for most interactive widgets. |
17-
| `textColor` | `"#1A1D21"` | This option controls the text color for most of your Streamlit app. |
18-
| `font` | `0` `1` `2` `"sans serif" ` `"serif"` `"monospace"` | Selects the font used in your Streamlit app. Valid values are `"sans serif"`, `"serif"`, and `"monospace"`. This option defaults to `"sans serif"` if unset or invalid. |
19-
| `base` | `light` `dark` `0` `1` | An easy way to define custom themes that make small changes to one of the preset Streamlit themes is to use the base option. |
20-
| *`widgetBackgroundColor` | `"#FFFFFF"` | The background color of widgets (e.g., inputs, sliders). |
21-
| *`widgetBorderColor` | `"#D3DAE8"` | The border color for widgets and interactive elements. |
22-
| *`skeletonBackgroundColor` | `"#CCDDEE"` | The background color used for loading skeletons (placeholders). |
23-
| *`bodyFont` | `"Inter", "Source Sans Pro", sans-serif` | The default font used for body text throughout the application. |
24-
| *`codeFont` | `"Apercu Mono", "Source Code Pro", monospace` | The font used for displaying code elements or monospaced text. |
25-
| *`fontFaces` | Array of font families with URLs and weights | Defines custom fonts, including font-family, URL location, and weight (e.g., Inter, Apercu Mono). |
26-
| *`radii.checkboxRadius` | `3` | The border radius for checkboxes, defining their rounded corners. |
27-
| *`radii.baseWidgetRadius` | `6` | The border radius for widgets like buttons or inputs. |
28-
| *`fontSizes.tinyFontSize` | `10` | The font size for tiny text elements, usually for subtle labels or captions. |
29-
| *`fontSizes.smallFontSize` | `12` | The font size for small text elements, such as secondary descriptions. |
30-
| *`fontSizes.baseFontSize` | `14` | The base font size used for standard text. |
31-
| *`fontFaces` | [Default Props](#font-faces-details-fontfaces-) | The base font families used for dark and light base theme |
28+
| **Key** | **Value** | **Description** |
29+
|-----------------------------|--------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
30+
| `primaryColor` | `"#1A6CE7"` | The main accent color used throughout your app. For example, widgets like `st.checkbox`, `st.slider`, and `st.text_input` (when focused) use this color. |
31+
| `backgroundColor` | `"#FFFFFF"` | The main background color of your app. |
32+
| `secondaryBackgroundColor` | `"#F5F5F5"` | Used as a secondary background color, like for the sidebar or interactive widgets. |
33+
| `textColor` | `"#1A1D21"` | Controls the text color for most elements in your app. |
34+
| `font` | `0` `1` `2` [`"sans serif" ` `"serif"` `"monospace"`] | Sets the font used in your app. Options are `"sans serif"`, `"serif"`, or `"monospace"`. Defaults to `"sans serif"` if unset. |
35+
| `base` | `0` `1` [`light` `dark`] | Lets you create custom themes by slightly modifying one of the preset Streamlit themes. |
36+
| *`widgetBackgroundColor` | `"#FFFFFF"` | Background color for widgets like inputs or sliders. |
37+
| *`widgetBorderColor` | `"#D3DAE8"` | Border color for widgets and interactive elements. |
38+
| *`skeletonBackgroundColor` | `"#CCDDEE"` | Background color for loading placeholders (skeletons). |
39+
| *`bodyFont` | `"Inter", "Source Sans Pro", sans-serif` | Default font for body text. |
40+
| *`codeFont` | `"Apercu Mono", "Source Code Pro", monospace` | Font used for code or monospaced text. |
41+
| *`fontFaces` | [Array of font families with URLs and weights](#font-faces-details-fontfaces-) | Custom fonts, including font-family, URL, and weight (e.g., Inter, Apercu Mono). |
42+
| *`radii.checkboxRadius` | `3` | Border radius for checkboxes. |
43+
| *`radii.baseWidgetRadius` | `6` | Border radius for widgets like buttons or inputs. |
44+
| *`fontSizes.tinyFontSize` | `10` | Font size for tiny text (e.g., labels). |
45+
| *`fontSizes.smallFontSize` | `12` | Font size for small text, like secondary descriptions. |
46+
| *`fontSizes.baseFontSize` | `14` | Base font size for regular text. |
3247

48+
> The parameters marked with a * are new in Streamlit’s configuration. You can tweak them to adjust fonts and font sizes.
49+
> Properties with a `.` in their names are part of nested objects. Details about these nested objects are provided below.
3350
3451
### Font Faces Details `"fontFaces": [...]`
3552

@@ -42,67 +59,48 @@ Below is a description of the theme configuration parameters and their functiona
4259
| `Apercu Mono` | `https://app.snowflake.com/static/e903ae189d31a97e231e.woff2` | 500 | Medium weight of the Apercu Mono font. |
4360
| `Apercu Mono` | `https://app.snowflake.com/static/32447307374154c88bc0.woff2` | 700 | Bold weight of the Apercu Mono font. |
4461

45-
4662
### Theme Configuration: Properties and Data Types
4763

48-
The following table outlines the configuration properties, their expected types, and descriptions based on the provided validation logic:
49-
50-
| **Property** | **Type** | **Description** |
51-
|-----------------------------|----------------------|---------------------------------------------------------------------------------------------------|
52-
| `primaryColor` | `string` | The primary color for accent elements (e.g., buttons, active components). |
53-
| `secondaryBackgroundColor` | `string` | The background color for secondary containers or sidebars. |
54-
| `backgroundColor` | `string` | The main background color for the application. |
55-
| `textColor` | `string` | The color for primary text elements across the application. |
56-
| `font` | `enum` (0, 1, 2) | The font family to use: `0` (SANS_SERIF), `1` (SERIF), `2` (MONOSPACE). |
57-
| `base` | `enum` (0, 1) | The base theme to use: `0` (LIGHT), `1` (DARK). |
58-
| `widgetBackgroundColor` | `string` | The background color for widgets like inputs or sliders. |
59-
| `widgetBorderColor` | `string` | The border color for widgets and interactive elements. |
60-
| `radii` | `object` | An object defining radii for elements such as checkboxes and widgets. |
61-
| `bodyFont` | `string` | The font used for body text in the application. |
62-
| `codeFont` | `string` | The font used for displaying code or monospaced text. |
63-
| `fontFaces` | `array of objects` | An array of font-face definitions, including family, URL, and weight. |
64-
| `fontSizes` | `object` | An object defining font sizes for various text elements (e.g., tiny, small, base). |
65-
| `skeletonBackgroundColor` | `string` | The background color for loading skeletons (placeholders). |
66-
6764
### Enum Descriptions
6865

6966
#### Font Family (`font`)
70-
- `0` (SANS_SERIF): Standard sans-serif font family.
71-
- `1` (SERIF): Standard serif font family.
72-
- `2` (MONOSPACE): Monospaced font family, typically used for code.
67+
- `0` (SANS_SERIF): Standard sans-serif font family.
68+
- `1` (SERIF): Standard serif font family.
69+
- `2` (MONOSPACE): Monospaced font family, often for code.
7370

7471
#### Base Theme (`base`)
75-
- `0` (LIGHT): Light-themed base configuration.
76-
- `1` (DARK): Dark-themed base configuration.
72+
- `0` (LIGHT): Light base theme.
73+
- `1` (DARK): Dark base theme.
7774

7875
### Nested Object Details
7976

8077
#### `radii`
8178
| **Sub-Property** | **Type** | **Description** |
8279
|-----------------------|----------|------------------------------------------------------|
83-
| `checkboxRadius` | `number` | Radius for checkboxes, defining rounded corners. |
84-
| `baseWidgetRadius` | `number` | Radius for widgets such as buttons or input fields. |
80+
| `checkboxRadius` | `number` | Radius for checkboxes. |
81+
| `baseWidgetRadius` | `number` | Radius for widgets like buttons or inputs. |
8582

8683
#### `fontSizes`
8784
| **Sub-Property** | **Type** | **Description** |
8885
|-----------------------|----------|------------------------------------------------------|
89-
| `tinyFontSize` | `number` | Font size for tiny text elements. |
90-
| `smallFontSize` | `number` | Font size for small text elements. |
91-
| `baseFontSize` | `number` | Default font size for standard text. |
86+
| `tinyFontSize` | `number` | Font size for tiny text. |
87+
| `smallFontSize` | `number` | Font size for small text. |
88+
| `baseFontSize` | `number` | Default font size for regular text. |
89+
90+
---
91+
92+
### Workaround for Switching Themes Without Custom Components
9293

93-
This table ensures clarity in understanding and validating the properties for `CustomThemeConfig`.
94+
You can use query parameters in the URL to switch between light and dark themes. However, this requires a page reload and won’t allow custom themes. Examples:
9495

95-
# Using query paths url options to change the theme between light and dark
96-
- `?embed_options=light_theme`
97-
- `?embed_options=dark_theme`
96+
- `?embed_options=light_theme`
97+
- `?embed_options=dark_theme`
9898

99-
# Using local Storage persistance
100-
- `stActiveTheme-/-v1`
99+
---
101100

102-
Automatically saves the current theme change it
101+
### Override Base "Dark" or "Light" Themes
103102

104-
# Override base "Dark" or "Light" theme
105-
### JSON Base Configuration for Streamlit Dark Theme
103+
Currently, you can’t override the default "Dark" or "Light" themes directly in Streamlit. Until the Streamlit team releases support for the `SET_CUSTOM_THEME_CONFIG` event, you’re limited to modifying the available properties listed above.
106104

107105
```json
108106
{

‎streamlit_plugins/components/theme_changer/__init__.py

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,10 @@
121121

122122

123123
def st_theme_changer(
124-
themes_data: dict[str, ThemeInput] = None,
125-
render_mode: Literal["button", "pills"] = "button",
124+
themes_data: dict[str, ThemeInput] = None,
125+
render_mode: Literal["button", "pills"] = "button",
126+
rerun_whole_st: bool = False,
127+
timeout_rendering_theme_change: float = 0.2
126128
):
127129
"""
128130
A Streamlit component to change the theme of the app.
@@ -178,9 +180,12 @@ def button_mode():
178180
st.session_state[f"{KEY}_theme_index"] = theme_index
179181

180182
change_theme_coi(KEY, themes_data[theme_index])
181-
time.sleep(0.2)
183+
time.sleep(timeout_rendering_theme_change)
182184
# TODO: How to prevent to make a rerun and change button icon without rerun?
183-
st.rerun(scope="fragment")
185+
if rerun_whole_st:
186+
st.rerun()
187+
else:
188+
st.rerun(scope="fragment")
184189

185190
@st.fragment
186191
def pills_mode():
@@ -206,8 +211,11 @@ def pills_mode():
206211
if theme_index != new_theme_index:
207212
st.session_state[f"{KEY}_theme_index"] = new_theme_index
208213
change_theme_coi(KEY, themes_data[new_theme_index])
209-
time.sleep(0.2)
210-
st.rerun(scope="fragment")
214+
time.sleep(timeout_rendering_theme_change)
215+
if rerun_whole_st:
216+
st.rerun()
217+
else:
218+
st.rerun(scope="fragment")
211219

212220
if render_mode == "button":
213221
button_mode()

‎streamlit_plugins/components/theme_changer/packaging/setup.py

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@
2828
long_description_content_type="text/markdown",
2929
author_email='v.quilonr@gmail.com',
3030
author='Victor Quilon Ranera',
31-
packages=find_packages(include=["streamlit_plugins.extension", "streamlit_plugins.extension.*", "streamlit_plugins.components.theme_changer", "streamlit_plugins.components.theme_changer.*"]),
31+
packages=find_packages(include=[
32+
"streamlit_plugins.extension", "streamlit_plugins.extension.*",
33+
"streamlit_plugins.components.theme_changer", "streamlit_plugins.components.theme_changer.*"
34+
]),
3235
python_requires='>=3.10',
3336
install_requires=requirements,
3437
include_package_data=True,

0 commit comments

Comments
 (0)