Skip to content

velijv/FluCSS

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

FluCSS by Veli

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-scheme CSS media feature was usable. But it is still relevant for gradual color temperature changing, instead of sharp boolean πŸŒ‘ dark or β˜€οΈ light.

😎 Preview demo

Preview

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

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

How to use it:

  1. Include jQuery
  2. Include SunCalc js
  3. Include flucss.min.js and flucss.css
  4. call $("html").flucss(); // for any element you want, mostly you want "html" or "body"
πŸŒ“ Color palette

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.

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.

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.

About

CSS styles based on πŸŒ‡ sunset and πŸŒ„ sunrise for visitor location. Like πŸ”†F.luxπŸ”…, for the web. (night light / night shift)

Topics

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published