{"id":21240629,"url":"https://github.com/chrisnajman/accessible-darkmode-lightmode-toggle-buttons","last_synced_at":"2025-06-15T14:34:58.022Z","repository":{"id":213849164,"uuid":"735081579","full_name":"chrisnajman/accessible-darkmode-lightmode-toggle-buttons","owner":"chrisnajman","description":"Choose the default state (Light Mode or Dark Mode) of a page. Toggle between states.","archived":false,"fork":false,"pushed_at":"2024-01-16T17:20:35.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T19:36:38.329Z","etag":null,"topics":["css-imports","css-nesting","dark-mode","html-css-javascript","light-mode","svg-icons","svg-sprites"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/accessible-darkmode-lightmode-toggle-buttons/","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/chrisnajman.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-23T15:45:05.000Z","updated_at":"2023-12-23T16:19:31.000Z","dependencies_parsed_at":"2023-12-23T17:33:11.010Z","dependency_job_id":"939c9f9a-1309-4a93-acb8-e3a1d1fa3c97","html_url":"https://github.com/chrisnajman/accessible-darkmode-lightmode-toggle-buttons","commit_stats":null,"previous_names":["chrisnajman/accessible-darkmode-lightmode-toggle-buttons"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/accessible-darkmode-lightmode-toggle-buttons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681002,"owners_count":20330155,"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-imports","css-nesting","dark-mode","html-css-javascript","light-mode","svg-icons","svg-sprites"],"created_at":"2024-11-21T00:52:12.018Z","updated_at":"2025-03-15T03:43:42.896Z","avatar_url":"https://github.com/chrisnajman.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessible Dark Mode / Light Mode Toggle Buttons\n\nThis is an updated and improved version of [Accessible Dark Mode Toggle Button](https://chrisnajman.github.io/accessible-dark-mode-toggle-button).\n\n## Description\n\nTwo pages, one featuring a dark mode default theme toggle button, the other a light mode default theme toggle button.\n\n## Accessibility\n\n- The `ARIA-pressed` attribute indicates the button state to screen readers.\n- The `ARIA-hidden` attribute hides the SVG icon and CSS `content` text from screenreaders.\n- Keyboard navigation via the `Tab` key focuses the button.\n- Visual cues (icons, on/off text) are provided for sighted users.\n\n### WAVE Web Accessibility Evaluation Tools Report\n\n- [Automated accessibility analysis results](https://wave.webaim.org/report#/https://chrisnajman.github.io/accessible-darkmode-lightmode-toggle-buttons/)\n\n## CSS\n\n- CSS variables are used for the dark and light themes.\n- CSS nesting is used to structure the styles.\n\n## SVG\n\n- The icons are referenced via an SVG sprite.\n\n## Javascript\n\n- ES6 (no transpilation to ES5)\n\n- Button state is saved to local storage, so the chosen theme persists.\n\n### Local Storage\n\nOnce you've clicked the 'Dark Mode' link and switched it to **off** or **on**, the theme option is saved\nto local storage. The theme will persist after you refresh the page or close it down and reopen it. Each time\nyou click the button the theme option is saved.\n\n#### Clearing local storage\n\nDuring development, you might want to clear local storage to check that the default state is working.\nTo do so:\n\n- Right-click on the page, then click 'Inspect'.\n- Click on 'Applications'.\n- Right-click on \"**DARKMODE-DEFAULT-switcher**\" or \"**LIGHTMODE-DEFAULT-switcher**\"\n- Click 'delete'.\n- Force refresh the page (Control+F5).\n\nThe default page theme will now be restored.\n\n**Note**: the above instructions are for Chrome on Windows 10. However, most browsers follow a\nsimilar pattern.\n\n## Sources\n\n- [`ARIA-pressed` information (and more) from Inclusive Components/Toggle Buttons](https://inclusive-components.design/toggle-button/)\n- [Sun and Moon icons from Free Box Icons (click SVG tab for code))](https://boxicons.com/?query=Moon)\n\n## Testing\n\n- Tested on:\n  - Windows 10\n    - Chrome\n    - Firefox\n    - Microsoft Edge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Faccessible-darkmode-lightmode-toggle-buttons/lists"}