[Idea] Dark theme

[jeremydobber]

The problem

I would love to see the option for a site administrator to enable a dark mode on the hummingbird theme (natively) so that the site follows the user's global settings.

Having worked with NextJS in the past I like how they handle this. Tailwindcss' website also implements this behaviour.

We could also add buttons in the footer to let the user choose.

It actually might also be a step towards partial/better accessibility. I don't want to mix these topics here but I recently talked with a person who needs accessibility tools and she said that dark modes help her significantly (as an alternative if the required tools are not present).

The solution

Adding the necessary selectors and classes to the theme's css.
Adding a feature button to the theme's settings admin page.
Adding a toggle button on the frontend in the footer for example.

Additional context

I haven't looked into how to get the users' system default light/dark mode to follow, but of course that would be the best solution.

Do you plan to work on this subject?

• I'm willing to contribute a formal specification.
• I'm willing to provide any wireframes or design assets required for this feature.
• I'm willing to submit a Pull Request that implements this feature.
• I'm willing to help verify that the implemented feature works as intended and produces no unintended side effects.

[jeremydobber]

I guess I'll wait for PS9.1 with Hummingbird 2. - Just read the release notes. Sorry.

[MerseyRay]

The problem with the dark mode on this theme is that so many colours are set manually throughout the theme, and modules.

(same goes for margins, paddings, border-radius, alignment etc. bootstrap has specific classes but they are not used)

If the theme just used variables, eg —col-primary, —col-secondary in their respective classes then it would be At least 95% quicker to adapt the dark mode.

I do this on my themes as can be seen live on northwestecigs.uk

[tblivet]

Hi,

Hummingbird v2 introduces many improvements, including a proper implementation based on native Bootstrap functionality. This also applies to dark mode.

You can “activate” dark mode by uncommenting this line (based on media query):

hummingbird/src/scss/bootstrap/overrides/variables/_variables.scss

Line 54 in fd25e7f

// $color-mode-type: media-query;

and then setting your environment to dark mode.

Alternatively, you can use the data-bs-theme="dark" attribute as described in the official documentation:
https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode

However, we do not plan to add a native toggle inside Hummingbird. Most merchants have their own visual identity, and in many cases, a theme switcher is not appropriate for an e-commerce website. That’s why we provide a dark mode–ready base built on Bootstrap for those who want to build a dark theme, but we do not intend to go further than that at this stage.

[jeremydobber]

Thank you for these tips and tricks.
I notice a lot of PrestaShop websites using the default theme have usually very few customization and that is why I thought the automatic dark-mode would benefit them. But I totally understand your arguments and approach and the solutions you provide actually fit my needs.
I'll see how it goes when I update for PS9.1 and Hummingbird v2.
Thanks.