Closed ghost closed 5 years ago
好啊
还有个小提议,夜间模式可以更灵活些,在22:00-6:00时主题会自动切换夜间模式,当然这个可以是开关的,期待您的完善。
已支持,这样配:
appearance:
# Mode
# Specify `dark` to apply a built-in dark mode,
# or fully custom colors: `[foreground color, card background, border-color]`
# Note, the middle value can be any valid css background value
# `mode: dark` is equivalent to `mode: ['#d8d8d8', '#252525', '#444']`
mode:
如果想动态设置,需要自己额外写点代码,source/_theme.js 这个脚本是用来生成 css 的,可以直接在浏览器端执行,会在 window.__inside__
上添加一个 $appearance
方法,参数为配置文件的 appearance
对象。
代码类似这样,仅供参考:
themes/inside/_config.yml
# 使用主题提供的 plugins 加载脚本
plugins:
# 由于 hexo 不会将下划线开头的文件复制到 public 目录,
# 所以需要额外复制 _theme.js 并重命名为非下划线开头的名称
- theme.js
- position: sidebar
template: snippets/auto-theming.html
themes/inside/snippets/auto-theming.html
<script>
const theme = __inside__.$appearance
if (theme && it's night) {
const darkCss = theme({
// 你的其他配置
...
mode: 'dark',
// 也支持自定义
mode: [文字颜色, 卡片元素背景, 线条颜色],
})
// 使用 darkCss 替换当前主题
}
</script>
_config.yml appearance: mode: dark不好使呢
mode
参数去掉了,为了简单化,可以像下面这样配 dark mode
accent_color: "#f44336"
foreground_color: "#d8d8d8"
border_color: "#444"
background: "#202020"
sidebar_background: "#262626"
card_background: "#252525"
希望主题也有一款夜间样式,或者可以自定义一些颜色控制,比如全局字体等。