Automatic Night Mode Component

[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]

좋은 테마 컴포넌트네요. 하지만 활성화할 시간 범위를 선택할 수 없어요. 이 필드가 미국 시간대만 지원하는 것 같네요?

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]

@mbcahyono

확실히 로컬(기기) 시간일 겁니다.

로컬 시간을 수동으로 입력할 수 없습니다. 아무런 반응이 없어요.

@mbcahyono

그에 대해 다른 주제가 있습니다:

힌트 감사합니다! 이전에 북마크에 저장해 두었거든요

불행히도 지금은 작동하지 않습니다. 먼저 몇 가지 문제를 해결해야 할 것 같습니다…

[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를 기반으로 한 유사한 기능이 추가되었습니다. 자세한 내용은 자동 다크 모드 색상 스키마 전환을 참고하세요.