/* ============================================================ * 全站四主题系统：纸张（默认） / 黑板 / 终端 / 牛皮纸 * 配色与命名都直接对齐数独工具（apps/sudoku.njk）里的同名主题， * 保持站点视觉语言一致。 * * 实现方式：在上 * 覆盖 Bootstrap 5.3 自身用的 CSS 变量（--bs-body-bg / --bs-white-rgb / * --bs-border-color 等），这样全站基于 Bootstrap 工具类搭的卡片 * （bg-white + rounded + shadow-sm）、表单控件（form-control）、表格 * （table）、下拉菜单等无需逐个工具页改代码就能自动跟随主题切换。 * * 每个主题内部只有 2 级底色： * --eb-bg 页面背景画布色 * --eb-panel/-2/-3（同一个值）功能区、说明区、推荐链接区共用的卡片色 * 功能区（apps/*.njk 里各工具自己写的 bg-white 卡片）、说明区 * （bg-body-tertiary）、推荐链接区（bg-body-secondary）三块用的是三个 * 不同的 Bootstrap 变量（--bs-white / --bs-tertiary-bg / --bs-secondary-bg）， * 但这里统一把它们指向同一个颜色值，所以视觉上是"一种卡片色 + 一种背景色" * 两级对比，卡片之间不再互相区分。 * * 局限：每个工具页内部若有写死的十六进制颜色（例如某个 canvas 小游戏的 * 自定义背景色），不在这套变量覆盖的范围内，需要各工具页自行适配。 * ============================================================ */ /* -------------------- 纸张（默认，对应数独的 paper 主题） -------------------- */ :root, :root[data-theme="paper"] { --eb-bg: #eef0ef; --eb-panel: #f5f6f4; --eb-panel-2: #f5f6f4; --eb-panel-3: #f5f6f4; --eb-border: #d9d9d3; --eb-text: #232323; --eb-text-muted: #8a8a82; --eb-accent: #2f8f80; --eb-hover-bg: #f0f0ec; color-scheme: light; --bs-body-bg: #eef0ef; --bs-body-color: #232323; --bs-border-color: #d9d9d3; --bs-border-color-translucent: rgba(43, 43, 40, .12); --bs-link-color: #2f8f80; --bs-link-hover-color: #2954a5; --bs-primary: #2f8f80; --bs-emphasis-color: #000; --bs-secondary-color: #8a8a82; --bs-secondary-bg: #f5f6f4; --bs-secondary-bg-rgb: 245, 246, 244; --bs-tertiary-bg: #f5f6f4; --bs-tertiary-bg-rgb: 245, 246, 244; --bs-white: #f5f6f4; --bs-white-rgb: 245, 246, 244; --bs-light: #eef0ef; --bs-light-rgb: 238, 240, 239; } /* -------------------- 黑板（对应数独的 chalkboard 主题） -------------------- */ :root[data-theme="chalkboard"] { --eb-bg: #12151d; --eb-panel: #1f2536; --eb-panel-2: #1f2536; --eb-panel-3: #1f2536; --eb-border: #333c53; --eb-text: #edf1f7; --eb-text-muted: #8b93ac; --eb-accent: #6fd6a3; --eb-hover-bg: #242c3e; color-scheme: dark; --bs-body-bg: #12151d; --bs-body-color: #edf1f7; --bs-border-color: #333c53; --bs-border-color-translucent: rgba(255, 255, 255, .08); --bs-link-color: #6fd6a3; --bs-link-hover-color: #8be6c0; --bs-primary: #6fd6a3; --bs-emphasis-color: #fff; --bs-secondary-color: #8b93ac; --bs-secondary-bg: #1f2536; --bs-secondary-bg-rgb: 31, 37, 54; --bs-tertiary-bg: #1f2536; --bs-tertiary-bg-rgb: 31, 37, 54; --bs-white: #1f2536; --bs-white-rgb: 31, 37, 54; --bs-light: #12151d; --bs-light-rgb: 18, 21, 29; } /* -------------------- 终端（对应数独的 terminal 主题） -------------------- */ :root[data-theme="terminal"] { --eb-bg: #050806; --eb-panel: #0f1710; --eb-panel-2: #0f1710; --eb-panel-3: #0f1710; --eb-border: #1f3d28; --eb-text: #4dff8f; --eb-text-muted: #2f6b45; --eb-accent: #39ffe0; --eb-hover-bg: #121a14; color-scheme: dark; --bs-body-bg: #050806; --bs-body-color: #4dff8f; --bs-border-color: #1f3d28; --bs-border-color-translucent: rgba(77, 255, 143, .12); --bs-link-color: #39ffe0; --bs-link-hover-color: #ffb454; --bs-primary: #39ffe0; --bs-emphasis-color: #fff; --bs-secondary-color: #2f6b45; --bs-secondary-bg: #0f1710; --bs-secondary-bg-rgb: 15, 23, 16; --bs-tertiary-bg: #0f1710; --bs-tertiary-bg-rgb: 15, 23, 16; --bs-white: #0f1710; --bs-white-rgb: 15, 23, 16; --bs-light: #050806; --bs-light-rgb: 5, 8, 6; } /* -------------------- 牛皮纸（对应数独的 sepia 主题） -------------------- */ :root[data-theme="sepia"] { --eb-bg: #ece2cf; --eb-panel: #f1e9d6; --eb-panel-2: #f1e9d6; --eb-panel-3: #f1e9d6; --eb-border: #cdbd9a; --eb-text: #3b2b1c; --eb-text-muted: #8a6f4e; --eb-accent: #4f7a52; --eb-hover-bg: #ede3cc; color-scheme: light; --bs-body-bg: #ece2cf; --bs-body-color: #3b2b1c; --bs-border-color: #cdbd9a; --bs-border-color-translucent: rgba(74, 56, 38, .15); --bs-link-color: #4f7a52; --bs-link-hover-color: #3b2b1c; --bs-primary: #4f7a52; --bs-emphasis-color: #241a10; --bs-secondary-color: #8a6f4e; --bs-secondary-bg: #f1e9d6; --bs-secondary-bg-rgb: 241, 233, 214; --bs-tertiary-bg: #f1e9d6; --bs-tertiary-bg-rgb: 241, 233, 214; --bs-white: #f1e9d6; --bs-white-rgb: 241, 233, 214; --bs-light: #ece2cf; --bs-light-rgb: 236, 226, 207; } body { background-color: var(--bs-body-bg, var(--eb-bg)); color: var(--bs-body-color, var(--eb-text)); transition: background-color .2s ease, color .2s ease; } /* 主题切换按钮（导航栏） * 注意：这里故意不用 Bootstrap 的语义类 .active——Bootstrap 给 * .dropdown-item.active 默认配的是"蓝底白字"，如果我们的选中项也叫 * .active，就会被那条规则一起选中，蓝色背景叠加我们自己设的蓝色文字， * 变成蓝字蓝底看不清。所以选中态用自己的类名 .eb-theme-current。 */ .eb-theme-option.eb-theme-current { color: var(--bs-primary) !important; font-weight: 600; } .eb-theme-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0, 0, 0, .15); } /* 功能区全屏：#ebFuncArea 是 layout.njk 里包在每个工具外面的统一壳，浏览器原生全屏 API 只会显示这个元素（及其子元素），其它区块（头部/尾部/说明区/推荐链接区/背景）自动被隐藏，不用手写显隐逻辑。这里给它在全屏态补一个跟随主题的背景色、内边距，并让内容水平居中（不做垂直居中，从顶部开始排布）；否则默认背景透明会显示成黑屏，内容也会贴在最左边。 */ #ebFuncArea:fullscreen, #ebFuncArea:-webkit-full-screen { background: var(--bs-body-bg, var(--eb-bg, #fff)); padding: 20px 16px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; } #ebFuncArea:fullscreen .container, #ebFuncArea:-webkit-full-screen .container { max-width: 100%; }