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

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

【免费下载链接】hollamaA minimal LLM chat app that runs entirely in your browser项目地址: https://gitcode.com/gh_mirrors/ho/hollama

Hollama 是一款完全在浏览器中运行的极简 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-theme='dark'] { --color-primary: 14 80% 60%; /* 主色调 */ --color-shade-0: 0 0% 10%; /* 背景色 */ --color-text-shade-0: 0 0% 95%; /* 文本色 */ /* 更多颜色变量... */ }

自定义主题颜色

你可以通过修改这些变量来自定义主题：

1. 主色调：修改--color-primary变量，更改应用的主要强调色
2. 背景色：调整--color-shade-*系列变量，更改不同层级的背景色
3. 文本色：调整--color-text-shade-*系列变量，更改文本颜色
4. 功能色：修改--color-positive（成功）、--color-warning（警告）和--color-negative（错误）等功能颜色

例如，要将暗色主题的背景色改为深灰色，可以修改：

[data-color-theme='dark'] { --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时，暗色主题变量会覆盖默认的亮色主题变量。

添加自定义主题选项

你可以通过以下步骤添加新的主题选项：

1. 在 src/app.pcss 中添加新的主题变量定义，例如：

[data-color-theme='custom'] { /* 自定义主题变量 */ }

2. 在设置界面添加新的主题选择选项
3. 更新主题切换逻辑，支持新的主题值

结语：打造你的专属 Hollama 界面 ✨

通过本文介绍的方法，你可以轻松切换 Hollama 的亮色和暗色主题，还可以通过修改 CSS 变量创建完全个性化的视觉体验。无论是喜欢简洁明亮的界面，还是偏好深沉专注的深色模式，Hollama 都能满足你的需求。

现在就去尝试定制你的 Hollama 主题吧！如果有任何创意或建议，欢迎参与项目贡献，一起改进这款优秀的开源 LLM 聊天应用。

【免费下载链接】hollamaA minimal LLM chat app that runs entirely in your browser项目地址: https://gitcode.com/gh_mirrors/ho/hollama