ikeq / hexo-theme-inside

🌈 SPA, Flat and clean theme for Hexo https://blog.oniuo.com/theme-inside
MIT License
680 stars 96 forks source link

night mode #99

Closed ghost closed 5 years ago

ghost commented 5 years ago

希望主题也有一款夜间样式,或者可以自定义一些颜色控制,比如全局字体等。

ikeq commented 5 years ago

好啊

ghost commented 5 years ago

还有个小提议,夜间模式可以更灵活些,在22:00-6:00时主题会自动切换夜间模式,当然这个可以是开关的,期待您的完善。

ikeq commented 5 years ago

已支持,这样配:

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>
311303 commented 5 years ago

_config.yml appearance: mode: dark不好使呢

ikeq commented 5 years ago

mode 参数去掉了,为了简单化,可以像下面这样配 dark mode

accent_color: "#f44336"
foreground_color: "#d8d8d8"
border_color: "#444"
background: "#202020"
sidebar_background: "#262626"
card_background: "#252525"