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

FireRed-OCR Studio保姆级教程：自定义CSS注入修改像素风主题色（支持深色模式）

news 2026/4/20 2:38:16

FireRed-OCR Studio保姆级教程：自定义CSS注入修改像素风主题色（支持深色模式）

1. 工具介绍与准备工作

FireRed-OCR Studio是一款基于Qwen3-VL模型的工业级文档解析工具，能够精准识别文字并还原复杂表格结构、数学公式及文档布局。其独特的像素风界面设计让操作体验更加直观流畅。

1.1 为什么需要自定义主题色

默认的FireRed像素风主题采用火红色调，但用户可能希望：

适配企业品牌色系
根据个人喜好调整界面
实现深色模式保护眼睛
区分不同使用场景

1.2 准备工作

在开始前请确保：

已安装最新版FireRed-OCR Studio
了解基础CSS语法
准备好代码编辑器（如VS Code）
知道如何访问浏览器开发者工具（F12）

2. 基础CSS注入方法

2.1 定位Streamlit样式文件

FireRed-OCR Studio基于Streamlit构建，主题样式存储在以下位置：

/your/installation/path/lib/python3.10/site-packages/streamlit/static/css

2.2 创建自定义CSS文件

新建custom.css文件，添加基础样式结构：

/* 主色调定义 */ :root { --primary: #FF3366; /* 默认火红色 */ --background: #FFFFFF; --secondary-background: #F0F2F6; --text: #262730; } /* 深色模式变量 */ [data-theme="dark"] { --primary: #FF6699; --background: #121212; --secondary-background: #1E1E1E; --text: #E0E0E0; }

2.3 注入CSS到Streamlit

在Python启动脚本中添加：

import streamlit as st def inject_custom_css(): with open('custom.css') as f: st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True) inject_custom_css()

3. 像素风主题定制详解

3.1 修改主色调

调整像素风的核心红色：

/* 按钮和交互元素 */ .stButton>button { background-color: var(--primary); border: 2px solid var(--primary); font-family: 'PixelFont', monospace; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); } /* 导航栏 */ .stApp header { background-color: var(--primary); border-bottom: 3px solid #000; }

3.2 像素边框效果

保持像素风格的关键边框样式：

/* 所有输入框 */ .stTextInput>div>div>input, .stTextArea>div>textarea { border: 2px solid #000; box-shadow: 3px 3px 0px rgba(0,0,0,0.1); } /* 图片上传区 */ .stFileUploader { border: 3px dashed #000; background-color: var(--secondary-background); }

4. 实现深色模式切换

4.1 添加切换按钮

在Python代码中添加：

dark_mode = st.checkbox('深色模式') if dark_mode: st.markdown('<style>[data-theme="light"]{display:none}</style>', unsafe_allow_html=True) else: st.markdown('<style>[data-theme="dark"]{display:none}</style>', unsafe_allow_html=True)

4.2 深色模式专属样式

完善深色模式下的视觉体验：

[data-theme="dark"] { /* 调整深色下的对比度 */ --primary: #FF6699; --background: #121212; /* 深色模式下的像素边框 */ .stTextInput>div>div>input, .stTextArea>div>textarea { border-color: #555; } /* 结果预览区 */ .markdown-text-area { background-color: #1E1E1E; border: 2px solid #333; } }

5. 高级定制技巧

5.1 动态主题切换

实现根据时间自动切换主题：

from datetime import datetime current_hour = datetime.now().hour if 18 <= current_hour < 6: # 晚6点到早6点 st.markdown('<style>[data-theme="light"]{display:none}</style>', unsafe_allow_html=True)

5.2 主题色预设方案

提供多种配色方案选择：

theme = st.selectbox('选择主题', ['火红像素', '科技蓝', '森林绿', '深空紫']) if theme == '科技蓝': css = ":root{--primary:#3366FF;}" elif theme == '森林绿': css = ":root{--primary:#33CC33;}" else: css = "" st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)