feat: dark theme

[atsuyaw]

Resolves #185, resolves #525 (relational topics: #315, #526).

Feel free to post any comments including on the default color scheme ;)

[igor-baiborodine]

@atsuyaw, thank you very much! It's a big pull request and will take me time to review.

[igor-baiborodine]

There should not be duplicated _dk-*.scss files. The only new SCSS file should be dark-theme.css which is a copy of theme.css but with different values for customizable variables.

[atsuyaw]

Thanks for helping!
Let me try to "polish" the colors prior to merging.

[atsuyaw]

@igor-baiborodine Now I made a modification on the colors. Would you check again?
Thank you!

[igor-baiborodine]

@atsuyaw, here is the Bilberry Sandbox deployed using your branch. You can compare it with the Bilberry Sandbox deployed using the latest release.

• https://deploy-preview-45--bilberry-sandbox.netlify.app/
• https://www.bilberry-sandbox.kiroule.com/
  The light mode should be tested for regression. Here I spotted the first one: the line connecting the post icons. Also, the theme mode selection is not saved, and going to a different page with the dark mode selected defaults to the light mode.

@Lednerb, @Sp-cy, if you have time, can you check the proposed color scheme for the dark theme mode?

[igor-baiborodine]

@atsuyaw, please see my comment above.

[Lednerb]

Hello all,

thanks for your great work!

The colors are OK for me in general, but I think some adjustments should be added:

1: The lighter color coming from above will add some more contrast
2: I think the meta line should also have a bit more contrast, like the font in the article footer
3: The background is too bright, maybe more like GitHub inline code in the dark mode?

Additionally the search box should also be adjusted before the final merge.

And hover states on links are not readable:

---

The color theme switcher is very neat!

[igor-baiborodine]

@atsuyaw, the Bilberry Sandox was updated with your latest commits. The only issue I see now is the flickering that happens when changing pages in the dark mode.

Screencast.from.2023-11-13.05.53.09.PM.webm

[atsuyaw]

@igor-baiborodine,
Thanks for your cooperation and pointing out!
I need to modify also the giscus theme behavior with the global dark mode.

[igor-baiborodine]

The connection line should be the same color, i.e., the same as in the upper part.

There is still the issue of flickering when using the Chrome and Opera browsers. In Firefox, it works fine, though.

[atsuyaw]

Here, the switching mechanism has been reconstructed.
Please try to check the improvement; the Network throttling mode in inspecting tools of Chrome was useful in my cording.

[igor-baiborodine]

I updated the sandbox, and there is no flickering, but it's going back to the light mode when I change a page after selecting the dark mode.

https://deploy-preview-45--bilberry-sandbox.netlify.app/

[igor-baiborodine]

I updated the Sandbox, and everything works fine, but there is a minor issue with showing js/check-theme-prefer.js in the top left corner.

https://deploy-preview-45--bilberry-sandbox.netlify.app/

[atsuyaw]

Huuum, i saw it on the sandbox, however this issue wasn't observed in my local environment. Now i'm trying fix this line.
Let me check on the sandbox. I am sorry for inconvenience...!

[igor-baiborodine]

@atsuyaw, great job! Thank you!