jQuery plugin for CSS styles based on sunset and sunrise for visitor location. Like F.lux / night light / night shift for the web.
Note: this was originally created before the
prefers-color-schemeCSS media feature was usable. But it is still relevant for gradual color temperature changing, instead of sharp boolean 🌑 dark or ☀️ light.
Easier on the eyes for night-time reading, useful for blogs and newspapers by eliminating blue light. Read more on F.lux website.
Options: Dimmed at night, Full black at night
🔆 How it works
- Get your location (latitude, longitude) via HTML5 Geolocation API
- Find sun states for location via SunCalc js
- Calculate closest sun state for current time
- Add CSS class on any element based on closest sun state
- Use localStorage to prevent page flickering while navigating or reloading
🔅 How to use it
- Include jQuery
- Include SunCalc js
- Include flucss.min.js and flucss.css
- call $("html").flucss(); // for any element you want, mostly you want "html" or "body"
🌓 Color palette
Colors are modeled by dividing sun states into 4 groups — but you can add more variation if you need.
Overlay color has eliminated blue channel - rgb(200,125,0) - keeping red and green, while maintaing contrast between background and text.
All color combinations pass the WebAIM Color Contrast Checker. Click on each color to validate.
Start value: pure white, End value: pure gray (middle between black and white), with 2 equal distance steps in between. Overlaid by #c27c00.
Start value: pure white, End value: pure black, with 2 equal distance steps in between. Overlaid by #c27c00. Last 2 background colors get white text.