How it works:

1. Get your location (latitude, longitude) via HTML5 Geolocation API
2. Find sun states for location via SunCalc js
3. Calculate closest sun state for current time
4. Add CSS class on any element based on closest sun state
5. Use localStorage to prevent page flickering while navigating or reloading

How to use it:

1. Include jQuery
2. Include SunCalc js
3. Include flucss.js and flucss.css from GitHub
4. 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

Overlay color has eliminated blue channel - rgb(200,125,0) - keeping red and green, while maintaing contrast between background and text.

• #c27c00

All color combinations pass the WebAIM Color Contrast Checker. Click on each color to validate.

Normal mode

Start value: pure white, End value: pure gray (middle between black and white), with 2 equal distance steps in between. Overlaid by #c27c00.

• #fff
• #ead4a7
• #d6a84e
• #c27c00

Full black night mode

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.

• #fff
• #d6a84e
• #815300
• #000