Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: add automatic switching between light and dark UI modes #6

humphd opened this issue Mar 14, 2018 · 1 comment


Copy link

@humphd humphd commented Mar 14, 2018

Right now the UI is very bright, and uses a lot of light colours:

screen shot 2018-03-14 at 11 47 29 am

It would be nice if the app automatically changed to use a darker palette when the sun goes down or at night-time. It's a pretty common feature for apps to provide modes for day (i.e., bright light conditions) and night (i.e., low or no light):

There's lots of existing software that can do this sort of thing, for example f.lux. Let's add the ability to automatically switch modes based on current light conditions. Here are some things to consider:

  • The map system we're using is called Leaflet. It supports lots of different tile provides to draw the map. We can pick 2 that work for low-light or bright-light conditions.
  • We don't want to add unnecessary buttons or menus if we can do things automatically. We should be able to switch between the two modes automatically. One way would be to do something based on time of day. However, since we're building a geolocation app, we know where the user is in the world, and we know the current time. Together that should be enough for us to know what the current sun/light conditions are. There are some open source solutions, for example:
  • We're using overlay icons on the map from the Material Icon set, for example: the lock. The icons are available in both black and white versions, so we should be able to add both options, and use code to switch between them based on the current mode.
  • Lots of mapping apps that support dark vs. light modes will switch on the fly (i.e., if the user has it open for a few hours, and in the middle it needs to change modes as the sun goes down). It would be cool if we had code that dealt with automatic switching while the app is open vs. just when we startup.

When we do this, let's try to isolate all of our "mode" management/switching code into its own module (i.e., .js file). Then, other parts of the code that need to do things based on the mode can use public getters (e.g., .getCurrentMode()), events (e.g., .on('modechange', ...)), etc. from the module.

There might already be some existing code we can use on npmjs (i.e., that we can npm install and use) for things like checking sun conditions for a given geolocation and time. Feel free to use any open source code that helps you accomplish this.

Make sure that your code makes use of the built-in eslint and prettier tooling for proper styling.

irrationalRock added a commit to irrationalRock/bridge-troll that referenced this issue Mar 17, 2018
josechoy added a commit to josechoy/bridge-troll that referenced this issue Mar 19, 2018
alexglazkov9 added a commit to alexglazkov9/bridge-troll that referenced this issue Apr 5, 2018
…r changes, locks' color changes, current location icon's color cahnges. Modes switch on the fly. This commit closes issue humphd#6.

This comment has been minimized.

Copy link

@mon369 mon369 commented Apr 16, 2018

Thank you for publishing this issue, David. I will work on this and propose a solution by the end of the day.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.