Streamlit 中的主题 – 自定义 Streamlit 应用程序外观和感觉的 2 种方法

作者

在上一篇文章中，我们学习了如何安装 Streamlit、创建“Hello World”应用程序以及一些文本元素和小部件。接下来，在本文中，我们将了解 Streamlit 中的主题。 

Streamlit 提供浅色和深色模式。Streamlit 首先检查用户在操作系统和浏览器中设置的浅色或深色模式偏好。如果是这样，则使用该偏好。否则，默认应用浅色主题。

另请阅读：Streamlit 简介

如何更改 Streamlit 应用程序的主题？

现在让我们看看可用于更改 Streamlit 默认主题的不同方法。

更改 Streamlit 应用程序主题的方法 1 [GUI 方法]

我们可以从设置中更改主题。
单击应用程序中的“≣”符号，然后单击“设置”选项。步骤如下图所示。

主题步骤1
主题步骤 2

您现在将看到以下屏幕。

主题步骤 3

现在，在“主题”部分中，单击下拉菜单。正如我们在上图中看到的，默认主题是用户在系统设置中设置的主题。在本例中它是黑暗主题。

主题步骤 4

共有三个选项：（Use system setting这是默认选项）Light和Dark。或者，如果我们想制作自己的主题，我们可以使用“编辑活动主题”按钮。单击它将引导我们进入以下屏幕。

主题步骤 5

在这里，我们拥有更改不同颜色以及文本字体系列的所有选项。一旦您自己创建了主题，它将在主题选择器中保存为“自定义主题”，并默认应用。

更改Streamlit应用程序主题的方法2 [代码方法]

我们还可以在使用命令启动应用程序时通过命令行设置主题streamlit run。[theme]此外，我们可以在文件的部分中定义主题.streamlit/config.toml。可以在以下位置找到： 

C:\Users\userName\.streamlit\config.toml

在 Windows 机器上，并且在

~/.streamlit/config.toml

在 Mac OS/Linux 机器上。

文件内的默认灯光主题如下.streamlit/config.toml所示：

[theme]
primaryColor="#F63366"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#F0F2F6"
textColor="#262730"
font="sans serif"

黑暗主题将是这样的：

[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"

让我们一一探讨所有这些选项。但在此之前，让我们利用之前关于 Streamlit 的入门教程中学到的知识快速开发一个应用程序。

import streamlit as st
 
# button
st.button('Streamlit Button', help="Click here")
 
# check box
st.checkbox('Check Box')
 
# radio button
lang = st.radio(
    "What's your favorite programming language?",
    ('C++', 'Python'))
if lang == 'C++':
    st.write('You selected C++.')
else:
    st.write('You selected Python')
 
# slider
score = st.slider('Please specify your test score', 0, 100, 10)
st.write("My test score is ", score)
 
# Using object notation
add_selectbox = st.sidebar.radio(
    "Please choose an option",
    ("Option 1", "Option 2", "Option 3")
)

输出：

主题演示应用程序

上面是一个简单的 Streamlit 应用程序，由不同的小部件组成，例如复选框、按钮、侧边栏、滑块和单选按钮。我们将使用这个应用程序并在下面的示例中尝试其中的不同主题选项。

注意：所有颜色选项都支持 HEX、RGB 和 HSL 格式以及 Web 浏览器支持的颜色名称，例如“绿色”和“蓝色”。我们将在下面的示例中使用浏览器支持的颜色名称。

PrimaryColor – 更改 Streamlit 应用程序的主颜色

PrimaryColor 是指 Streamlit 应用程序中的强调色。滑块、按钮和复选框（聚焦时）等小部件使用primaryColor。

配置.toml：

[theme]
primaryColor="green"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"

输出：

Streamlit原色

在上图中，所有聚焦的小部件都将绿色作为其主要颜色，而不是配置文件中指定的默认红色。

backgroundColor – 更改 Streamlit 应用程序的背景颜色

它指的是应用程序主要内容区域的背景颜色。

配置.toml：

[theme]
primaryColor="#FF4B4B"
backgroundColor="pink"
secondaryBackgroundColor="#262730"
textColor="#FAFAFA"
font="sans serif"

输出：

Streamlit背景颜色

主要内容区域的背景现在是粉红色的。

secondaryBackgroundColor – 添加辅助背景颜色

当需要第二种背景颜色时使用此选项。Streamlit 中的绘图图表和侧边栏大多使用此选项。

配置.toml：

[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="blue"
textColor="#FAFAFA"
font="sans serif"

输出：

Streamlit 辅助背景颜色

使用 的小部件secondaryBackgroundColor（例如侧边栏）在本例中已变为蓝色。请注意，主要内容区域的背景颜色没有改变。

textColor – 设置 Streamlit 应用程序的文本颜色

它用于更改 Streamlit 应用程序中文本的颜色。

配置.toml：

[theme]
primaryColor="#FF4B4B"
backgroundColor="#0E1117"
secondaryBackgroundColor="#262730"
textColor="red"
font="sans serif"

输出：

Streamlit 文本颜色

这里的文本颜色是配置文件中指定的红色。

字体 – 更改 Streamlit 应用程序的字体

Streamlit 支持三种字体类型，即sans serif、serif和monospace。默认字体是sans serif.
在代码块中，字体类型始终monospace与此处选择的字体类型无关。

配置.toml：

[主题]
primaryColor=”#FF4B4B”
backgroundColor=”#0E1117”
secondaryBackgroundColor=”#262730”
textColor=”#FAFAFA”
font=”monospace”

输出：

流光字体

在这种情况下，字体系列已更改为monospace.

结论

这是 Streamlit 教程系列的第二篇，我们在其中学习了 Streamlit 中的主题。希望您发现它有帮助。也请查看本系列中的其他教程。

参考