Dark mode implementation using .js fundamentals
All the UI components have pre-configured css classes associated with them. One each for each mode. The components are dynamically switched from 1 class to another based on two triggers:
- User switches the display mode
- The display mode switches based on a pre-set time trigger
toggleBackgroundColor() when invoked, toggles the mode. It is called when user initiates mode-change.
The timer call back
timeoutTriggered() is set with for the time to next desired mode change pre-set time.
Current time: 18:20 (66,000,000 ms)
Dark mode trigger time: 21:00 (75,600,000 ms)
Timer call back: 9600000 ms
Each time it is invoked,
- It invokes
toggleBackgroundColor()to change the display mode
- It looks forward for the next pre-configured desired mode change and sets a timer call back.
When the pre-set time is changed from UI,
- The associated timer call back is scrubbed using
- It computes and sets a new timer call back