# Streamlit Theme
A component that returns the active theme of the Streamlit app.
[](https://st-theme-1.streamlit.app/)
## Installation
``` bash
pip install st-theme
```
## Usage
The function immediately returns the active theme, when it is called. If the
user manually changes the theme, after the web app is already running, it
updates the returned value.
## Parameters
**adjust** : `bool`, `default=True`</br>
If set to ``True``, which is the default, it makes a CSS adjustment and removes
a space that would otherwise be added to the page by calling the ``st_theme``
function.
Streamlit components are meant to render something in the web app, and
Streamlit adds a space for them even when there is nothing to render. Since
``st_theme`` does not render anything, and only communicates with the frontend
to fetch the active theme, it makes a CSS adjustment to remove this space.
In most cases, the CSS adjustment does not interfere with the rest of the web
app, however there could be some situations where this occurs. If this happens,
or it is desired to disable it, pass ``False`` to `adjust` and, when necessary,
make your own CSS adjustment with ``st.html``.
**key** : `str` or `int`, optional</br>
A string or integer to use as a unique key for the component. Multiple
``st_themes`` may not share the same key. Defaults to ``None``.
## Returns
**theme** : `dict of {str : str}` or `None`</br>
A dictionary with the style settings being used by the active theme of the
Streamlit app, or ``None``, if for some reason it could not be fetched.
## Notes
There is a known bug, that depends on the browser, where the theme is not
returned immediately when the function is called. But it is returned normally
when the user changes it.
This can be a problem in determining the initial theme of the web app. Because,
by default, Streamlit uses the user's operating system setting (which might be
unknown) to automatically apply the light or dark mode to the app, when it is
first rendered.
To solve the issue, it is recommended to set a
[default theme configuration](https://docs.streamlit.io/library/advanced-features/theming)
for the app, and use its value in case of ``st_theme`` returning ``None``.
## Examples
A basic example:
``` python
import streamlit as st
from streamlit_theme import st_theme
theme = st_theme()
st.write(theme)
```
[](https://st-theme-1.streamlit.app/)
[**[App]**](https://st-theme-1.streamlit.app/)
[**[Source]**](https://github.com/gabrieltempass/streamlit-theme/blob/main/examples/st_theme_1.py)
An example showing the CSS adjustment made, when set to ``True``:
``` python
import streamlit as st
from streamlit_theme import st_theme
adjust = st.toggle("Make the CSS adjustment")
st.write("Input:")
st.code(
f"""
st.write("Lorem ipsum")
st_theme(adjust={adjust})
st.write("Lorem ipsum")
"""
)
st.write("Output:")
st.write("Lorem ipsum")
st_theme(adjust=adjust)
st.write("Lorem ipsum")
```
[](https://st-theme-2.streamlit.app/)
[**[App]**](https://st-theme-2.streamlit.app/)
[**[Source]**](https://github.com/gabrieltempass/streamlit-theme/blob/main/examples/st_theme_2.py)
## Requirements
To use this Streamlit component in your app, you will need:
* **Python 3.8+**
* **Streamlit 1.20+**
* The CSS adjustment depends on the
[browser compatibility with the :has pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility)
## Development
Ensure you have [Python 3.8+](https://www.python.org/downloads/),
[Node.js](https://nodejs.org) and
[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
installed.
1. Clone this repository:
``` bash
git clone git@github.com:gabrieltempass/streamlit-theme.git
```
2. Go to the `frontend` directory and initialize and run the component template
frontend:
``` bash
cd streamlit-theme/streamlit_theme/frontend
```
``` bash
npm install
npm run dev
```
3. From a separate terminal, go to the repository root directory, create a new
Python virtual environment, activate it and install Streamlit and the template
as an editable package:
``` bash
cd streamlit-theme
```
``` bash
python3 -m venv venv
. venv/bin/activate
pip install streamlit
pip install -e .
```
Still from the same separate terminal, run the example Streamlit app:
``` bash
streamlit run streamlit_theme/example.py
```
If all goes well, you should see something like this:
Modify the frontend code at
`streamlit_theme/frontend/src/StTheme.vue`.
Modify the Python code at `streamlit_theme/__init__.py`.
## References
This Streamlit component was made with the [streamlit-component-vue-vite-template](https://github.com/gabrieltempass/streamlit-component-vue-vite-template), by
[@gabrieltempass](https://github.com/gabrieltempass).
Raw data
{
"_id": null,
"home_page": "https://github.com/gabrieltempass/streamlit-theme",
"name": "st-theme",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": null,
"author": "Gabriel Tem Pass",
"author_email": "redo_hint_0x@icloud.com",
"download_url": "https://files.pythonhosted.org/packages/31/84/3e2fd95f5acaf6c92a51e7f038f1120235c65bb0b8be9bf43aa9fb4267e5/st-theme-1.2.3.tar.gz",
"platform": null,
"description": "# Streamlit Theme\n\nA component that returns the active theme of the Streamlit app.\n\n[](https://st-theme-1.streamlit.app/)\n\n## Installation\n\n``` bash\npip install st-theme\n```\n\n## Usage\n\nThe function immediately returns the active theme, when it is called. If the\nuser manually changes the theme, after the web app is already running, it\nupdates the returned value.\n\n## Parameters\n\n**adjust** : `bool`, `default=True`</br>\nIf set to ``True``, which is the default, it makes a CSS adjustment and removes\na space that would otherwise be added to the page by calling the ``st_theme``\nfunction.\n\nStreamlit components are meant to render something in the web app, and\nStreamlit adds a space for them even when there is nothing to render. Since\n``st_theme`` does not render anything, and only communicates with the frontend\nto fetch the active theme, it makes a CSS adjustment to remove this space.\n\nIn most cases, the CSS adjustment does not interfere with the rest of the web\napp, however there could be some situations where this occurs. If this happens,\nor it is desired to disable it, pass ``False`` to `adjust` and, when necessary,\nmake your own CSS adjustment with ``st.html``.\n\n**key** : `str` or `int`, optional</br>\nA string or integer to use as a unique key for the component. Multiple\n``st_themes`` may not share the same key. Defaults to ``None``.\n\n## Returns\n\n**theme** : `dict of {str : str}` or `None`</br>\nA dictionary with the style settings being used by the active theme of the\nStreamlit app, or ``None``, if for some reason it could not be fetched.\n\n## Notes\n\nThere is a known bug, that depends on the browser, where the theme is not\nreturned immediately when the function is called. But it is returned normally\nwhen the user changes it.\n\nThis can be a problem in determining the initial theme of the web app. Because,\nby default, Streamlit uses the user's operating system setting (which might be\nunknown) to automatically apply the light or dark mode to the app, when it is\nfirst rendered.\n\nTo solve the issue, it is recommended to set a\n[default theme configuration](https://docs.streamlit.io/library/advanced-features/theming)\nfor the app, and use its value in case of ``st_theme`` returning ``None``.\n\n## Examples\n\nA basic example:\n\n``` python\nimport streamlit as st\nfrom streamlit_theme import st_theme\ntheme = st_theme()\nst.write(theme)\n```\n[](https://st-theme-1.streamlit.app/)\n[**[App]**](https://st-theme-1.streamlit.app/) \n[**[Source]**](https://github.com/gabrieltempass/streamlit-theme/blob/main/examples/st_theme_1.py)\n\nAn example showing the CSS adjustment made, when set to ``True``:\n\n``` python\nimport streamlit as st\nfrom streamlit_theme import st_theme\n\nadjust = st.toggle(\"Make the CSS adjustment\")\n\nst.write(\"Input:\")\nst.code(\n f\"\"\"\n st.write(\"Lorem ipsum\")\n st_theme(adjust={adjust})\n st.write(\"Lorem ipsum\")\n \"\"\"\n)\n\nst.write(\"Output:\")\nst.write(\"Lorem ipsum\")\nst_theme(adjust=adjust)\nst.write(\"Lorem ipsum\")\n```\n[](https://st-theme-2.streamlit.app/)\n[**[App]**](https://st-theme-2.streamlit.app/) \n[**[Source]**](https://github.com/gabrieltempass/streamlit-theme/blob/main/examples/st_theme_2.py)\n\n## Requirements\n\nTo use this Streamlit component in your app, you will need:\n* **Python 3.8+**\n* **Streamlit 1.20+**\n* The CSS adjustment depends on the\n [browser compatibility with the :has pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility)\n\n## Development\n\nEnsure you have [Python 3.8+](https://www.python.org/downloads/),\n[Node.js](https://nodejs.org) and\n[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\ninstalled.\n\n1. Clone this repository:\n``` bash\ngit clone git@github.com:gabrieltempass/streamlit-theme.git\n```\n\n2. Go to the `frontend` directory and initialize and run the component template\nfrontend:\n``` bash\ncd streamlit-theme/streamlit_theme/frontend\n```\n``` bash\nnpm install\nnpm run dev\n```\n\n3. From a separate terminal, go to the repository root directory, create a new\nPython virtual environment, activate it and install Streamlit and the template\nas an editable package:\n``` bash\ncd streamlit-theme\n```\n``` bash\npython3 -m venv venv\n. venv/bin/activate\npip install streamlit\npip install -e .\n```\n\nStill from the same separate terminal, run the example Streamlit app:\n``` bash\nstreamlit run streamlit_theme/example.py\n```\n\nIf all goes well, you should see something like this:\n\n\n\nModify the frontend code at\n`streamlit_theme/frontend/src/StTheme.vue`.\nModify the Python code at `streamlit_theme/__init__.py`.\n\n## References\n\nThis Streamlit component was made with the [streamlit-component-vue-vite-template](https://github.com/gabrieltempass/streamlit-component-vue-vite-template), by\n[@gabrieltempass](https://github.com/gabrieltempass).\n\n\n",
"bugtrack_url": null,
"license": "MIT License",
"summary": "A component that returns the active theme of the Streamlit app.",
"version": "1.2.3",
"project_urls": {
"Bug Tracker": "https://github.com/gabrieltempass/streamlit-theme/issues",
"Community": "https://discuss.streamlit.io/t/new-component-st-theme-it-returns-the-active-theme-of-the-streamlit-app/64424",
"Documentation": "https://github.com/gabrieltempass/streamlit-theme",
"Homepage": "https://github.com/gabrieltempass/streamlit-theme",
"Release notes": "https://github.com/gabrieltempass/streamlit-theme/releases",
"Source Code": "https://github.com/gabrieltempass/streamlit-theme"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "3009cd7134f1ed5074a7d456640e7ba9a8c8e68a831837b4e7bfd9f29e5700a4",
"md5": "4f3b9ca7316a82865a832010c9d4fd6d",
"sha256": "0a54d9817dd5f8a6d7b0d071b25ae72eacf536c63a5fb97374923938021b1389"
},
"downloads": -1,
"filename": "st_theme-1.2.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "4f3b9ca7316a82865a832010c9d4fd6d",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 75205,
"upload_time": "2024-05-03T19:25:47",
"upload_time_iso_8601": "2024-05-03T19:25:47.858093Z",
"url": "https://files.pythonhosted.org/packages/30/09/cd7134f1ed5074a7d456640e7ba9a8c8e68a831837b4e7bfd9f29e5700a4/st_theme-1.2.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "31843e2fd95f5acaf6c92a51e7f038f1120235c65bb0b8be9bf43aa9fb4267e5",
"md5": "236be0695ba4ea89e0f7ffd85083c32a",
"sha256": "ca97aece1a48ded6e83fd742c27cb0851e1bce2100ab4b6c37c7b6e003b65b42"
},
"downloads": -1,
"filename": "st-theme-1.2.3.tar.gz",
"has_sig": false,
"md5_digest": "236be0695ba4ea89e0f7ffd85083c32a",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 73873,
"upload_time": "2024-05-03T19:25:50",
"upload_time_iso_8601": "2024-05-03T19:25:50.657379Z",
"url": "https://files.pythonhosted.org/packages/31/84/3e2fd95f5acaf6c92a51e7f038f1120235c65bb0b8be9bf43aa9fb4267e5/st-theme-1.2.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-05-03 19:25:50",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "gabrieltempass",
"github_project": "streamlit-theme",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [],
"lcname": "st-theme"
}
JSON
