自定义 CSS

在管理面板的 设置 → 站点设置 页面中可以注入自定义 CSS。保存后会原样注入到站点每个页面的 <style> 标签中。

CSS 变量参考

所有 PicFast 主题 token 都以 CSS 自定义属性的形式暴露。覆盖这些变量即可改变颜色、圆角、间距等：

变量用途示例值
--background页面背景色oklch(0.985 0 0)
--foreground文字颜色oklch(0.145 0 0)
--card卡片/面板背景oklch(1 0 0)
--primary主强调色oklch(0.55 0.18 260)
--primary-foreground主色上的文字oklch(0.985 0 0)
--secondary次要表面色oklch(0.97 0 0)
--accent强调表面色oklch(0.97 0 0)
--muted弱化表面色oklch(0.97 0 0)
--muted-foreground弱化文字颜色oklch(0.556 0 0)
--border边框颜色oklch(0.922 0 0)
--radius基础圆角0.625rem
--destructive危险/删除色oklch(0.577 0.245 27.3)
--success成功色oklch(0.6 0.18 145)
--warning警告色oklch(0.75 0.15 80)
--info信息色oklch(0.55 0.18 260)
--pf-logo-radiusLogo 圆角0.75rem
--pf-density界面密度倍数1
--pf-motion-duration动画速度150ms
--sidebar侧边栏背景oklch(0.985 0 0)
--popover弹出层背景oklch(1 0 0)

覆盖选择器

以下是可用于精准覆盖的关键 CSS 类名：

选择器作用范围控制内容
.pf-public-glow公共页面装饰性背景光晕效果
.pf-site-logo所有页面站点 Logo 外观（圆角由 --pf-logo-radius 驱动）
.pf-console-shell控制台布局侧边栏 + 内容区包裹容器
.pf-console-content控制台布局控制台主内容区

常用示例

更换主强调色

:root {
  --primary: oklch(0.55 0.22 280);
  --primary-foreground: oklch(0.985 0 0);
}

.dark {
  --primary: oklch(0.65 0.22 280);
}

让界面更圆润

:root {
  --radius: 1.25rem;
  --pf-logo-radius: 1rem;
}

隐藏公共页面的光晕效果

.pf-public-glow {
  display: none;
}

自定义控制台侧边栏背景

.pf-console-shell {
  background: linear-gradient(180deg, oklch(0.2 0.01 260) 0%, oklch(0.13 0 0) 100%);
}

在线演练场

在下方编辑 CSS，右侧预览区会实时展示应用到你自己的 PicFast 实例上的效果。

custom.css
预览

AI 生成 CSS

将下方的提示词模板复制到 DeepSeek、ChatGPT 或任意大模型中，即可自动生成适用于你的 PicFast 实例的自定义 CSS： 

我想自定义我的 PicFast 图床站点外观。它使用 CSS 自定义属性（变量）进行主题化。

可覆盖的选择器：
- .pf-public-glow（公共页面的背景光晕）
- .pf-site-logo（Logo 元素）
- .pf-console-shell（控制台侧边栏 + 内容区包裹层）
- .pf-console-content（控制台主内容区）

可用的 CSS 变量（使用 oklch 色彩空间）：
--background、--foreground、--card、--card-foreground、--primary、--primary-foreground、
--secondary、--secondary-foreground、--accent、--accent-foreground、--muted、
--muted-foreground、--border、--radius、--pf-logo-radius、--pf-density、
--pf-motion-duration、--destructive、--success、--warning、--info、
--sidebar、--sidebar-foreground、--popover、--popover-foreground

亮色模式变量放在 :root { } 下，暗色模式放在 .dark { } 下。

请生成如下风格的 CSS：[在这里描述你想要的风格，例如"暗色主题配霓虹粉强调色和大圆角"]