root
/
geekdoc-python-zh
mirror of https://github.com/OpenDocCN/geekdoc-python-zh
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
geekdoc-python-zh/docs/askpython/streamlit-theming.md

7.0 KiB
Raw Permalink Blame History

Streamlit 中的主题化–定制 Streamlit 应用外观的两种方法

原文：https://www.askpython.com/python-modules/streamlit-theming

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

Streamlit 提供亮暗两种模式。Streamlit 首先检查用户在其操作系统和浏览器中设置的亮或暗模式的偏好。如果是，则使用该首选项。否则，默认情况下将应用灯光主题。

亦读:细流简介

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

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

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

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

Theme Step 1

Theme Step 1

Theme Step 2

Theme Step 2

你会看到下面的屏幕。

Theme Step 3

Theme Step 3

现在，在主题部分，点击下拉菜单。正如我们在上面的图片中看到的，默认的主题是用户在他们的系统设置中设置的。这是这种情况下的黑暗主题。

Theme Step 4

Theme Step 4

有三个选项:Use system setting(默认)、Light、Dark。或者，如果我们想制作自己的主题，我们可以使用'编辑活动主题按钮。点击它将引导我们到下面的屏幕。

Theme Step 5

Theme Step 5

在这里，我们有所有的选项来改变文本的不同颜色和字体。一旦你自己创建了一个主题，它将被保存为主题选择器中的一个'自定义主题'，并且将被默认应用。

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

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

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")
)

输出:

Theme Demo App

Theme Demo App

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

注意:所有颜色选项支持 HEX、RGB、HSL 格式，以及网络浏览器支持的 颜色名称，如**【绿色】**【蓝色】。在下面的例子中，我们将使用浏览器支持的颜色名称。

原色–更改细流应用程序的原色

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

config.toml:

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

输出:

Streamlit PrimaryColor

Streamlit PrimaryColor

在上图中，所有处于焦点的小部件都以绿色作为主色，而不是配置文件中指定的默认红色。

background color–更改细流应用程序的背景颜色

指的是 app 主要内容区域的背景色。

config.toml:

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

输出:

Streamlit BackgroundColor

Streamlit BackgroundColor

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

secondaryBackgroundColor–添加辅助背景色

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

配置文件:

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

输出:

Streamlit SecondaryBackgroundColor

Streamlit SecondaryBackgroundColor

使用secondaryBackgroundColor的小部件，比如侧边栏，在这里变成了蓝色。请注意，主要内容区域的背景颜色没有改变。

text color–设置细流应用程序的文本颜色

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

config.toml:

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

输出:

Streamlit TextColor

Streamlit TextColor

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

字体–更改细流应用的字体

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

配置文件:

【主题】T0【主色调= # ff 4b】 【背景色= # 0e 1117】 【次背景色= # 262730】 【文本颜色= # fafa】 字体=【单幅空间】

输出:

Streamlit Font

Streamlit Font

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

结论

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

参考