Hollama 主题定制：如何创建个性化的亮色与暗色主题

Hollama 主题定制如何创建个性化的亮色与暗色主题【免费下载链接】hollamaA minimal LLM chat app that runs entirely in your browser项目地址: https://gitcode.com/gh_mirrors/ho/hollamaHollama 是一款完全在浏览器中运行的极简 LLM 聊天应用支持用户根据个人喜好定制亮色与暗色主题。本文将详细介绍如何轻松切换主题模式并通过自定义 CSS 变量打造专属视觉体验让你的聊天界面更加舒适和个性化。快速切换内置主题模式一键切换 ⚡Hollama 提供了便捷的主题切换功能让你可以在亮色和暗色模式之间无缝切换。步骤 1访问设置界面首先点击左侧导航栏中的Settings设置选项进入应用设置页面。在这里你可以找到所有与界面相关的配置选项。Hollama 设置界面包含主题切换、服务器配置等多种功能选项步骤 2切换主题模式在设置页面中找到Interface界面部分你可以看到主题切换选项。Hollama 提供三种主题模式浅色默认的明亮主题适合白天使用暗色深色背景主题适合夜间使用跟随系统自动根据操作系统的主题设置切换只需点击对应的选项即可立即应用所选主题。切换后整个应用界面会实时更新无需刷新页面。深入定制通过 CSS 变量修改主题颜色 如果你想要更个性化的主题效果可以通过修改 CSS 变量来自定义颜色方案。Hollama 的主题系统基于 CSS 变量构建位于 src/app.pcss 文件中。了解主题变量结构在 src/app.pcss 文件中定义了两种主题模式的变量/* 亮色主题变量 */ :root { --color-primary: 14 80% 60%; /* 主色调 */ --color-shade-0: 0 0% 100%; /* 背景色 */ --color-text-shade-0: 0 0% 5%; /* 文本色 */ /* 更多颜色变量... */ } /* 暗色主题变量 */ [data-color-themedark] { --color-primary: 14 80% 60%; /* 主色调 */ --color-shade-0: 0 0% 10%; /* 背景色 */ --color-text-shade-0: 0 0% 95%; /* 文本色 */ /* 更多颜色变量... */ }自定义主题颜色你可以通过修改这些变量来自定义主题主色调修改--color-primary变量更改应用的主要强调色背景色调整--color-shade-*系列变量更改不同层级的背景色文本色调整--color-text-shade-*系列变量更改文本颜色功能色修改--color-positive成功、--color-warning警告和--color-negative错误等功能颜色例如要将暗色主题的背景色改为深灰色可以修改[data-color-themedark] { --color-shade-0: 0 0% 15%; /* 将背景色从 10% 亮度提高到 15% */ }应用自定义主题修改完成后保存 src/app.pcss 文件并重新加载 Hollama 应用新的主题设置将立即生效。你可以反复调整颜色值直到获得满意的视觉效果。高级技巧创建自定义主题切换器 如果你希望添加更多主题选项或创建自己的主题切换器可以通过修改应用的设置组件来实现。相关代码位于 src/routes/settings/Interface.svelte 文件中。主题切换的工作原理Hollama 通过在根元素上设置data-color-theme属性来切换主题// 在 src/routes/layout.svelte 中 document.documentElement.setAttribute(data-color-theme, $settingsStore.userTheme)当该属性值为dark时暗色主题变量会覆盖默认的亮色主题变量。添加自定义主题选项你可以通过以下步骤添加新的主题选项在 src/app.pcss 中添加新的主题变量定义例如[data-color-themecustom] { /* 自定义主题变量 */ }在设置界面添加新的主题选择选项更新主题切换逻辑支持新的主题值结语打造你的专属 Hollama 界面 ✨通过本文介绍的方法你可以轻松切换 Hollama 的亮色和暗色主题还可以通过修改 CSS 变量创建完全个性化的视觉体验。无论是喜欢简洁明亮的界面还是偏好深沉专注的深色模式Hollama 都能满足你的需求。现在就去尝试定制你的 Hollama 主题吧如果有任何创意或建议欢迎参与项目贡献一起改进这款优秀的开源 LLM 聊天应用。【免费下载链接】hollamaA minimal LLM chat app that runs entirely in your browser项目地址: https://gitcode.com/gh_mirrors/ho/hollama创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考