当前位置：首页 > news >正文

Nanbeige 4.1-3B Streamlit UI实操手册：自定义背景色与气泡样式的修改方法

news 2026/4/18 4:01:04

Nanbeige 4.1-3B Streamlit UI实操手册：自定义背景色与气泡样式的修改方法

1. 引言：从“能用”到“好看”的界面定制

如果你已经体验过Nanbeige 4.1-3B Streamlit WebUI，第一印象可能是“清爽”、“现代”。它确实打破了Streamlit原生界面的那种“开发工具感”，把对话界面做得像手机聊天软件一样舒服。

但你可能会有这样的想法：

“这个浅灰蓝背景挺好看，但我想换成我喜欢的深色模式”
“气泡样式不错，但我想调整圆角大小，或者换个颜色”
“整体风格很二次元，但我想适配我们公司的品牌色”

这些想法都很正常。毕竟，一个真正好用的工具，不仅要功能强大，还要能“长得像自己人”。今天这篇文章，就是为你准备的界面定制指南。我会手把手带你了解这个WebUI的样式系统，教你如何轻松修改背景色、气泡样式，甚至打造完全属于你自己的对话界面。

你将学到什么：

理解这个WebUI的CSS样式架构
找到并修改背景颜色的方法
自定义聊天气泡的样式（颜色、圆角、阴影等）
一些实用的样式调整技巧

前置知识：只需要基础的Python知识，完全不需要前端开发经验。我会用最直白的方式解释一切。

2. 理解WebUI的样式架构

在开始修改之前，我们先花几分钟了解一下这个项目的样式是怎么工作的。理解了架构，修改起来就会得心应手。

2.1 核心原理：CSS注入

这个WebUI最巧妙的地方在于，它没有使用复杂的前端框架（比如React、Vue），而是用纯Python的Streamlit，通过“CSS注入”的方式实现了华丽的界面效果。

什么是CSS注入？简单说，就是在Python代码里写CSS样式，然后让Streamlit在页面加载时把这些样式应用到页面上。这样做的好处是：

不需要单独的前端项目
修改样式后立即生效（刷新页面即可）
所有代码都在一个app.py文件里，管理方便

2.2 样式代码在哪里？

打开你的app.py文件，往下翻，你会看到一大段以st.markdown()开头的代码，里面包含了很多CSS样式。这段代码通常长这样：

# 注入自定义CSS样式 st.markdown(""" <style> /* 这里就是所有的CSS样式代码 */ :root { --primary-color: #4A90E2; --user-bubble-bg: #E3F2FD; --ai-bubble-bg: #FFFFFF; /* ... 更多颜色变量 ... */ } body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); background-size: 40px 40px; /* ... 更多样式 ... */ } /* 用户气泡样式 */ .stChatMessage:has(.user-mark) { flex-direction: row-reverse; } .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); border-radius: 18px 18px 4px 18px; } /* AI气泡样式 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); border-radius: 18px 18px 18px 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } </style> """, unsafe_allow_html=True)

关键点：

:root部分：这里定义了一些“颜色变量”，比如--primary-color、--user-bubble-bg等。修改这些变量，就能一次性改变所有用到这个颜色的地方。
body部分：这里定义了整个页面的背景样式，包括背景颜色和那个很有特色的圆点网格。
气泡样式部分：这里定义了用户气泡和AI气泡的不同样式。

2.3 气泡对齐的魔法：`:has()`选择器

你可能注意到代码里有这样的写法：.stChatMessage:has(.user-mark)。这是CSS的一个高级功能，意思是“选择那些包含了.user-mark元素的.stChatMessage元素”。

在这个WebUI里：

用户消息会被标记一个隐藏的<span class='user-mark'></span>
CSS检测到这个标记，就把气泡布局方向反过来（flex-direction: row-reverse）
这样用户气泡就显示在右侧，AI气泡显示在左侧

这个技巧很巧妙，但对我们修改样式来说，只需要知道：用户气泡和AI气泡是通过不同的CSS选择器来区分的。

3. 修改背景颜色和图案

现在我们来实际操作。背景修改是最简单也最有效果的定制方式。

3.1 找到背景样式代码

在app.py的CSS部分，找到body相关的样式。它通常长这样：

body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); background-size: 40px 40px; margin: 0; padding: 20px; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

3.2 修改纯色背景

如果你想要一个纯色背景（没有圆点网格），最简单的方法是：

修改颜色变量：在:root部分找到--background-color变量
改成你想要的颜色：比如深色模式可以用#1a1a1a

:root { /* 原来的浅色背景 */ /* --background-color: #f8fafc; */ /* 改为深色背景 */ --background-color: #1a1a1a; /* 同时可能需要调整文字颜色，让文字在深色背景上可见 */ --text-color: #ffffff; }

应用到body：确保body的background-color使用的是这个变量

body { background-color: var(--background-color); /* 如果想要纯色背景，可以注释掉background-image这行 */ /* background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); */ /* background-size: 40px 40px; */ /* ... 其他样式 ... */ }

颜色值参考：

深灰：#1a1a1a或#2d2d2d
深蓝：#0f172a或#1e293b
黑色：#000000
浅色系：#f8fafc（原版）、#f1f5f9、#ffffff

3.3 修改圆点网格背景

如果你喜欢圆点网格效果，但想调整它的样式：

调整圆点颜色：修改background-image中的rgba值
- 最后一个参数是透明度：0.05是很淡的点，0.1会明显一些
- 颜色可以调整：rgba(255, 255, 255, 0.1)是白色圆点（适合深色背景）

/* 深色背景上的白色圆点 */ body { background-color: #1a1a1a; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0); background-size: 40px 40px; }

调整圆点间距：修改background-size的值
- 40px 40px：圆点间距40像素
- 30px 30px：间距更小，圆点更密集
- 50px 50px：间距更大，圆点更稀疏
调整圆点大小：修改radial-gradient中的圆点半径
- 1px：圆点半径为1像素
- 2px：圆点更大
- 修改后可能需要同时调整background-size

3.4 使用渐变背景或图片背景

如果你想要更复杂的背景：

/* 线性渐变背景 */ body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 或者使用图片背景 */ body { background-image: url('https://example.com/your-background.jpg'); background-size: cover; background-attachment: fixed; }

注意：使用图片背景时，要确保文字可读性。可以在背景上加一个半透明遮罩：

body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩 */ z-index: -1; }

4. 自定义聊天气泡样式

聊天气泡是对话界面的核心，修改气泡样式能让界面风格大变样。

4.1 理解气泡的CSS结构

在CSS代码中，气泡样式主要分为两部分：

/* 用户气泡（右侧） */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); /* 背景色 */ color: var(--user-text-color); /* 文字颜色 */ border-radius: 18px 18px 4px 18px; /* 圆角：左上 右上 右下 左下 */ /* ... 其他样式 ... */ } /* AI气泡（左侧） */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); /* 背景色 */ color: var(--ai-text-color); /* 文字颜色 */ border-radius: 18px 18px 18px 4px; /* 圆角：左上 右上 右下 左下 */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 阴影 */ /* ... 其他样式 ... */ }

4.2 修改气泡颜色

最直接的修改就是换颜色：

修改颜色变量（推荐）：在:root部分修改变量，这样所有相关颜色会一起改变

:root { /* 用户气泡颜色 */ --user-bubble-bg: #4A90E2; /* 蓝色 */ --user-text-color: #FFFFFF; /* 白色文字 */ /* AI气泡颜色 */ --ai-bubble-bg: #F0F4F8; /* 浅灰色 */ --ai-text-color: #1A202C; /* 深灰色文字 */ /* 或者尝试其他配色方案 */ /* --user-bubble-bg: #10B981; 绿色 */ /* --ai-bubble-bg: #FEF3C7; 浅黄色 */ }

直接修改样式：也可以直接修改气泡的CSS规则

/* 用户气泡改为绿色 */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: #10B981; color: white; } /* AI气泡改为浅黄色 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: #FEF3C7; color: #1A202C; }

配色建议：

用户气泡通常用亮色、品牌色
AI气泡通常用中性色、浅色
确保文字颜色和背景色有足够对比度（方便阅读）

4.3 调整气泡圆角

圆角大小影响气泡的“柔软”程度：

/* 小圆角（更方正） */ border-radius: 8px; /* 中等圆角（默认） */ border-radius: 18px 18px 4px 18px; /* 用户气泡 */ border-radius: 18px 18px 18px 4px; /* AI气泡 */ /* 大圆角（更圆润） */ border-radius: 24px; /* 完全圆形（如果气泡接近正方形） */ border-radius: 50%;

四个值的含义：border-radius: 左上右上右下左下;

用户气泡：18px 18px 4px 18px意思是右下角小圆角，其他角大圆角
AI气泡：18px 18px 18px 4px意思是左下角小圆角，其他角大圆角

这种不对称设计模仿了手机聊天软件的气泡样式。

4.4 添加或修改阴影效果

阴影能让气泡有“浮起来”的感觉：

/* 轻微阴影（默认） */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 更明显的阴影 */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 内阴影效果 */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 多重阴影 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05); /* 无阴影 */ box-shadow: none;

阴影参数解释：

0：水平偏移（0表示不偏移）
2px：垂直偏移（向下2像素）
12px：模糊半径（值越大越模糊）
rgba(0, 0, 0, 0.08)：阴影颜色和透明度（黑色，8%透明度）

4.5 调整气泡内边距和最大宽度

让气泡内的文字排版更舒服：

.stChatMessage:has(.user-mark) .stChatMessageContent, .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { /* 内边距：上 右 下 左 */ padding: 12px 16px; /* 最大宽度：避免气泡过宽 */ max-width: 70%; /* 文字行高 */ line-height: 1.5; /* 文字大小 */ font-size: 15px; }

建议值：

padding: 12px 16px;：上下12像素，左右16像素的内边距
max-width: 70%;：气泡最大宽度为容器宽度的70%
用户气泡和AI气泡可以设置不同的最大宽度，形成对比

5. 其他实用样式调整

除了背景和气泡，还有一些细节调整能让界面更完美。

5.1 修改输入框样式

输入框在页面底部，修改它的样式：

/* 找到输入框的样式（可能在CSS靠后的位置） */ .stTextInput>div>div>input { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #E2E8F0; border-radius: 24px; /* 药丸形状 */ padding: 12px 20px; font-size: 15px; } /* 输入框获得焦点时的样式 */ .stTextInput>div>div>input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); outline: none; }

5.2 修改按钮样式

清空记录按钮在右上角：

/* 找到按钮样式 */ .stButton>button { background-color: var(--primary-color); color: white; border: none; border-radius: 6px; padding: 8px 16px; font-weight: 500; } /* 鼠标悬停效果 */ .stButton>button:hover { background-color: #3a7bc8; /* 稍深的颜色 */ transform: translateY(-1px); transition: all 0.2s; }

5.3 添加动画效果

让界面交互更流畅：

/* 气泡出现动画 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .stChatMessage { animation: fadeInUp 0.3s ease-out; } /* 流式输出时的光标闪烁效果 */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .streaming-cursor::after { content: '|'; animation: blink 1s infinite; font-weight: bold; }

5.4 调整整体布局和间距

/* 主容器样式 */ .main .block-container { padding-top: 2rem; padding-bottom: 6rem; /* 给底部输入框留空间 */ max-width: 800px; /* 限制最大宽度 */ margin: 0 auto; /* 居中 */ } /* 消息之间的间距 */ .stChatMessage { margin-bottom: 1rem; } /* 滚动条样式（深色模式时可能需要） */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

6. 完整示例：打造深色模式界面

让我们把所有的修改整合起来，创建一个完整的深色模式主题：

:root { /* 深色主题颜色变量 */ --background-color: #0f172a; --text-color: #e2e8f0; --primary-color: #60a5fa; /* 气泡颜色 */ --user-bubble-bg: #3b82f6; --user-text-color: #ffffff; --ai-bubble-bg: #1e293b; --ai-text-color: #e2e8f0; /* 输入框和按钮 */ --input-bg: rgba(30, 41, 59, 0.8); --input-border: #475569; --button-bg: #3b82f6; --button-hover: #2563eb; } /* 应用样式 */ body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0); background-size: 40px 40px; color: var(--text-color); margin: 0; padding: 20px; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* 用户气泡 */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); color: var(--user-text-color); border-radius: 18px 18px 4px 18px; padding: 12px 16px; max-width: 70%; margin-left: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* AI气泡 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); color: var(--ai-text-color); border-radius: 18px 18px 18px 4px; padding: 12px 16px; max-width: 70%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); } /* 输入框 */ .stTextInput>div>div>input { background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: 24px; padding: 14px 20px; font-size: 15px; color: var(--text-color); } .stTextInput>div>div>input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); outline: none; } /* 按钮 */ .stButton>button { background-color: var(--button-bg); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-weight: 500; transition: all 0.2s; } .stButton>button:hover { background-color: var(--button-hover); transform: translateY(-1px); } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

把这段CSS替换掉原来的样式代码，刷新页面，你就会看到一个全新的深色模式界面。

7. 调试技巧和常见问题

7.1 如何调试CSS？

浏览器开发者工具：按F12打开，在Elements面板查看元素的CSS样式
实时修改测试：在开发者工具的Styles面板直接修改CSS，立即看到效果
复制生效的样式：找到生效的CSS选择器，复制到你的代码中

7.2 修改后没生效？

可能的原因和解决方法：

缓存问题：Streamlit有缓存，尝试：

# 清除Streamlit缓存 rm -rf ~/.streamlit/cache # 或者重启Streamlit服务

CSS选择器不对：用浏览器开发者工具检查元素的实际class
样式被覆盖：确保你的CSS在Streamlit默认样式之后加载，或者使用!important
```
background-color: #ff0000 !important;
```

7.3 样式冲突怎么办？

如果修改一个样式影响了其他地方：

使用更具体的选择器：比如不只是.stChatMessageContent，而是.stChatMessage:has(.user-mark) .stChatMessageContent
缩小影响范围：只修改特定元素的样式，而不是全局样式
使用CSS变量：修改变量值，而不是直接修改样式规则