umputun / remark42

comment engine
https://remark42.com
MIT License
4.91k stars 385 forks source link

support color-scheme #1430

Open akellbl4 opened 2 years ago

akellbl4 commented 2 years ago

Cases

Auto

var remark_config = {
  theme: 'auto'
}
color-scheme: light dark;

Add support for auto switch between themes

Dark

var remark_config = {
  theme: 'dark'
}
color-scheme: dark;

Light

var remark_config = {
  theme: 'light'
}
color-scheme: light;
OnkelTem commented 10 months ago

Sorry, so can it be fixed? Because the related issue was closed unresolved: https://github.com/umputun/remark42/issues/1662

Currently I see this:

image

hndrk-themer commented 2 months ago

as a workaround, i have added the autoswitch by using:

theme: window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches ? "dark" : "light",

to let it change automatically if you switch from light to dark without reloading the page i've added:

window.matchMedia('(prefers-color-scheme:dark)').addEventListener('change', event => {
        const newColorScheme = event.matches ? "dark" : "light";
        window.REMARK42.changeTheme(newColorScheme);
    }); 

to it. maybe you can add it directly into remark with the "auto" tag

it works perfectly like this on my blog