Add Dark mode

[gianpaj]

No description provided.

[issue-label-bot]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.98. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[guyus15]

Hi, can I work on this?

[gianpaj]

Of course @guyus15 !

I think we need some toggle button.
for example:

• https://stackoverflow.blog/ on the top right

resources:

• https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/

This button has to:

• not only toggle the CSS for the site but also change the map styles

[guyus15]

Of course @guyus15 !

I think we need some toggle button.
for example:

• https://stackoverflow.blog/ on the top right

resources:

• https://stackoverflow.blog/2020/03/31/building-dark-mode-on-stack-overflow/

This button has to:

• not only toggle the CSS for the site but also change the map styles

So you would like the map to be a dark theme as well?

[gianpaj]

@guyus15 yes, please

At the moment the Map Style used is: src/components/BlueEssence.js

https://snazzymaps.com/style/61/blue-essence

this is hardcoded in :
src/components/ReactiveGoogleMap.js

https://github.com/helpmap/helpmap.io/blob/master/src/components/ReactiveGoogleMap.js#L13

const BlueEssence = require('./BlueEssence');

But if this is a big task, happy to split this into 2

Regarding which Dark Map Style we could pick one of these:

• https://snazzymaps.com/style/2/midnight-commander
• https://snazzymaps.com/style/30/cobalt
• https://snazzymaps.com/style/287720/modest

I'll ask @krokubik (Designer) to chime in regarding this

[guyus15]

@gianpaj Okay,

So far I've added a button to toggle the dark mode.
Forked repository: https://github.com/guyus15/helpmap.io

[gianpaj]

Great! let me know when you want me to have a look

Alex said we use this map style https://snazzymaps.com/style/20053/multi-brand-network

[gianpaj]

@guyus15 how's it going? I see from your last commit (guyus15@988edf1) you're already setting the CSS variables to change the colours. Nice!

When you think your branch is ready to be reviewed, please do create PR in here and I'll be happy to review it 👍

By the way, you can find me on Telegram with my same username to chat – if you'd like to chat privately and a bit faster