Dark mode feature

[Evomatic]

I think it would be great to have the option to view in dark mode. Generally users prefer having the ability to use dark or light mode. Dark mode is a pretty common thing for most websites these days and having this option only makes the website more popular (Which we want!). I personally found my eyes getting a bit tired half way through the article. Also there was a comment from one of ThePrimeTime's viewers in his 2023 JS rising Stars video that inspired me to create this issue 😆

If dark mode is something we can add I would be interested in working on this and happy to discuss more 👍

[michaelrambeau]

I love that idea! 😻

Maybe it's time for a big redesign as the site has not changed since the beginning.

Another reason is the consistency with Best of JS app, where we have a dark mode.

Let me finish an experiment I'm doing with the framework Astro because we need to have a stable foundation:
keeping Next.js would make things simpler as we could use the same approach but I was tempted to use Astro to make the initial page load as fast as possible.

[michaelrambeau]

About the Astro way to handle the theme, this template uses a vanilla JS solution, with a custom element <theme-toggle>: https://github.com/withastro/astro/blob/main/examples/portfolio/src/components/ThemeToggle.astro

We could use shadcn/ui components, as there is an official integration, but that would mean React components everywhere (still investigating...)

[Evomatic]

I watched a few videos about Astro and did some reading. My interest is rising! it is very cool how flexible Astro can be. Write HTML/CSS by default and if you NEED to use JS or dynamic content, it can be used in isolation in the areas where it is needed! I am curious, it sounds like you are hesitant about introducing React to Astro. Is there a reason as to why we shouldn't?

[michaelrambeau]

In principle, to build pages you work mainly with .astro templating language (which is like JSX) and when you need interactivity you can add "islands" of interactivity using the framework of your choice.

This pattern is great if you need a specific widget somewhere in your page, you can make the JavaScript loaded only when the widget is revealed in the page.
However if we use React for everything (buttons, cards) that means that app would be made of React components wrapped by a few astro components when you need to access Astro API (to get data for the collections).
It could work I wanted to make as fast as possible maybe my concern is not valid since everything is rendered server-side.

Another point is that I wanted to add interactivity using htmx library and Astro "partials", I'm not sure it plays well with React, when you use React state to show/hide elements for example, you can't use htmx attributes.