自动夜间模式组件

[mbcahyono (Muhlis Cahyono)]

Following up the discussion here:

Automatic Night Mode Plugin

Some users have been asking about automatic switching between a light and a dark theme. Could this be accomplished with a plugin? I assume this would need two parts: a theme component with a javascript switching themes based on local time a Discourse plugin adding options to the user preferences page: turn night mode switching on/off, choose nighttime theme, set time nighttime time period How difficult would it be to code? As in, how much would it cost?

I made a theme component that will automatically switch to night theme based on user preferences. It’s currently work on a per-browser basis.

Repository

https://github.com/muhlisbc/discourse-automatic-night-mode-theme

Screenshot:

Installation

Add this component to each theme installed.

Known Issues

• I’ve received a report of the component making all navigation cause full reloads. Upon navigating between different pages every click caused a full refresh instead of an in-app navigation. I have not been able to reproduce this, so please post reproduction steps if you run into this.

Feedback is welcome and thanks to Discourse team for sponsoring this work

[terraboss (Markus)]

不错的主题组件。但我无法选择激活的时间范围。该字段似乎仅适用于美国时区？

能否添加 macOS 的浅色/深色模式检测功能？

[mbcahyono (Muhlis Cahyono)]

@terraboss

看起来该字段仅适用于美国时区？

我确信这是本地（设备）时间。

@terraboss

是否可以添加 macOS 浅色/深色模式检测？

针对该功能有另一个主题：

Dark Mode Automatic Theme Switcher

Discourse now supports Automatic Dark Mode color scheme switching in core, this component is now deprecated and should no longer be used. Repository: https://github.com/pmusaraj/discourse-dark-mode Installation instructions: Installing a theme or theme component What this does? This component allows automatic switching to a dark theme when the browser is set to dark mode. This works for logged-in users only on all browsers that support the prefers-color-scheme media query. By de…

[terraboss (Markus)]

@mbcahyono

我确定这是本地（设备）时间。

我无法手动输入我的本地时间。没有任何反应。

@mbcahyono

还有一个相关的主题：

感谢这个提示！我之前就把这个收藏起来了：：see_no_evil:

不幸的是，目前它无法正常工作。我需要先进行一些故障排查……

[jrgong]

这个主题组件可以与另一个组合吗？

Theme Switcher Component

Any thoughts about making the bottom smaller? When using additional component, it takes a lot of space in the header. For example I like the dark mode button in this ghost theme at top right:

这样用户就可以在需要时覆盖自动暗色模式。

[mbcahyono (Muhlis Cahyono)]

可以，但这可能会导致意外行为。

[jrgong]

看起来这个组件出问题了。每次我在个人资料设置中启用它并刷新页面后，复选框中的勾选标记就会消失，并且它会被禁用。

[codinghorror (Jeff Atwood)]

我相信 @pmusaraj 正在开发比这更加自动化的东西。

[pmusaraj (Penar Musaraj)]

Core 现在基于设备的深色模式 UI 提供了类似的功能，请参阅 自动深色模式配色方案切换。