{"id":18852856,"url":"https://github.com/moderrek/vanilla-theme","last_synced_at":"2026-02-01T01:06:33.169Z","repository":{"id":250950448,"uuid":"835943242","full_name":"Moderrek/vanilla-theme","owner":"Moderrek","description":" An example of how to create light and dark mode for vanilla HTML","archived":false,"fork":false,"pushed_at":"2024-07-30T21:52:31.000Z","size":9,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T17:50:02.551Z","etag":null,"topics":["css","dark","dark-theme","frontend","html","javascript","js","light","mode","persistent-storage","theme","theme-switcher","ui","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://moderrek.github.io/vanilla-theme/","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/Moderrek.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":"2024-07-30T20:50:47.000Z","updated_at":"2025-06-11T19:52:07.000Z","dependencies_parsed_at":"2024-07-31T01:55:50.531Z","dependency_job_id":null,"html_url":"https://github.com/Moderrek/vanilla-theme","commit_stats":null,"previous_names":["moderrek/vanilla-theme"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Moderrek/vanilla-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moderrek%2Fvanilla-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moderrek%2Fvanilla-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moderrek%2Fvanilla-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moderrek%2Fvanilla-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Moderrek","download_url":"https://codeload.github.com/Moderrek/vanilla-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moderrek%2Fvanilla-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28963242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T00:42:38.011Z","status":"ssl_error","status_checked_at":"2026-02-01T00:42:35.920Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","dark","dark-theme","frontend","html","javascript","js","light","mode","persistent-storage","theme","theme-switcher","ui","vanilla-javascript"],"created_at":"2024-11-08T03:41:57.220Z","updated_at":"2026-02-01T01:06:33.156Z","avatar_url":"https://github.com/Moderrek.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Vanilla Theme\n\n![License](https://img.shields.io/github/license/Moderrek/vanilla-theme)\n![Issues](https://img.shields.io/github/issues/Moderrek/vanilla-theme)\n![Forks](https://img.shields.io/github/forks/Moderrek/vanilla-theme)\n![Stars](https://img.shields.io/github/stars/Moderrek/vanilla-theme)\n\nThis repo provides a simple **example** of a themes implmented using **pure vanilla** HTML, JS and CSS.\nIt demonstrates how to create themes and a theme switches that respects the user's\nsystem preference and saves their choice for future visits.\n\n![image](https://github.com/user-attachments/assets/9b5c158e-3d4c-46d7-9a9f-3b7f6ea1f07c)\n![image](https://github.com/user-attachments/assets/2b64203d-6d14-4a96-99a4-3d65f7249ad2)\n![image](https://github.com/user-attachments/assets/440adaca-394a-4500-8db8-7bc6ebcdf671)\n\n\n## 🗺️ Overview\n\nThe example showcases:\n- 🔎 **Automatic theme detection**: Automatically applies the system's preferred color scheme. (light or dark mode)\n- ⚙️ **Theme toggle**: Allows users to manually switch between light and dark themes.\n- 💾 **Persistent user preference**: Saves the user's theme choice using local storage, so their preference is preserved across page reloads.\n- 👀 **Listens to the theme system**: If the system theme changes, the theme will be automatically changed on the website.\n\n## 📂 Files Included\n\n1. **`index.html`**: Basic HTML structure with a theme toggle button.\n2. **`style.css`**: Example CSS with styling for LIGHT and DARK modes.\n3. **`script.js`**: JavaScript to handle theme switching, system theme and persistent storage.\n\n## 💻 Usage\n\n1. **Clone the repository**\n   ```sh\n   git clone https://github.com/Moderrek/vanilla-theme\n   ```\n2. **Enter the project directory**\n   ```sh\n   cd vanilla-theme\n   ```\n3. **Open `index.html` in your browser**\n4. **Explore files and learn.**\n\n# 🤝 Contribution\n\nFeel free to fork the repository and modify the example as needed for your own projects. If you have any improvements or suggestions, please submit a pull request.\n\n# © LICENSE\n\n```license\nMIT License\n\nCopyright (c) 2024 Tymon Woźniak\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoderrek%2Fvanilla-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoderrek%2Fvanilla-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoderrek%2Fvanilla-theme/lists"}