@@ -313,12 +315,6 @@
letter-spacing: -0.03em;
color: var(--hero-title-text, var(--ink));
line-height: var(--leading-tight);
- /* 背景图完整显示后，用轻投影保证文字在复杂图片上仍可读 */
- text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 14px rgba(255, 253, 250, 0.4);
- }
-
- html.dark .hero__title {
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.35);
}
.hero__subtitle {
@@ -327,25 +323,93 @@
color: var(--hero-subtitle-text, var(--ink-2));
letter-spacing: 0.05em;
line-height: var(--leading-normal);
- text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 10px rgba(255, 253, 250, 0.4);
- }
-
- html.dark .hero__subtitle {
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.35);
}
.hero__description {
font-size: var(--text-lg);
- color: var(--ink-2);
+ color: var(--hero-quote-text, var(--ink-2));
line-height: var(--leading-relaxed);
max-width: 560px;
text-align: center;
transition: opacity 0.3s ease;
- text-shadow: 0 1px 3px rgba(255, 253, 250, 0.55);
}
- html.dark .hero__description {
- text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ /* ===== 文字显示效果（后台「Hero 首屏 → 文字显示效果」，默认 none 无任何附加效果） ===== */
+ .hero--fx-shadow .hero__title,
+ .hero--fx-shadow .hero__subtitle,
+ .hero--fx-shadow .hero__description {
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.16);
+ }
+
+ html.dark .hero--fx-shadow .hero__title,
+ html.dark .hero--fx-shadow .hero__subtitle,
+ html.dark .hero--fx-shadow .hero__description {
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.4);
+ }
+
+ .hero--fx-glow .hero__title,
+ .hero--fx-glow .hero__subtitle,
+ .hero--fx-glow .hero__description {
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 26px rgba(255, 255, 255, 0.5);
+ }
+
+ html.dark .hero--fx-glow .hero__title,
+ html.dark .hero--fx-glow .hero__subtitle,
+ html.dark .hero--fx-glow .hero__description {
+ text-shadow: 0 0 8px rgba(255, 255, 255, 0.45), 0 0 24px rgba(255, 255, 255, 0.22);
+ }
+
+ /* 半透明遮罩层：文字背后垫一块毛玻璃衬底 */
+ .hero--fx-scrim .hero__content {
+ background: rgba(255, 255, 255, 0.45);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-radius: 24px;
+ padding: var(--space-2xl);
+ }
+
+ html.dark .hero--fx-scrim .hero__content {
+ background: rgba(0, 0, 0, 0.4);
+ }
+
+ /* 渐变遮罩：斜向渐变衬底 */
+ .hero--fx-gradient .hero__content {
+ background: linear-gradient(
+ 135deg,
+ rgba(255, 255, 255, 0.55) 0%,
+ rgba(255, 255, 255, 0.18) 100%
+ );
+ border-radius: 24px;
+ padding: var(--space-2xl);
+ }
+
+ html.dark .hero--fx-gradient .hero__content {
+ background: linear-gradient(
+ 135deg,
+ rgba(0, 0, 0, 0.5) 0%,
+ rgba(0, 0, 0, 0.16) 100%
+ );
+ }
+
+ /* 容器：半透明边框圆角矩形 + 更大留白，把文字"装"进设计好的容器里 */
+ .hero--fx-frame .hero__content {
+ border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
+ background: color-mix(in srgb, var(--bg) 30%, transparent);
+ border-radius: 24px;
+ padding: var(--space-2xl) var(--space-3xl);
+ gap: var(--space-xl);
+ }
+
+ html.dark .hero--fx-frame .hero__content {
+ border-color: color-mix(in srgb, #ffffff 32%, transparent);
+ }
+
+ .hero--fx-frame .hero__title {
+ letter-spacing: 0.08em;
+ }
+
+ .hero--fx-frame .hero__subtitle {
+ letter-spacing: 0.22em;
}
.hero__scroll-indicator {
@@ -441,6 +505,16 @@
gap: var(--space-md);
}
+ .hero--fx-scrim .hero__content,
+ .hero--fx-gradient .hero__content {
+ padding: var(--space-xl) var(--space-lg);
+ }
+
+ .hero--fx-frame .hero__content {
+ padding: var(--space-xl) var(--space-lg);
+ gap: var(--space-lg);
+ }
+
.hero__description {
max-width: 90vw;
}
diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
index 1f0919a..6ab116e 100644
--- a/src/components/ThemeSwitcher.astro
+++ b/src/components/ThemeSwitcher.astro
@@ -57,8 +57,9 @@
document.documentElement.classList.toggle("dark", isDark);
document.documentElement.setAttribute("data-color-scheme", isDark ? "dark" : "light");
localStorage.setItem("wi-theme", isDark ? "dark" : "light");
+ var bgPair = window.WI_PALETTE_BG || { light: "#faf7f2", dark: "#1e1c1a" };
var tc = document.querySelector('meta[name="theme-color"]');
- if (tc) tc.setAttribute("content", isDark ? "#1e1c1a" : "#faf7f2");
+ if (tc) tc.setAttribute("content", isDark ? bgPair.dark : bgPair.light);
updateIcons();
setTimeout(function() {
document.documentElement.classList.remove("wi-theme-transition");
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d7f6607..6d0d656 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,6 +24,7 @@ const fragmentAttr = layoutFragment ? "html (head, content)" : undefined;
class={home ? 'wi-home-snap' : ''}
style="overflow-x:hidden"
th:classappend="${theme.config?.animation?.animation_enabled == false} ? 'wi-no-animations'"
+ th:attr="data-palette=${theme.config?.style?.color_palette ?: 'warm-island'}"
xmlns:th={layoutFragment ? "https://www.thymeleaf.org" : undefined}
th:fragment={fragmentAttr}
>
@@ -32,7 +33,7 @@ const fragmentAttr = layoutFragment ? "html (head, content)" : undefined;
-
-
+
![]()
-
-
+
+
-
+
-
diff --git a/src/pages/links.astro b/src/pages/links.astro
index b33e064..a55621d 100644
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@@ -54,8 +54,7 @@ import Layout from "../layouts/Layout.astro";
rel="noopener noreferrer"
class="wi-links__card"
th:with="verification=${link.status?.verification},
- accessState=${verification?.access?.state != null ? verification.access.state.name() : null},
- backlinkState=${verification?.backlink != null and verification.backlink.state != null ? verification.backlink.state.name() : null}"
+ accessState=${verification?.access?.state != null ? verification.access.state.name() : null}"
>
@@ -74,16 +73,16 @@ import Layout from "../layouts/Layout.astro";
th:text="${#strings.substring(link.spec.displayName, 0, 1)}"
>
-
+
@@ -523,8 +522,9 @@ import Layout from "../layouts/Layout.astro";
border-radius: 16px;
text-decoration: none;
color: inherit;
- overflow: hidden;
display: flex;
+ /* 注意：这里绝不能加 overflow:hidden —— 悬浮时内层卡片会上移 4px 并投射大范围
+ 阴影，裁切会把阴影切出一条"断开的光带"、卡片顶部被削平（v1.2.0 修复） */
}
.wi-links__card-glow {
diff --git a/src/pages/moments.astro b/src/pages/moments.astro
index 35a58d9..23e21d2 100644
--- a/src/pages/moments.astro
+++ b/src/pages/moments.astro
@@ -411,6 +411,8 @@ import LightGallery from "../components/LightGallery.astro";
position: relative;
width: 100%;
height: clamp(220px, 30vw, 380px);
+ /* 顶图与首条瞬间的卡片边框不能贴死：留出与页面头部一致的呼吸间距 */
+ margin-bottom: var(--space-2xl);
overflow: hidden;
background: var(--bg-raised);
}
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index dd7d775..ccd98bc 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -1,7 +1,9 @@
:root {
--bg: #faf7f2;
--bg-raised: #f3ede5;
- --bg-overlay: rgba(250, 247, 242, 0.85);
+ /* 派生变量基于 --bg / --rule 动态混合：调色板只需覆盖核心变量，
+ 玻璃拟态、遮罩层等会自动跟随当前配色（暖屿默认时与旧值完全一致） */
+ --bg-overlay: color-mix(in srgb, var(--bg) 85%, transparent);
--ink: #2c2420;
--ink-2: #7a6e64;
--ink-3: #b5a99e;
@@ -12,19 +14,20 @@
--mist-pink: #f0e4de;
--sea-salt: #e8e0d6;
--caramel: #8b6f5e;
- --glass-bg: rgba(250, 247, 242, 0.72);
- --glass-border: rgba(232, 224, 214, 0.5);
- --shadow-sm: 0 1px 3px rgba(44, 36, 32, 0.06);
- --shadow-md: 0 4px 16px rgba(44, 36, 32, 0.08);
- --shadow-lg: 0 8px 32px rgba(44, 36, 32, 0.12);
- --shadow-glow: 0 0 40px rgba(212, 118, 78, 0.15);
+ --glass-bg: color-mix(in srgb, var(--bg) 72%, transparent);
+ --glass-border: color-mix(in srgb, var(--rule) 50%, transparent);
+ /* 阴影色由墨色动态混合，保证换配色后阴影色调一致 */
+ --shadow-sm: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
+ --shadow-md: 0 4px 16px color-mix(in srgb, var(--ink) 8%, transparent);
+ --shadow-lg: 0 8px 32px color-mix(in srgb, var(--ink) 12%, transparent);
+ --shadow-glow: 0 0 40px color-mix(in srgb, var(--accent) 15%, transparent);
}
html.dark {
/* 暗色基准：偏中性、只保留一丝暖意，避免大面积黄褐底色带来的闷感 */
--bg: #1e1c1a;
--bg-raised: #292623;
- --bg-overlay: rgba(30, 28, 26, 0.85);
+ --bg-overlay: color-mix(in srgb, var(--bg) 85%, transparent);
--ink: #e9e4dd;
--ink-2: #aaa096;
/* 深色背景下人眼对低对比更敏感，次要文字与分隔线比浅色模式略提亮 */
@@ -36,8 +39,8 @@ html.dark {
--mist-pink: #2e2823;
--sea-salt: #302b26;
--caramel: #a38b7b;
- --glass-bg: rgba(30, 28, 26, 0.72);
- --glass-border: rgba(59, 54, 47, 0.5);
+ --glass-bg: color-mix(in srgb, var(--bg) 72%, transparent);
+ --glass-border: color-mix(in srgb, var(--rule) 50%, transparent);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
diff --git a/src/styles/_palettes.scss b/src/styles/_palettes.scss
new file mode 100644
index 0000000..e744476
--- /dev/null
+++ b/src/styles/_palettes.scss
@@ -0,0 +1,320 @@
+/*
+ * 主题配色系统：官方预设调色板
+ * ---------------------------------------------------------------
+ * 每个[调色板]覆盖核心色彩变量（浅色 html[data-palette="x"] /
+ * 深色 html[data-palette="x"].dark 两套）。
+ * 派生变量（--bg-overlay、--glass-*、阴影色等）在 _colors.scss 中
+ * 由 --bg / --rule / --ink / --accent 动态混合而成，会自动跟随。
+ * data-palette 由 layout 头部根据后台「总体样式 → 主题配色」输出；
+ * 默认值 warm-island（暖屿·赤陶）即 _colors.scss 的基准值，无需覆盖。
+ */
+
+/* 抹茶 */
+html[data-palette="matcha"] {
+ --bg: #f6f8f1;
+ --bg-raised: #ecf1e3;
+ --ink: #26302a;
+ --ink-2: #6d7a6e;
+ --ink-3: #a8b3a4;
+ --rule: #dde5d4;
+ --accent: #6f9d52;
+ --accent-hover: #5d8943;
+ --accent-bg: #ecf3e2;
+ --mist-pink: #e7eddc;
+ --sea-salt: #dfe8d3;
+ --caramel: #7d8a68;
+}
+
+html[data-palette="matcha"].dark {
+ --bg: #1b1f1a;
+ --bg-raised: #252b22;
+ --ink: #e6e9e0;
+ --ink-2: #a3ab9c;
+ --ink-3: #767e70;
+ --rule: #363d33;
+ --accent: #9cc47f;
+ --accent-hover: #aed493;
+ --accent-bg: #242c1f;
+ --mist-pink: #262d22;
+ --sea-salt: #282f24;
+ --caramel: #98a387;
+}
+
+/* 黛蓝 */
+html[data-palette="indigo"] {
+ --bg: #f5f7fa;
+ --bg-raised: #eaeff5;
+ --ink: #232a33;
+ --ink-2: #66707d;
+ --ink-3: #a3adb8;
+ --rule: #dce2ea;
+ --accent: #4a6fa5;
+ --accent-hover: #3d5d8c;
+ --accent-bg: #e9eff8;
+ --mist-pink: #e2e8f0;
+ --sea-salt: #dbe4ee;
+ --caramel: #707c8e;
+}
+
+html[data-palette="indigo"].dark {
+ --bg: #191d23;
+ --bg-raised: #222831;
+ --ink: #e4e7ec;
+ --ink-2: #9aa4b1;
+ --ink-3: #6d7683;
+ --rule: #323a45;
+ --accent: #7fa3d1;
+ --accent-hover: #93b4dc;
+ --accent-bg: #1f2632;
+ --mist-pink: #232830;
+ --sea-salt: #252b34;
+ --caramel: #8b95a6;
+}
+
+/* 樱粉 */
+html[data-palette="sakura"] {
+ --bg: #faf5f6;
+ --bg-raised: #f3eaec;
+ --ink: #322a2c;
+ --ink-2: #7d6e72;
+ --ink-3: #b4a6aa;
+ --rule: #ecdfe2;
+ --accent: #d97387;
+ --accent-hover: #c85d72;
+ --accent-bg: #fbeef1;
+ --mist-pink: #f2e2e6;
+ --sea-salt: #eddfe3;
+ --caramel: #96757e;
+}
+
+html[data-palette="sakura"].dark {
+ --bg: #201b1c;
+ --bg-raised: #2a2425;
+ --ink: #ece5e6;
+ --ink-2: #b0a4a7;
+ --ink-3: #7f7276;
+ --rule: #3c3436;
+ --accent: #e89aab;
+ --accent-hover: #f0aec0;
+ --accent-bg: #2d2225;
+ --mist-pink: #2f2729;
+ --sea-salt: #31282a;
+ --caramel: #a88d94;
+}
+
+/* 暮紫 */
+html[data-palette="violet"] {
+ --bg: #f7f5fa;
+ --bg-raised: #eeeaf5;
+ --ink: #2b2733;
+ --ink-2: #6f6a7c;
+ --ink-3: #aaa5b6;
+ --rule: #e2ddeb;
+ --accent: #8a6fc0;
+ --accent-hover: #7759ae;
+ --accent-bg: #f0eaf9;
+ --mist-pink: #e8e2f0;
+ --sea-salt: #e3dcee;
+ --caramel: #7f7590;
+}
+
+html[data-palette="violet"].dark {
+ --bg: #1c1a21;
+ --bg-raised: #26222f;
+ --ink: #e8e5ee;
+ --ink-2: #a49eaf;
+ --ink-3: #746e80;
+ --rule: #373241;
+ --accent: #b49ae0;
+ --accent-hover: #c3ace8;
+ --accent-bg: #262033;
+ --mist-pink: #292434;
+ --sea-salt: #2b2536;
+ --caramel: #948caa;
+}
+
+/* 海盐 */
+html[data-palette="sea"] {
+ --bg: #f3f8f7;
+ --bg-raised: #e8f0ee;
+ --ink: #21302d;
+ --ink-2: #647872;
+ --ink-3: #9fb1ac;
+ --rule: #d9e6e3;
+ --accent: #3d9c8f;
+ --accent-hover: #2f8578;
+ --accent-bg: #e5f3f0;
+ --mist-pink: #dee9e6;
+ --sea-salt: #d6e5e1;
+ --caramel: #6c8680;
+}
+
+html[data-palette="sea"].dark {
+ --bg: #181f1e;
+ --bg-raised: #212a28;
+ --ink: #e3eae8;
+ --ink-2: #9aaba6;
+ --ink-3: #6d7d79;
+ --rule: #2f3b39;
+ --accent: #6cc3b4;
+ --accent-hover: #82d0c2;
+ --accent-bg: #1d2a27;
+ --mist-pink: #222c2a;
+ --sea-salt: #242e2c;
+ --caramel: #869894;
+}
+
+/* 琥珀 */
+html[data-palette="amber"] {
+ --bg: #faf7ef;
+ --bg-raised: #f3eddc;
+ --ink: #322b1e;
+ --ink-2: #7d7360;
+ --ink-3: #b5ab94;
+ --rule: #eae1cb;
+ --accent: #b97f1c;
+ --accent-hover: #9f6a0e;
+ --accent-bg: #f9efd8;
+ --mist-pink: #f0e8d2;
+ --sea-salt: #ebe2ca;
+ --caramel: #96835c;
+}
+
+html[data-palette="amber"].dark {
+ --bg: #201d16;
+ --bg-raised: #2a261d;
+ --ink: #ebe6d9;
+ --ink-2: #b0a893;
+ --ink-3: #7f7866;
+ --rule: #3c3729;
+ --accent: #e0a83e;
+ --accent-hover: #ebba5c;
+ --accent-bg: #2c251a;
+ --mist-pink: #2f2a1e;
+ --sea-salt: #312c20;
+ --caramel: #a89a76;
+}
+
+/* 梅酒 */
+html[data-palette="plum"] {
+ --bg: #f9f4f5;
+ --bg-raised: #f1e8ea;
+ --ink: #2f2427;
+ --ink-2: #796a6f;
+ --ink-3: #b1a2a7;
+ --rule: #e9dde0;
+ --accent: #a4506b;
+ --accent-hover: #8d3f59;
+ --accent-bg: #f7e9ee;
+ --mist-pink: #ecdee2;
+ --sea-salt: #e5d8db;
+ --caramel: #8d6f77;
+}
+
+html[data-palette="plum"].dark {
+ --bg: #1f1a1b;
+ --bg-raised: #292223;
+ --ink: #eae2e4;
+ --ink-2: #ada0a4;
+ --ink-3: #7c6e73;
+ --rule: #3a3133;
+ --accent: #d98aa3;
+ --accent-hover: #e39fb5;
+ --accent-bg: #2b2023;
+ --mist-pink: #2d2527;
+ --sea-salt: #2f2729;
+ --caramel: #a08890;
+}
+
+/* 石墨 */
+html[data-palette="graphite"] {
+ --bg: #f7f7f6;
+ --bg-raised: #eeedeb;
+ --ink: #262626;
+ --ink-2: #6e6e6c;
+ --ink-3: #ababa8;
+ --rule: #e0e0de;
+ --accent: #3f3f3e;
+ --accent-hover: #262626;
+ --accent-bg: #ececea;
+ --mist-pink: #e9e9e7;
+ --sea-salt: #e5e5e3;
+ --caramel: #7b7b78;
+}
+
+html[data-palette="graphite"].dark {
+ --bg: #1b1b1a;
+ --bg-raised: #252524;
+ --ink: #e8e8e6;
+ --ink-2: #a5a5a2;
+ --ink-3: #757572;
+ --rule: #353534;
+ --accent: #c9c9c5;
+ --accent-hover: #d8d8d4;
+ --accent-bg: #262625;
+ --mist-pink: #2a2a29;
+ --sea-salt: #2c2c2b;
+ --caramel: #8f8f8c;
+}
+
+/* 可拿铁 */
+html[data-palette="cocoa"] {
+ --bg: #f8f4f0;
+ --bg-raised: #f0e8e1;
+ --ink: #2e2722;
+ --ink-2: #786c62;
+ --ink-3: #b3a89d;
+ --rule: #e7ddd3;
+ --accent: #9a6b4f;
+ --accent-hover: #835539;
+ --accent-bg: #f5e9e0;
+ --mist-pink: #ecdfd4;
+ --sea-salt: #e6d9cd;
+ --caramel: #8a6f5b;
+}
+
+html[data-palette="cocoa"].dark {
+ --bg: #1e1a17;
+ --bg-raised: #282320;
+ --ink: #eae4dd;
+ --ink-2: #aca199;
+ --ink-3: #7b7169;
+ --rule: #3a332e;
+ --accent: #cd9878;
+ --accent-hover: #daa98c;
+ --accent-bg: #2a211c;
+ --mist-pink: #2d2721;
+ --sea-salt: #2f2923;
+ --caramel: #a08d7c;
+}
+
+/* 天青 */
+html[data-palette="azure"] {
+ --bg: #f4f8fb;
+ --bg-raised: #e9f1f7;
+ --ink: #223038;
+ --ink-2: #62737e;
+ --ink-3: #a0b0ba;
+ --rule: #dbe7ee;
+ --accent: #3b82c4;
+ --accent-hover: #2e6ba5;
+ --accent-bg: #e7f1f9;
+ --mist-pink: #e0ebf2;
+ --sea-salt: #d8e6ef;
+ --caramel: #6d8090;
+}
+
+html[data-palette="azure"].dark {
+ --bg: #172026;
+ --bg-raised: #202a31;
+ --ink: #e3eaef;
+ --ink-2: #99a8b3;
+ --ink-3: #6b7a85;
+ --rule: #2e3a42;
+ --accent: #74b3e0;
+ --accent-hover: #88c1e8;
+ --accent-bg: #1d2830;
+ --mist-pink: #222c34;
+ --sea-salt: #243038;
+ --caramel: #8496a3;
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 77bf873..f1b0ea8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,7 @@
@use 'variables' as *;
@use 'mixins';
@use 'colors';
+@use 'palettes';
@use 'typography';
@use 'content';
@use 'spacing';
diff --git a/theme.yaml b/theme.yaml
index b0d4666..2091f38 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -28,8 +28,8 @@ spec:
description: 微信读书书架（依赖微信读书插件）
screenshot:
file: weread.html
- version: "1.1.12"
- requires: ">=2.24.0"
+ version: "1.2.0"
+ requires: ">=2.26.0"
license:
- name: "GPL-3.0"
url: "https://www.gnu.org/licenses/gpl-3.0.en.html"