Superneon

superneon 是近乎黑色的紫，配上发丝般的细边和从内部透出的光。实心按钮是一枚深色胶囊，内侧边缘被照亮，外圈是一道渐变，光晕溢出轮廓之外；大标题从明亮渐变到薰衣草色，凡是被选中或打开的东西都会带上一圈光晕。光晕永远只是装饰，所以每个标签依然落在满足 WCAG AA 的纯色上。深色模式是原本的样子；浅色模式保留深色胶囊和光晕，把它们放在淡淡的薰衣草色页面上。

一张卡片

同样的标记，由一份样式表重新设计。

  1. 账户

  2. 资料

  3. 确认

进度50%
50
已保存
你的更改已经上线。
已复制到剪贴板
预设是什么？
一份能一次性重新设计所有组件的第二份样式表。
它会跟随深色模式吗？
会——试试页面顶部的开关。
还能继续用 theme() 吗？
能，而且它优先于预设。

  1. 今天

    预设已发布

    整体观感，一次调用。

  2. 昨天

    文档已写好

  3. 星期一

    第一版草图

整体观感，一次调用。
链接在核心样式表之后。
只有一个选项：preset。
草稿已上线已归档
AL312GH

使用

import { styles } from 'sitelo/ui'

head(
  title('我的站点'),
  styles({ preset: 'superneon' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/superneon-5b0e7d21.css">

把页面背景设为 var(--su-sn-backdrop)，就能得到预设的底色，外加一道从顶部洒下的紫光；也可以直接用 var(--su-bg)。页面加载了 Geist 时标题就用它，否则用系统字体——预设本身不下载任何东西。

body {
  background: var(--su-sn-backdrop);
}

自定义颜色

theme() 依然可以叠在上面用，所以预设是起点，而不是分叉。这个预设给每个调色板多加了两个槽位：glow 和 glowEnd，也就是绘制边框和光晕所用渐变的两端。光晕上不会放要读的内容，所以想多亮都可以。

head(
  styles({ preset: 'superneon' }),
  theme({
    primary: { glow: '#00e5ff', glowEnd: '#7f6bff' },
  }),
)