Add optional dark mode button/switch

Actually, this theme doesn't have a button or a switch to switch dark mode. Dark mode is fully automated. It follows your browser's preferences and changes automatically.

But I think I may need to add an optional button to switch. I'll add it in the future.

Thanks for your suggestion 😃

Actually, this theme doesn't have a button or a switch to switch dark mode. Dark mode is fully automated. It follows your browser's preferences and changes automatically.

But I think I may need to add an optional button to switch. I'll add it in the future.

Thanks for your suggestion 😃

If I want to write a dark mode switcher button, where should I put the js codes?

Suppose, I write a floating button on css and add it to footer.css and add html into footer.ejs
now where to put the js codes? Should it be inside main.js?

If I want to write a dark mode switcher button, where should I put the js codes?

Suppose, I write a floating button on css and add it to footer.css and add html into footer.ejs
now where to put the js codes? Should it be inside main.js?

Dark mode is realized in source/css/var.css with prefers-color-scheme. You can't switch dark mode by adding or removing the class name of <body>. Before creating a button to switch the class name, you need to add the class names into var.css.

Also, you can take a look at how GitHub realizes this feature.

1e5f5b1 added this feature.

To enable this, update and edit:

hexo-theme-cupertino/_config.yml

Line 13 in 1e5f5b1

color_scheme: auto

hexo-theme-cupertino/_config.yml

Line 16 in 1e5f5b1

show_color_scheme_toggle: true

Or visit my blog to test this feature. 😃