暗黑模式,自定义样式

暗黑模式,自定义样式

@waline/client 提供了一些 CSS 变量。您可以通过这些变量轻松配置waline的样式。

@waline/client 还内置了暗模式支持。

提供的变量

:root {
  /* 字体大小 */
  --waline-font-size: 16px;
  /* 常规颜色 */
  --waline-white: #fff;
  --waline-light-grey: #999;
  --waline-dark-grey: #666;
  /* 主题色 */
  --waline-theme-color: #27ae60;
  --waline-active-color: #2ecc71;
  /* 布局颜色 */
  --waline-color: #444;
  --waline-bgcolor: #fff;
  --waline-bgcolor-light: #f8f8f8;
  --waline-bgcolor-hover: #f0f0f0;
  --waline-border-color: #ddd;
  --waline-disable-bgcolor: #f8f8f8;
  --waline-disable-color: #bbb;
  --waline-code-bgcolor: #282c34;
  /* 特殊颜色 */
  --waline-bq-color: #f0f0f0;
  /* 头像 */
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  /* 徽章 */
  --waline-badge-color: #3498db;
  --waline-badge-font-size: 0.775em;
  /* 信息 */
  --waline-info-bgcolor: #f8f8f8;
  --waline-info-color: #999;
  --waline-info-font-size: 0.625em;
  /* 渲染选择 */
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;
}

黑暗模式支持

您可以使用深色选项来启用 Waline 的深色模式支持。

通常网站会通过两种方式启用暗模式支持：

如果您以第一种方式在您的网站上启用Waline暗黑模式,自定义样式，您只需将dark设置为’auto’即可。

对于第二种类型的网站暗黑模式,自定义样式，您需要将深色设置为 CSS 选择器以启用深色模式。举几个例子

不同主题的示例

夜间模式默认颜色

当使用dark选项配置暗模式时，waline默认会使用以下颜色：

如果上述颜色与您网站的夜间模式颜色不同，您可以考虑手动添加 CSS 并自行覆盖它们。

阴影样式

如果你使用的主题大量使用 box-shadow，你可以通过修改 –waline-border 和 –waline-box-shadow 来改变 Waline 的显示，比如：

:root {
  --waline-border: none;
  --waline-box-shadow: 0 12px 40px rgb(134 151 168 / 25%);
}
@media (prefers-color-scheme: dark) {
  body {
    --waline-box-shadow: 0 12px 40px #0f0e0d;
  }
}

更多

如果上述CSS变量不能满足您对Waline样式的自定义要求，您可以停止导入Waline提供的样式暗黑模式暗黑模式，自己制作CSS。