{"id":20937629,"url":"https://github.com/velijv/flucss","last_synced_at":"2026-05-01T05:31:49.599Z","repository":{"id":108885381,"uuid":"82824740","full_name":"velijv/FluCSS","owner":"velijv","description":"CSS styles based on 🌇 sunset and 🌄 sunrise for visitor location. Like 🔆F.lux🔅, for the web. (night light / night shift)","archived":false,"fork":false,"pushed_at":"2023-08-27T17:17:44.000Z","size":337,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T20:22:47.116Z","etag":null,"topics":["ambient-light","daylight","night-light","night-shift","sun","suncalc"],"latest_commit_sha":null,"homepage":"https://veli.ee/flucss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/velijv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"velijv","patreon":"velijohan","liberapay":"veli"}},"created_at":"2017-02-22T16:09:02.000Z","updated_at":"2022-06-17T11:22:15.000Z","dependencies_parsed_at":"2024-11-18T22:38:19.833Z","dependency_job_id":"d4bc67ee-43d0-40e4-be91-4610092c70c8","html_url":"https://github.com/velijv/FluCSS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velijv%2FFluCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velijv%2FFluCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velijv%2FFluCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velijv%2FFluCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/velijv","download_url":"https://codeload.github.com/velijv/FluCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243330323,"owners_count":20274039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ambient-light","daylight","night-light","night-shift","sun","suncalc"],"created_at":"2024-11-18T22:38:14.616Z","updated_at":"2025-12-28T07:29:07.388Z","avatar_url":"https://github.com/velijv.png","language":"JavaScript","funding_links":["https://github.com/sponsors/velijv","https://patreon.com/velijohan","https://liberapay.com/veli"],"categories":[],"sub_categories":[],"readme":"# [FluCSS by Veli](http://veli.ee/flucss/)\njQuery plugin for CSS styles based on sunset and sunrise for visitor location. Like [F.lux](http://justgetflux.com/) / night light / night shift for the web.\n\n\u003e 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**. \n\n## 😎 [Preview demo](http://veli.ee/flucss/)\n\n[![Preview](https://repository-images.githubusercontent.com/82824740/f7676cc0-90aa-4689-9b80-8d24294f6531)](http://veli.ee/flucss/)\n\n\nEasier on the eyes for night-time reading, useful for blogs and newspapers by eliminating blue light. Read more on [F.lux website](http://justgetflux.com/).\n\nOptions: Dimmed at night, Full black at night \n\n\n\u003cdetails\u003e\n  \u003csummary\u003e🔆 How it works\u003c/summary\u003e\n  \n## How it works:\n1. Get your location (latitude, longitude) via HTML5 Geolocation API\n2. Find sun states for location via SunCalc js\n3. Calculate closest sun state for current time\n4. Add CSS class on any element based on closest sun state\n5. Use localStorage to prevent page flickering while navigating or reloading\n\n\u003c/details\u003e\n\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e🔅 How to use it\u003c/summary\u003e\n  \n## How to use it:\n1. Include jQuery\n2. Include [SunCalc js](https://github.com/mourner/suncalc)\n3. Include flucss.min.js and flucss.css\n4. call $(\"html\").flucss(); // for any element you want, mostly you want \"html\" or \"body\"\n  \n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e🌓 Color palette\u003c/summary\u003e\n\n## Color palette\nColors are modeled by dividing sun states into 4 groups — but you can add more variation if you need.\n\n### Overlay color\nOverlay color has eliminated blue channel - rgb(200,125,0) - keeping red and green, while maintaing contrast between background and text.\n\nAll color combinations pass the [WebAIM Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Click on each color to validate. \n\n### Normal mode\nStart value: pure white, End value: pure gray (middle between black and white), with 2 equal distance steps in between. Overlaid by #c27c00.\n\n### Full black night mode\nStart value: pure white, End value: pure black, with 2 equal distance steps in between. Overlaid by #c27c00. Last 2 background colors get white text. \n\n  \n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelijv%2Fflucss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvelijv%2Fflucss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelijv%2Fflucss/lists"}