Starry Night Art Gallery保姆级教程自定义CSS变量统一主题色系统1. 引言为什么需要统一的主题色系统当你第一次打开Starry Night Art Gallery时一定会被它那独特的文艺复兴美学所震撼。深邃的墨蓝背景、华丽的黄金渐变按钮、优雅的书法字体——这一切都不是偶然而是通过精心设计的CSS变量系统实现的。传统的Streamlit应用往往带着明显的工业感默认的白色顶部栏、标准化的表单控件、千篇一律的按钮样式。Starry Night通过深度CSS定制彻底打破了这种刻板印象为用户创造了一个真正沉浸式的艺术创作环境。本文将手把手教你如何构建这样一个统一的主题色系统让你的AI艺术应用也能拥有博物馆级的视觉体验。2. 理解CSS变量艺术馆的色彩基础2.1 什么是CSS变量CSS变量也称为自定义属性就像是调色盘上的颜料你可以在一个地方定义颜色然后在整个作品中重复使用。比如:root { --gold-primary: linear-gradient(135deg, #d4af37, #ffd700, #f8d568); --deep-blue: #0a1128; --ivory: #fffff0; --crimson: #dc143c; }这里的:root表示这些变量在整个文档中都可用就像是在调色盘上准备好了所有基础颜料。2.2 变量的优势使用CSS变量有三大好处一致性修改一个变量值所有使用该变量的地方都会自动更新维护性不需要在整个CSS文件中搜索替换颜色值灵活性可以轻松实现主题切换或动态样式调整3. Starry Night的主题色系统解析3.1 核心色彩变量Starry Night定义了以下核心色彩变量:root { /* 主色调 */ --sn-gold-primary: linear-gradient(135deg, #d4af37, #ffd700, #f8d568); --sn-gold-secondary: linear-gradient(135deg, #b8860b, #daa520, #cd853f); --sn-deep-blue: #0a1128; --sn-midnight-blue: #1a365d; /* 辅助色 */ --sn-ivory: #fffff0; --sn-ivory-dim: #f8f8e8; --sn-crimson: #dc143c; --sn-emerald: #028a0f; /* 文字色 */ --sn-text-primary: var(--sn-ivory); --sn-text-secondary: rgba(255, 255, 240, 0.8); --sn-text-muted: rgba(255, 255, 240, 0.6); /* 边框与阴影 */ --sn-border-gold: 1px solid rgba(212, 175, 55, 0.3); --sn-shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.25); }3.2 渐变效果实现Starry Night的按钮和控件使用了精美的黄金渐变效果.sn-btn-primary { background: var(--sn-gold-primary); border: none; color: var(--sn-deep-blue); padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--sn-shadow-gold); } .sn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4); }4. 实战为你的应用添加主题色系统4.1 基础设置步骤首先在你的Streamlit应用中创建或修改CSS文件# 在main.py或app.py中添加 import streamlit as st def inject_custom_css(): with open(assets/custom.css, r) as f: st.markdown(fstyle{f.read()}/style, unsafe_allow_htmlTrue) # 在应用启动时调用 inject_custom_css()4.2 创建CSS文件在项目目录下创建assets/custom.css文件/* 定义CSS变量 */ :root { /* 在这里添加前面提到的颜色变量 */ } /* 移除Streamlit默认样式 */ .stApp header { display: none !important; } .stApp [data-testidstToolbar] { display: none !important; } .stAlert { display: none !important; } /* 设置全局背景 */ .stApp { background-color: var(--sn-deep-blue); color: var(--sn-text-primary); font-family: Ma Shan Zheng, Noto Serif SC, serif; } /* 自定义按钮样式 */ .stButton button { background: var(--sn-gold-primary); color: var(--sn-deep-blue); border: none; border-radius: 6px; padding: 10px 20px; font-weight: 600; transition: all 0.3s ease; } .stButton button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); }4.3 自定义滑块和输入框/* 自定义滑块 */ .stSlider div[data-basewebslider] { background-color: var(--sn-midnight-blue); } .stSlider div[data-basewebslider] div[roleslider] { background: var(--sn-gold-primary); border: 2px solid var(--sn-deep-blue); } /* 自定义文本输入框 */ .stTextInput input { background-color: rgba(255, 255, 240, 0.1); color: var(--sn-text-primary); border: var(--sn-border-gold); border-radius: 4px; } .stTextInput input:focus { border-color: var(--sn-gold-secondary); box-shadow: 0 0 0 1px var(--sn-gold-secondary); }5. 高级技巧动态主题与响应式设计5.1 使用JavaScript动态更新变量如果你需要实现主题切换功能可以通过JavaScript动态更新CSS变量// 切换到深色主题 function enableDarkTheme() { document.documentElement.style.setProperty(--sn-deep-blue, #0a1128); document.documentElement.style.setProperty(--sn-text-primary, #fffff0); } // 切换到浅色主题 function enableLightTheme() { document.documentElement.style.setProperty(--sn-deep-blue, #f0f8ff); document.documentElement.style.setProperty(--sn-text-primary, #1a365d); }5.2 响应式设计考虑确保你的主题系统在不同设备上都能良好显示/* 移动端适配 */ media (max-width: 768px) { :root { --sn-font-size-base: 14px; --sn-spacing-unit: 8px; } .stButton button { padding: 8px 16px; font-size: 14px; } } /* 平板设备适配 */ media (min-width: 769px) and (max-width: 1024px) { :root { --sn-font-size-base: 16px; --sn-spacing-unit: 12px; } }6. 常见问题与解决方案6.1 样式覆盖不生效如果发现自定义样式没有生效可能是因为Streamlit的默认样式优先级更高。可以通过增加特异性来解决/* 使用更高的特异性 */ .stApp .stButton button { /* 你的样式 */ } /* 或者使用!important谨慎使用 */ .stButton button { background: var(--sn-gold-primary) !important; }6.2 字体加载问题如果使用自定义字体如马善政毛笔字体确保正确加载import url(https://fonts.googleapis.com/css2?familyMaShanZhengdisplayswap); :root { font-family: Ma Shan Zheng, Noto Serif SC, serif; }6.3 颜色对比度问题确保文字颜色和背景色有足够的对比度可以使用在线工具检查对比度/* 良好的对比度 */ --sn-text-primary: #fffff0; /* Ivory */ --sn-deep-blue: #0a1128; /* 深蓝色 */ /* 避免使用对比度不足的颜色组合 */7. 总结打造属于你的艺术馆主题通过本教程你已经学会了如何为Streamlit应用创建统一的CSS变量主题色系统。Starry Night Art Gallery的成功证明精心设计的视觉体验可以极大提升用户的创作沉浸感。记住一个好的主题色系统应该保持一致性在整个应用中统一使用定义好的颜色变量注重细节不仅是大面积色块边框、阴影、悬停效果都要精心设计考虑可用性确保颜色对比度足够文字清晰可读预留扩展性使用CSS变量方便后续调整和主题切换现在拿起你的数字调色盘开始为你的AI艺术应用打造独特的视觉风格吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Starry Night Art Gallery保姆级教程：自定义CSS变量统一主题色系统
Starry Night Art Gallery保姆级教程自定义CSS变量统一主题色系统1. 引言为什么需要统一的主题色系统当你第一次打开Starry Night Art Gallery时一定会被它那独特的文艺复兴美学所震撼。深邃的墨蓝背景、华丽的黄金渐变按钮、优雅的书法字体——这一切都不是偶然而是通过精心设计的CSS变量系统实现的。传统的Streamlit应用往往带着明显的工业感默认的白色顶部栏、标准化的表单控件、千篇一律的按钮样式。Starry Night通过深度CSS定制彻底打破了这种刻板印象为用户创造了一个真正沉浸式的艺术创作环境。本文将手把手教你如何构建这样一个统一的主题色系统让你的AI艺术应用也能拥有博物馆级的视觉体验。2. 理解CSS变量艺术馆的色彩基础2.1 什么是CSS变量CSS变量也称为自定义属性就像是调色盘上的颜料你可以在一个地方定义颜色然后在整个作品中重复使用。比如:root { --gold-primary: linear-gradient(135deg, #d4af37, #ffd700, #f8d568); --deep-blue: #0a1128; --ivory: #fffff0; --crimson: #dc143c; }这里的:root表示这些变量在整个文档中都可用就像是在调色盘上准备好了所有基础颜料。2.2 变量的优势使用CSS变量有三大好处一致性修改一个变量值所有使用该变量的地方都会自动更新维护性不需要在整个CSS文件中搜索替换颜色值灵活性可以轻松实现主题切换或动态样式调整3. Starry Night的主题色系统解析3.1 核心色彩变量Starry Night定义了以下核心色彩变量:root { /* 主色调 */ --sn-gold-primary: linear-gradient(135deg, #d4af37, #ffd700, #f8d568); --sn-gold-secondary: linear-gradient(135deg, #b8860b, #daa520, #cd853f); --sn-deep-blue: #0a1128; --sn-midnight-blue: #1a365d; /* 辅助色 */ --sn-ivory: #fffff0; --sn-ivory-dim: #f8f8e8; --sn-crimson: #dc143c; --sn-emerald: #028a0f; /* 文字色 */ --sn-text-primary: var(--sn-ivory); --sn-text-secondary: rgba(255, 255, 240, 0.8); --sn-text-muted: rgba(255, 255, 240, 0.6); /* 边框与阴影 */ --sn-border-gold: 1px solid rgba(212, 175, 55, 0.3); --sn-shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.25); }3.2 渐变效果实现Starry Night的按钮和控件使用了精美的黄金渐变效果.sn-btn-primary { background: var(--sn-gold-primary); border: none; color: var(--sn-deep-blue); padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--sn-shadow-gold); } .sn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(212, 175, 55, 0.4); }4. 实战为你的应用添加主题色系统4.1 基础设置步骤首先在你的Streamlit应用中创建或修改CSS文件# 在main.py或app.py中添加 import streamlit as st def inject_custom_css(): with open(assets/custom.css, r) as f: st.markdown(fstyle{f.read()}/style, unsafe_allow_htmlTrue) # 在应用启动时调用 inject_custom_css()4.2 创建CSS文件在项目目录下创建assets/custom.css文件/* 定义CSS变量 */ :root { /* 在这里添加前面提到的颜色变量 */ } /* 移除Streamlit默认样式 */ .stApp header { display: none !important; } .stApp [data-testidstToolbar] { display: none !important; } .stAlert { display: none !important; } /* 设置全局背景 */ .stApp { background-color: var(--sn-deep-blue); color: var(--sn-text-primary); font-family: Ma Shan Zheng, Noto Serif SC, serif; } /* 自定义按钮样式 */ .stButton button { background: var(--sn-gold-primary); color: var(--sn-deep-blue); border: none; border-radius: 6px; padding: 10px 20px; font-weight: 600; transition: all 0.3s ease; } .stButton button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); }4.3 自定义滑块和输入框/* 自定义滑块 */ .stSlider div[data-basewebslider] { background-color: var(--sn-midnight-blue); } .stSlider div[data-basewebslider] div[roleslider] { background: var(--sn-gold-primary); border: 2px solid var(--sn-deep-blue); } /* 自定义文本输入框 */ .stTextInput input { background-color: rgba(255, 255, 240, 0.1); color: var(--sn-text-primary); border: var(--sn-border-gold); border-radius: 4px; } .stTextInput input:focus { border-color: var(--sn-gold-secondary); box-shadow: 0 0 0 1px var(--sn-gold-secondary); }5. 高级技巧动态主题与响应式设计5.1 使用JavaScript动态更新变量如果你需要实现主题切换功能可以通过JavaScript动态更新CSS变量// 切换到深色主题 function enableDarkTheme() { document.documentElement.style.setProperty(--sn-deep-blue, #0a1128); document.documentElement.style.setProperty(--sn-text-primary, #fffff0); } // 切换到浅色主题 function enableLightTheme() { document.documentElement.style.setProperty(--sn-deep-blue, #f0f8ff); document.documentElement.style.setProperty(--sn-text-primary, #1a365d); }5.2 响应式设计考虑确保你的主题系统在不同设备上都能良好显示/* 移动端适配 */ media (max-width: 768px) { :root { --sn-font-size-base: 14px; --sn-spacing-unit: 8px; } .stButton button { padding: 8px 16px; font-size: 14px; } } /* 平板设备适配 */ media (min-width: 769px) and (max-width: 1024px) { :root { --sn-font-size-base: 16px; --sn-spacing-unit: 12px; } }6. 常见问题与解决方案6.1 样式覆盖不生效如果发现自定义样式没有生效可能是因为Streamlit的默认样式优先级更高。可以通过增加特异性来解决/* 使用更高的特异性 */ .stApp .stButton button { /* 你的样式 */ } /* 或者使用!important谨慎使用 */ .stButton button { background: var(--sn-gold-primary) !important; }6.2 字体加载问题如果使用自定义字体如马善政毛笔字体确保正确加载import url(https://fonts.googleapis.com/css2?familyMaShanZhengdisplayswap); :root { font-family: Ma Shan Zheng, Noto Serif SC, serif; }6.3 颜色对比度问题确保文字颜色和背景色有足够的对比度可以使用在线工具检查对比度/* 良好的对比度 */ --sn-text-primary: #fffff0; /* Ivory */ --sn-deep-blue: #0a1128; /* 深蓝色 */ /* 避免使用对比度不足的颜色组合 */7. 总结打造属于你的艺术馆主题通过本教程你已经学会了如何为Streamlit应用创建统一的CSS变量主题色系统。Starry Night Art Gallery的成功证明精心设计的视觉体验可以极大提升用户的创作沉浸感。记住一个好的主题色系统应该保持一致性在整个应用中统一使用定义好的颜色变量注重细节不仅是大面积色块边框、阴影、悬停效果都要精心设计考虑可用性确保颜色对比度足够文字清晰可读预留扩展性使用CSS变量方便后续调整和主题切换现在拿起你的数字调色盘开始为你的AI艺术应用打造独特的视觉风格吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
