Add dark mode

[hossainemruz]

https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li

[alex-bezek]

@hossainemruz FWIW this is what it does to my site
Before

After

I think largely it does the job well but there are a few sets of text that need some attention in order for their contrast ratio to be high enough. i assume if we figure those out we could easily turn this on with a feature flag in the config.yml to make this passive?

[yeganathan18]

Hey @hossainemruz can you please tell me for darkmode in which CSS file should be the following code added,

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

[hossainemruz]

I am not sure yet @Yeganathan. Probably, @alex-bezek can help.

[yeganathan18]

Thanks for the reply! @hossainemruz , Let me check with @alex-bezek

[alex-bezek]

@yeganathan18 if you add a css file to this location, it will get picked up and included in the build
https://github.com/alex-bezek/blog/blob/master/static/assets/css/style.css

[yeganathan18]

@alex-bezek Thanks for the help :)

[donfiguerres]

I'm experimenting with using DarkReader to enable dark mode in toha. My branch is here.
So far, the result is pretty decent. Not sure if that's biased because I'm using the DarkReader browser plugin. I think a native CSS for dark mode is faster but still, this gets the job done with minimal effort.

Website URL: https://donfiguerres.github.io/

[donfiguerres]

Hi everyone! I've made a pull request to support dark theme via darkreader. Hoping that it gets approved.
I'm planning to add it to the toha documentation if the pull request gets approved.