{"id":19198816,"url":"https://github.com/ditdot-dev/dark-mode-example","last_synced_at":"2025-05-09T01:20:46.565Z","repository":{"id":38345297,"uuid":"275832701","full_name":"ditdot-dev/dark-mode-example","owner":"ditdot-dev","description":"Simple and fun dark-mode detection. JavaScript with a user mode toggle.","archived":false,"fork":false,"pushed_at":"2021-11-17T16:37:32.000Z","size":234,"stargazers_count":37,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T10:41:46.112Z","etag":null,"topics":["css-filters","dark-mode","dark-mode-switcher","dark-mode-toggle","dark-theme","example","fun","javascript","prefers-color-scheme","star-wars"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ditdot-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-29T14:04:41.000Z","updated_at":"2024-03-29T12:36:47.000Z","dependencies_parsed_at":"2022-08-28T13:52:32.115Z","dependency_job_id":null,"html_url":"https://github.com/ditdot-dev/dark-mode-example","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/ditdot-dev%2Fdark-mode-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fdark-mode-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fdark-mode-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ditdot-dev%2Fdark-mode-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ditdot-dev","download_url":"https://codeload.github.com/ditdot-dev/dark-mode-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253171931,"owners_count":21865425,"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":["css-filters","dark-mode","dark-mode-switcher","dark-mode-toggle","dark-theme","example","fun","javascript","prefers-color-scheme","star-wars"],"created_at":"2024-11-09T12:24:11.072Z","updated_at":"2025-05-09T01:20:46.523Z","avatar_url":"https://github.com/ditdot-dev.png","language":"CSS","readme":"# Dark Mode with prefers-color-scheme 🌗\n\u003e Enable Dark Mode with prefers-color-scheme media query in JavaScript. Includes a switch to override the mode.\n\nAnimated example of dark mode feature implemented with prefers-color-scheme and checked programatically with `window.matchMedia()` JavaScript method.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/ditdot-dev/dark-mode-example/blob/master/assets/dark-mode-screenshot-2.png?raw=true\" alt=\"Dark Mode Screenshot\"/\u003e\n\u003c/p\u003e\n\n## Features \n\n- detects the preferred mode based on the color scheme preference set at the system level using JavaScript\n- colors are inverted with `filter: invert(100%)`\n- mode switch overrides the preference set in the system\n- activation of dark mode triggers the animation\n- [Live Demo](https://www.ditdot.hr/demo/dark-mode-example)\n\n## Clone\n\nClone this repo to your local machine \n\n```shell\n$ git clone https://github.com/ditdot-dev/dark-mode-example.git\n```\n\n## Full Dark Mode Tutorial and More Examples\n\n- [Dark Mode - The prefers-color-scheme Website Tutorial](https://www.ditdot.hr/en/dark-mode-website-tutorial)\n\n\n## Stay in Touch\n\n* [Twitter](https://twitter.com/ditdot_info)\n* [DITDOT](https://www.ditdot.hr/en)\n\n## License\n\n[MIT](https://github.com/ditdot-dev/dark-mode-example/blob/master/LICENSE) license.\n\nCopyright (c) 2020 - present, DITDOT Ltd.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fdark-mode-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fditdot-dev%2Fdark-mode-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fditdot-dev%2Fdark-mode-example/lists"}