Dark mode refactor

[AmazingRise]

1. Move dark mode judging code from the end of body to head.
2. Use localstorage instead of cookie.
3. Three mode switching: auto, light, dark.
4. Adapt dark mode for integrations.

[Oyyko]

Can dark mode now automatically change the background color of code sections? Because when my website is in dark mode, the background color of the code is white, which is very dazzling. Thanks!

[AmazingRise]

Can dark mode now automatically change the background color of code sections? Because when my website is in dark mode, the background color of the code is white, which is very dazzling. Thanks!

Hi @Oyyko :

Currently we don't have our own syntax highlighter. The function is implemented by Hugo. In the future I may consider introducing Highlight.js to solve the problem.

Thanks for your advice!

[0EAC]

Can dark mode now automatically change the background color of code sections? Because when my website is in dark mode, the background color of the code is white, which is very dazzling. Thanks!

As a temporary solution, you may want to consider modifying the style of [markup.highlight] in config.toml. For reference, you can browse the Chroma Style Gallery. Personally, I have found the doom-one style to work well in Darkmode.

[loikein]

Can dark mode now automatically change the background color of code sections? Because when my website is in dark mode, the background color of the code is white, which is very dazzling. Thanks!

Hi @Oyyko, I was browsing and found your issue. If you would like to do some coding work, this is actually already possible (kinda sorta), and I have implemented it on my blog.

I will now briefly describe the steps, and I am also planning a blog post about it (update: the post is finished: 深入探究 Hugo 代码高亮).

1. Add noClasses: false in markup.highlight in config (example from my site: L19 of config.yaml
2. Generate CSS files for code of the colour schemes of your choice (Hugo doc: Syntax Highlighting
3. Separate the colours and the classes of your CSS file, and add them to your site-wide custom CSS [^1] or the theme CSS directly (example: colours: 0-variables.css; classes: 6-code-fence.css
4. As long as you have two sets of colours, one for :root and one for body.night, they will change automatically according to light/dark theme.

[^1]: I forgot whether this is a feature of this theme or I patched this myself. I am bad at SCSS and did not wish to mess with the theme, please do not laugh at me. But adding custom CSS itself should be easy, and I have read a lot of tutorials out there.

You could see this in action in one of my recent posts: 深入探究 Hugo 短代码.