Hummingbird Dark mode / change theme colors?

[Ronnie79]

Hi,

I have Prestashop 9 with hummingbird 1.0.1 theme. How can I enable Dark Mode? I read that it could be easily done by editing on of the scss files? If so, which file and what to add? 

Second option, to change each color individually, in which file can I find the variables to change? 😊
(prefer to learn it rather than using a module)

Many thanks!

 

[Ray UK]

To enable the dark mode there is a lot of CSS to edit in the main theme.css

It would be much simpler if the main theme used the CSS variables that bootstrap provides.  Also, most modules that you install, the creators like to write their own css so they also need editing.

Currently, in just the hummingbird theme there are:

• 264 colors
• 68 background colors
• 162 font sizes
• 123 margins
• 218 margin-bottoms
• .... and a lot more repeated values

Probably all of these could be set using variables, but for some reason they are all hard coded values.

If all developers stuck to using the bootstrap variables where possible, then it would make like so much easier.

I have added the dark mode to the site in my signature. Visit it on a mobile and switch to dark mode using your phone to see it work.

Edited 21 hours ago by Ray UK (see edit history)