精简 classic 皮肤:去掉鼠尾草/玫瑰,亮端固定纸感;重新设计墨色暗板——底色更深更中性(褪黄褐)、次级文字降金相改暖灰、鎏金强调提亮提纯,层次靠三档灰阶;后台暗色 token 同步;设置页皮肤选择器改为固定展示
This commit is contained in:
@@ -36,14 +36,11 @@ function textToSocial(text) {
|
|||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 这里只能选亮色皮肤(paper / sage / rose)。暗色端固定 ink,由访客在前台
|
// 皮肤已精简:亮端固定纸感,暗端固定墨色(2026 重设计)。下面只做展示。
|
||||||
// 右下角 ThemeSwitcher 切到「深色」或「自动 + 系统暗」时启用。
|
|
||||||
const lightSkins = [
|
const lightSkins = [
|
||||||
{ id: 'paper', label: '纸感(默认)', bg: '#faf7f1', fg: '#3d7f9c' },
|
{ id: 'paper', label: '纸感(默认)', bg: '#faf7f1', fg: '#3d7f9c' }
|
||||||
{ id: 'sage', label: '鼠尾草', bg: '#eef0e6', fg: '#5f7b5c' },
|
|
||||||
{ id: 'rose', label: '玫瑰', bg: '#f7eee6', fg: '#a55a4a' }
|
|
||||||
]
|
]
|
||||||
const darkSkin = { id: 'ink', label: '墨色', bg: '#1f1d1a', fg: '#c3b58f' }
|
const darkSkin = { id: 'ink', label: '墨色', bg: '#191817', fg: '#d9b97c' }
|
||||||
|
|
||||||
// ---------- 界面与自定义(第二套 UI) ----------
|
// ---------- 界面与自定义(第二套 UI) ----------
|
||||||
|
|
||||||
@@ -244,19 +241,12 @@ async function save() {
|
|||||||
<div class="field">
|
<div class="field">
|
||||||
<label>亮色皮肤</label>
|
<label>亮色皮肤</label>
|
||||||
<div class="theme-swatches">
|
<div class="theme-swatches">
|
||||||
<div
|
<div class="sw on" :style="{ background: lightSkins[0].bg, borderColor: lightSkins[0].fg }" :title="lightSkins[0].label + '(固定)'">
|
||||||
v-for="sk in lightSkins"
|
<span :style="{ background: lightSkins[0].fg }">{{ lightSkins[0].label }}</span>
|
||||||
:key="sk.id"
|
|
||||||
class="sw"
|
|
||||||
:class="{ on: settings.light_skin_id === sk.id }"
|
|
||||||
:style="{ background: sk.bg, borderColor: settings.light_skin_id === sk.id ? sk.fg : 'var(--admin-line)' }"
|
|
||||||
@click="settings.light_skin_id = sk.id"
|
|
||||||
>
|
|
||||||
<span :style="{ background: sk.fg }">{{ sk.label }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="margin: 6px 0 0; font-size: 12px; color: var(--admin-muted);">
|
<p style="margin: 6px 0 0; font-size: 12px; color: var(--admin-muted);">
|
||||||
访客在前台选择「自动」且系统偏好浅色时使用。
|
亮端固定为纸感。访客在前台选择「自动」且系统偏好浅色时使用。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { setThumbBase } from './utils'
|
|||||||
// 暗色皮肤固定为 ink —— 是当前唯一支持的暗端皮肤。
|
// 暗色皮肤固定为 ink —— 是当前唯一支持的暗端皮肤。
|
||||||
const DARK_SKIN = 'ink'
|
const DARK_SKIN = 'ink'
|
||||||
// 亮色皮肤的合法集合(后台 Settings 也只让站主从这里选)
|
// 亮色皮肤的合法集合(后台 Settings 也只让站主从这里选)
|
||||||
const LIGHT_SKINS = ['paper', 'sage', 'rose']
|
const LIGHT_SKINS = ['paper']
|
||||||
|
|
||||||
// 客户端显示模式 —— 持久化在 localStorage
|
// 客户端显示模式 —— 持久化在 localStorage
|
||||||
const MODE_KEY = 'one.themeMode'
|
const MODE_KEY = 'one.themeMode'
|
||||||
@@ -53,7 +53,7 @@ function systemPrefersDark() {
|
|||||||
|
|
||||||
// 模式 → 实际 data-theme 值
|
// 模式 → 实际 data-theme 值
|
||||||
//
|
//
|
||||||
// light / auto 亮端 → site.light_skin_id(站主在后台选的"基础亮色皮肤")
|
// light / auto 亮端 → 固定纸感(paper);皮肤选择已精简,暗端固定墨色
|
||||||
// dark → ink(强制暗色)
|
// dark → ink(强制暗色)
|
||||||
//
|
//
|
||||||
// 后台的"基础亮色皮肤"是访客在任何「浅色偏好」下都会看到的;
|
// 后台的"基础亮色皮肤"是访客在任何「浅色偏好」下都会看到的;
|
||||||
|
|||||||
+27
-49
@@ -31,56 +31,34 @@
|
|||||||
--col-main: 640px;
|
--col-main: 640px;
|
||||||
--col-right: 264px;
|
--col-right: 264px;
|
||||||
--gutter: 28px;}
|
--gutter: 28px;}
|
||||||
:root[data-theme='ink'] {--paper: #1f1d1a;
|
:root[data-theme='ink'] {/* 墨:暖炭底、暖白字、鎏金点缀。比旧版更中性(褪掉黄褐相),
|
||||||
--card: #25221e;
|
层次靠三档灰阶拉开;强调金提亮提纯,暗底上对比更足 */
|
||||||
--paper-sunken: #2b2722;
|
--paper: #191817;
|
||||||
--ink: #ece5d2;
|
--card: #201e1c;
|
||||||
--ink-soft: #c3b58f;
|
--paper-sunken: #262420;
|
||||||
--muted: #8c8270;
|
--ink: #e7e3da;
|
||||||
--faint: #6a6155;
|
--ink-soft: #b8b2a6;
|
||||||
--line: #3a352e;
|
--muted: #867f73;
|
||||||
--line-soft: #2f2b25;
|
--faint: #5f594f;
|
||||||
--accent: #c3a972;
|
--line: #34302b;
|
||||||
--accent-soft: rgba(195, 169, 114, 0.14);
|
--line-soft: #292623;
|
||||||
--accent-line: rgba(195, 169, 114, 0.4);}
|
--accent: #d9b97c;
|
||||||
:root[data-theme='sage'] {--paper: #eef0e6;
|
--accent-soft: rgba(217, 185, 124, 0.12);
|
||||||
--card: #f6f7ef;
|
--accent-line: rgba(217, 185, 124, 0.4);}
|
||||||
--paper-sunken: #e2e6d6;
|
:root[data-admin-theme='dark'] {--admin-bg: #191817;
|
||||||
--ink: #2a3127;
|
|
||||||
--ink-soft: #475042;
|
|
||||||
--muted: #6f7a68;
|
|
||||||
--faint: #94a08d;
|
|
||||||
--line: #d6dcc9;
|
|
||||||
--line-soft: #e6e9d9;
|
|
||||||
--accent: #5f7b5c;
|
|
||||||
--accent-soft: rgba(95, 123, 92, 0.12);
|
|
||||||
--accent-line: rgba(95, 123, 92, 0.38);}
|
|
||||||
:root[data-theme='rose'] {--paper: #f7eee6;
|
|
||||||
--card: #fdf5ee;
|
|
||||||
--paper-sunken: #ecdfd3;
|
|
||||||
--ink: #3a2922;
|
|
||||||
--ink-soft: #5e463d;
|
|
||||||
--muted: #9a7c6f;
|
|
||||||
--faint: #b89c91;
|
|
||||||
--line: #ead9cb;
|
|
||||||
--line-soft: #f0e2d5;
|
|
||||||
--accent: #a55a4a;
|
|
||||||
--accent-soft: rgba(165, 90, 74, 0.1);
|
|
||||||
--accent-line: rgba(165, 90, 74, 0.38);}
|
|
||||||
:root[data-admin-theme='dark'] {--admin-bg: #1a1815;
|
|
||||||
--admin-paper: var(--admin-bg);
|
--admin-paper: var(--admin-bg);
|
||||||
--admin-card: #25221e;
|
--admin-card: #201e1c;
|
||||||
--admin-paper-sunken: #2f2b25;
|
--admin-paper-sunken: #262420;
|
||||||
--admin-ink: #ece5d2;
|
--admin-ink: #e7e3da;
|
||||||
--admin-ink-soft: #c3b58f;
|
--admin-ink-soft: #b8b2a6;
|
||||||
--admin-muted: #9a8f7e;
|
--admin-muted: #948c7f;
|
||||||
--admin-faint: #6e6557;
|
--admin-faint: #635c51;
|
||||||
--admin-line: #3a352e;
|
--admin-line: #34302b;
|
||||||
--admin-line-soft: #2f2b25;
|
--admin-line-soft: #292623;
|
||||||
--admin-accent: #c3a972;
|
--admin-accent: #d9b97c;
|
||||||
--admin-accent-soft: rgba(195, 169, 114, 0.16);
|
--admin-accent-soft: rgba(217, 185, 124, 0.16);
|
||||||
--admin-accent-line: rgba(195, 169, 114, 0.42);
|
--admin-accent-line: rgba(217, 185, 124, 0.42);
|
||||||
--admin-on-accent: #1a1815;
|
--admin-on-accent: #191817;
|
||||||
--admin-danger: #d68d75;
|
--admin-danger: #d68d75;
|
||||||
--admin-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
--admin-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
|
||||||
--admin-overlay: rgba(0, 0, 0, 0.6);}
|
--admin-overlay: rgba(0, 0, 0, 0.6);}
|
||||||
|
|||||||
Reference in New Issue
Block a user