尽量保持与 GitHub 相同样式的 Gitea 主题
添加了短暂的过渡动画优化体验(与 GitHub Code 克隆列表动画一致)
推荐搭配文件图标浏览器插件一起使用更佳 github-file-explorer-icons
- 在发布页下载最新的
theme-github-dark.css
放入gitea/public/assets/css
目录下 - 修改
gitea/conf/app.ini
,并将, github
附加到[ui]
下的THEMES
末尾 - 重启 Gitea
- 在设置中查看主题
gitea/conf/app.ini
例:
[ui]
THEMES = gitea-dark, github-dark
详细请查看 Gitea 文档 Gitea docs
可以根据自己的偏好自定义主题的一部分样式
在主题的 CSS 文件的头部或尾部添加以下代码
:root {
--custom-clone-menu-width: 150px;
...
}
Important
请确保在 :root
选择器中添加自定义变量,否则无法生效
变量之间用 ;
分隔
建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
变量名 | 描述 | 默认值 | Github | 推荐 | 最小值 | 最大值 |
---|---|---|---|---|---|---|
--custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
--custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | ||
--custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | ||
--custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | ||
--custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | ||
--custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 |
欢迎提交 Issue 或 Pull Request