tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme v1

Browse Source
This commit is contained in:
tamakyi
2026-10-19 15:23:11 +08:00
parent 86dc8384bc
commit e9fba8b9ed
84 changed files with 34468 additions and 5386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/base.css
+93
View File
@@ -23,6 +23,10 @@
--tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
--tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
--tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
/* 整页背景：主题可覆盖。图案层叠在背景图之上，两者都不用时保持纯色底。 */
--tb-page-image: none;
--tb-page-pattern: none;
--tb-page-pattern-size: auto;
}
html[data-theme="dark"] {
--tb-bg: #1a1d23;
@@ -260,6 +264,12 @@
body {
font-family: var(--tb-font);
background-color: var(--tb-bg);
/* 主题的整页背景：图案（平铺）在上，图片（cover）在下，都不设置时等价于纯色 */
background-image: var(--tb-page-pattern, none), var(--tb-page-image, none);
background-size: var(--tb-page-pattern-size, auto), cover;
background-repeat: repeat, no-repeat;
background-position: left top, center center;
background-attachment: scroll, fixed;
color: var(--tb-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -327,6 +337,89 @@
color: var(--tb-text-muted);
}
/* 主题选择器（设置页）：色块 + 名称。纯展示，不参与主题令牌，所以放在基础层。 */
.tb-theme-hint {
margin: 0 0 6px;
font-size: 0.8rem;
color: var(--tb-text-muted);
}
.tb-theme-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin: 8px 0 2px;
}
.tb-theme-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
border: 1px solid var(--tb-border);
border-radius: var(--tb-radius-sm);
cursor: pointer;
}
.tb-theme-opt:hover {
background-color: var(--tb-surface-hover);
}
.tb-theme-opt input {
margin: 0;
}
.tb-theme-swatch {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: var(--tb-radius-xs);
border: 1px solid var(--tb-border);
background-color: var(--tb-surface-2);
}
/* 选中态用描边而不是 :has()，兼容老 WebView */
.tb-theme-opt input:checked + .tb-theme-swatch {
outline: 2px solid var(--tb-primary);
outline-offset: 1px;
}
.tb-theme-name {
font-size: 0.84rem;
line-height: 1.3;
}
.tb-theme-opt input:checked ~ .tb-theme-name {
color: var(--tb-primary);
}
/* UIkit 组件跟随主题色：UIkit 3.3.3 的主色是编译期常量（#1e87f0），
CSS 变量注入不进去，只能按组件覆盖。基础主题的 --tb-primary 恰好就是 #1e87f0，
所以这段对默认外观零改动，只是让箱主主题能贯穿到按钮/链接/勾选。 */
a, .uk-link {
color: var(--tb-primary);
}
a:hover, .uk-link:hover {
color: var(--tb-primary);
}
.uk-button-primary {
background-color: var(--tb-primary);
}
.uk-button-primary:hover,
.uk-button-primary:focus {
background-color: var(--tb-primary);
filter: brightness(1.07);
}
.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked {
background-color: var(--tb-primary);
border-color: transparent;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
border-color: var(--tb-primary);
}
.uk-tab > .uk-active > a {
border-color: var(--tb-primary);
}
.uk-text-primary {
color: var(--tb-primary) !important;
}
/* 轻量胶囊：用于投票类型、热门标签等「只是分类信息」的位置。
实心 uk-label 一屏多个会变成一排色块，这里统一降级为浅底 + 次要色文字。 */
.tb-chip {
static/css/themes/_scaffold.css
+110
View File
@@ -0,0 +1,110 @@
/* ============================================================================
主题底稿（scaffold）—— 复制本文件改名为 <slug>.css 即可新增一套主题。
文件名即 slug：只允许小写字母、数字、连字符（如 sakura / ocean-mist）。
新增后需在 conf/app.ini 登记：
[theme]
default = default
available = default,sakura,ocean-mist
⚠️ 硬规则（违反会导致深色模式错乱或整页错位）：
1. 两个块都必须写：浅色「html[data-theme-style="SLUG"]」
与深色「html[data-theme="dark"][data-theme-style="SLUG"]」。
只写浅色块会连深色模式一起覆盖（同特异性 + 本文件在 base.css 之后加载）。
2. 只改令牌（下方变量）与「组件微调」段。不要改布局：宽高、margin、padding、
display / flex / grid、position 一律不动 —— 主题不是换皮模板。
3. 本文件不参与构建，仅作参考；真正生效的是同目录下的 <slug>.css。
── 可用的 19 个令牌 ──────────────────────────────────────────────
底色层 --tb-bg 页面底色（html/body）
--tb-surface 卡片、输入框等前景面板
--tb-surface-2 次级面（标签底、进度条轨道、代码块）
--tb-surface-hover 悬停底（列表行、下拉项）
线条 --tb-border 边框、分隔线
文字 --tb-text 正文
--tb-text-secondary 次要文字（说明、meta）
--tb-text-muted 弱化文字（占位、时间戳）
强调 --tb-primary 主色：链接、主按钮、进度条
--tb-primary-weak 主色 10% 左右的浅底（选中态、标签）
形状 --tb-radius 卡片 12px / --tb-radius-sm 8px / --tb-radius-xs 6px
阴影 --tb-shadow 卡片默认 / --tb-shadow-hover 悬停
字体 --tb-font 字体栈（一般不改）
页面背景 --tb-page-image 整页背景图（cover，fixed）
--tb-page-pattern 整页图案（平铺，可叠加在背景图之上）
--tb-page-pattern-size 图案平铺尺寸（默认 auto）
── 素材规格（放 R2，不需要重新编译） ─────────────────────────────
页面背景图 2400×1600（3:2）或 2560×1440，WebP q80，≤300KB；明暗各一张：
https://r2.337845818.best/tamabox/themes/<slug>/bg-light.webp
https://r2.337845818.best/tamabox/themes/<slug>/bg-dark.webp
注意：背景图上还要叠卡片和文字，主题要保证「--tb-surface 不透明」
或足够对比；照片类背景建议配 10%~20% 的同色半透明遮罩。
平铺图案 200×200 或 400×400 可无缝平铺，PNG/WebP，≤40KB；
建议透明度 ≤15%，否则会和正文抢注意力。
设置页色块 由本文件浅色块的 --tb-bg 与 --tb-primary 自动生成，无需额外素材。
============================================================================ */
/* 1) 浅色（必须）—— 选择器里的 SLUG 换成文件名 */
html[data-theme-style="SLUG"] {
--tb-bg: #f7f8fa;
--tb-surface: #ffffff;
--tb-surface-2: #f4f6f8;
--tb-surface-hover: #f3f7ff;
--tb-border: #e8eaee;
--tb-text: #1f2329;
--tb-text-secondary: #5c6370;
--tb-text-muted: #8a919c;
--tb-primary: #1e87f0;
--tb-primary-weak: rgba(30, 135, 240, 0.10);
--tb-radius: 12px;
--tb-radius-sm: 8px;
--tb-radius-xs: 6px;
--tb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -18px rgba(16, 24, 40, 0.20);
--tb-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 18px 40px -20px rgba(16, 24, 40, 0.28);
--tb-font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
/* 整页背景：两者可同时用，图案叠在图片之上；不需要就保持 none */
--tb-page-image: none;
--tb-page-pattern: none;
--tb-page-pattern-size: auto;
}
/* 2) 深色（必须）—— 深浅两套必须成对，缺一段会让深色用户看到「浅色的深色主题」 */
html[data-theme="dark"][data-theme-style="SLUG"] {
--tb-bg: #1a1d23;
--tb-surface: #242830;
--tb-surface-2: #2d323c;
--tb-surface-hover: rgba(92, 141, 255, 0.12);
--tb-border: #3a404c;
--tb-text: #d8dce4;
--tb-text-secondary: #a8b0bd;
--tb-text-muted: #8b93a1;
--tb-primary: #5c8dff;
--tb-primary-weak: rgba(92, 141, 255, 0.14);
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.55);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -20px rgba(0, 0, 0, 0.65);
--tb-page-image: none;
--tb-page-pattern: none;
--tb-page-pattern-size: auto;
}
/* 3) 组件微调（可选，默认整段注释掉）
只允许「外观」层面的补充：边框、阴影、封面遮罩浓度等。
禁止改尺寸/间距/定位 —— 那属于布局，主题不管。 */
/*
html[data-theme-style="SLUG"] .uk-card-default {
border-color: transparent;
}
html[data-theme-style="SLUG"] .tb-pcard {
box-shadow: var(--tb-shadow);
}
*/
static/css/themes/default.css
+13
View File
@@ -0,0 +1,13 @@
/* 基础外观（default）：与 base.css 完全一致，不覆盖任何令牌。
它的存在只为让 [theme] 里可以显式写 default（= 不使用主题）。
实际渲染时不会加载本文件 —— internal/theme.Resolve 对 default 返回空串，
省掉一次静态请求；下方令牌仅用于设置页色块预览。 */
html[data-theme-style="default"] {
--tb-bg: #f7f8fa;
--tb-primary: #1e87f0;
}
html[data-theme="dark"][data-theme-style="default"] {
--tb-bg: #1a1d23;
--tb-primary: #5c8dff;
}
static/css/themes/sakura.css
+45
View File
@@ -0,0 +1,45 @@
/* 樱花（sakura）：粉调 + 细网点图案，纯 CSS 实现，不依赖图片素材。
复制 _scaffold.css 写的示例：只覆盖令牌，未改动任何布局。 */
html[data-theme-style="sakura"] {
--tb-bg: #fff6f8;
--tb-surface: #ffffff;
--tb-surface-2: #fdeef2;
--tb-surface-hover: #fdf1f5;
--tb-border: #f2dde4;
--tb-text: #3a2b30;
--tb-text-secondary: #6b545c;
--tb-text-muted: #a08c94;
--tb-primary: #e5678f;
--tb-primary-weak: rgba(229, 103, 143, 0.12);
--tb-shadow: 0 1px 2px rgba(120, 60, 80, 0.05), 0 12px 28px -18px rgba(120, 60, 80, 0.22);
--tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30);
--tb-page-image: none;
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.14) 1px, transparent 0);
--tb-page-pattern-size: 16px 16px;
}
html[data-theme="dark"][data-theme-style="sakura"] {
--tb-bg: #241a1f;
--tb-surface: #2e2129;
--tb-surface-2: #3a2a33;
--tb-surface-hover: rgba(255, 138, 176, 0.10);
--tb-border: #49333d;
--tb-text: #f2e4e9;
--tb-text-secondary: #c6aab4;
--tb-text-muted: #9d818b;
--tb-primary: #ff8ab0;
--tb-primary-weak: rgba(255, 138, 176, 0.16);
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);
--tb-page-image: none;
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.10) 1px, transparent 0);
--tb-page-pattern-size: 16px 16px;
}