/* ============================================================ Shopify 风格主题 - 设计 Tokens 作用：建立色板/间距/圆角/阴影/字体变量 不污染 Bootstrap 默认类，所有变量加 --sf- 前缀 ============================================================ */ :root { /* 颜色 */ --sf-bg: #ffffff; --sf-bg-alt: #f6f6f7; --sf-bg-card: #ffffff; --sf-text: #121212; --sf-text-muted: #717171; --sf-text-soft: #4b4b4b; --sf-border: #e6e6e6; --sf-border-soft: #f0f0f0; --sf-accent: #1a1a1a; --sf-accent-hover: #000000; --sf-price: #121212; --sf-price-old: #717171; --sf-badge-hot: #d73a49; --sf-badge-new: #2e8b57; --sf-badge-sale: #ff4d4f; --sf-link: #1a1a1a; --sf-link-hover: #5a5a5a; --sf-overlay: rgba(0,0,0,0.6); /* 字体 */ --sf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; --sf-font-heading: var(--sf-font); --sf-font-mono: "SF Mono", Monaco, Consolas, "Courier New", monospace; --sf-font-size-xs: 12px; --sf-font-size-sm: 13px; --sf-font-size-base: 14px; --sf-font-size-md: 16px; --sf-font-size-lg: 18px; --sf-font-size-xl: 22px; --sf-font-size-2xl: 28px; --sf-font-size-3xl: 36px; /* 圆角 */ --sf-radius-xs: 2px; --sf-radius-sm: 4px; --sf-radius: 8px; --sf-radius-lg: 12px; --sf-radius-pill: 999px; /* 间距 */ --sf-space-xs: 4px; --sf-space-sm: 8px; --sf-space-md: 16px; --sf-space-lg: 24px; --sf-space-xl: 40px; --sf-space-2xl: 64px; /* 阴影 */ --sf-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --sf-shadow: 0 1px 3px rgba(0,0,0,0.08); --sf-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --sf-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* 过渡 */ --sf-transition: 0.2s ease; --sf-transition-slow: 0.4s ease; /* 容器宽度 */ --sf-container: 1280px; --sf-header-h: 72px; } /* 全局字体复位 */ body { font-family: var(--sf-font); color: var(--sf-text); background: var(--sf-bg); font-size: var(--sf-font-size-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 链接默认色 */ a { color: var(--sf-link); transition: color var(--sf-transition); } a:hover { color: var(--sf-link-hover); text-decoration: none; } /* 标题 */ h1, h2, h3, h4, h5, h6 { font-family: var(--sf-font-heading); font-weight: 600; color: var(--sf-text); } /* ============================================================ 深色模式覆盖 - 通过 触发 仅覆盖色板相关 token，其他变量（字体/间距/圆角）保持不变 ============================================================ */ [data-theme="dark"] { --sf-bg: #0a0a0a; --sf-bg-alt: #1a1a1a; --sf-bg-card: #161616; --sf-text: #fafafa; --sf-text-muted: #a1a1a1; --sf-text-soft: #d4d4d4; --sf-border: #2a2a2a; --sf-border-soft: #1f1f1f; --sf-accent: #ffffff; --sf-accent-hover: #e6e6e6; --sf-price: #ffffff; --sf-price-old: #888888; --sf-link: #ffffff; --sf-link-hover: #b8b8b8; --sf-overlay: rgba(0,0,0,0.75); --sf-shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --sf-shadow: 0 1px 3px rgba(0,0,0,0.6); --sf-shadow-md: 0 4px 12px rgba(0,0,0,0.7); --sf-shadow-lg: 0 8px 24px rgba(0,0,0,0.8); } /* 深色模式：图片自动降亮防白闪 */ [data-theme="dark"] img { filter: brightness(0.92); } [data-theme="dark"] .sf-detail-content img, [data-theme="dark"] .sf-product-card-image img { filter: brightness(0.95); } /* 深色模式：覆盖 Bootstrap input/select/textarea 默认白底 */ [data-theme="dark"] body { background: var(--sf-bg); color: var(--sf-text); } [data-theme="dark"] .form-control, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--sf-bg-alt) !important; color: var(--sf-text) !important; border-color: var(--sf-border) !important; } [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > td { background: transparent !important; color: var(--sf-text) !important; border-color: var(--sf-border) !important; } [data-theme="dark"] .table > tbody > tr:hover > td { background: var(--sf-bg-alt) !important; } [data-theme="dark"] .panel, [data-theme="dark"] .well, [data-theme="dark"] .breadcrumb, [data-theme="dark"] .nav-tabs > li > a { background: var(--sf-bg-alt); color: var(--sf-text); border-color: var(--sf-border); } /* 主题切换过渡 */ body, .sf-header, .sf-footer, .sf-product-card, .sf-checkout-section, .sf-pay-panel, .sf-side-card, .sf-detail-price-block, .sf-comment-list dl { transition: background var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition); }