{"id":22021483,"url":"https://github.com/peterbenoit/themetoggler","last_synced_at":"2026-02-12T00:08:53.925Z","repository":{"id":261981739,"uuid":"885890391","full_name":"peterbenoit/ThemeToggler","owner":"peterbenoit","description":"ThemeToggle is a lightweight JavaScript library that allows you to easily switch between light and dark themes on a webpage","archived":false,"fork":false,"pushed_at":"2024-11-18T12:57:31.000Z","size":23,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T06:32:07.557Z","etag":null,"topics":["color-scheme","color-theme","color-theme-switcher","css-variables","dark-light-toggle","dark-mode","javascript","light-mode","theme-switcher","theme-toggle","user-preferences"],"latest_commit_sha":null,"homepage":"https://codepen.io/peterbenoit/pen/gOVQZWz","language":"JavaScript","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/peterbenoit.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-11-09T16:58:50.000Z","updated_at":"2024-12-26T08:21:40.000Z","dependencies_parsed_at":"2025-01-28T16:44:02.101Z","dependency_job_id":"302acba5-70dd-4526-aaed-49729f28c594","html_url":"https://github.com/peterbenoit/ThemeToggler","commit_stats":null,"previous_names":["peterbenoit/themetoggler"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peterbenoit/ThemeToggler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FThemeToggler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FThemeToggler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FThemeToggler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FThemeToggler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/ThemeToggler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FThemeToggler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29350203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T20:11:40.865Z","status":"ssl_error","status_checked_at":"2026-02-11T20:10:41.637Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["color-scheme","color-theme","color-theme-switcher","css-variables","dark-light-toggle","dark-mode","javascript","light-mode","theme-switcher","theme-toggle","user-preferences"],"created_at":"2024-11-30T06:12:16.478Z","updated_at":"2026-02-12T00:08:49.895Z","avatar_url":"https://github.com/peterbenoit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ThemeToggle Library\n\n## Overview\n\nThemeToggle is a lightweight JavaScript library that allows you to easily switch between light and dark themes on a webpage. The library automatically applies the appropriate theme based on the user's system preferences or time of day, and provides a customizable toggle button for manual switching.\n\n### Features\n- Automatically adjusts theme based on system settings or time of day.\n- Configurable light and dark themes with custom CSS variables.\n- Supports a customizable toggle button.\n- Listens to system preference changes and adapts theme accordingly.\n\n## Installation\n\nTo use the ThemeToggle library, simply include the script in your HTML file.\n\n```html\n\u003cscript src=\"path/to/themetoggle.js\"\u003e\u003c/script\u003e\n```\n\nOr, you can add it directly in your `\u003chead\u003e` or `\u003cbody\u003e` tags.\n\n## Usage\n\n### Basic Initialization\nTo initialize the ThemeToggle library, call the `init()` method.\n\n```javascript\nThemeToggle.init();\n```\n\nThis will add a theme toggle button to the default location on your webpage (`#theme-toggle` by default) and use the default theme configuration.\n\n### Custom Configuration\nYou can customize the ThemeToggle button's location, theme colors, and behavior by passing a configuration object to the `init()` method.\n\n```javascript\nThemeToggle.init({\n    targetId: 'your-div-id',\n    useSystemTime: false,\n    lightTheme: {\n        '--background-color': '#fafafa',\n        '--text-color': '#222222',\n        '--primary-color': '#ff6347'\n    },\n    darkTheme: {\n        '--background-color': '#1a1a1a',\n        '--text-color': '#e0e0e0',\n        '--primary-color': '#4b0082'\n    },\n    themeButton: {\n        '--button-position': 'fixed',\n        '--button-top': '20px',\n        '--button-right': '20px',\n        '--icon-size': '20px'\n    }\n});\n```\n\n### Example\nAdd a `div` with an `id` of `theme-toggle` to your HTML:\n\n```html\n\u003cdiv id=\"theme-toggle\"\u003e\u003c/div\u003e\n```\n\nThen, initialize ThemeToggle in your JavaScript:\n\n```javascript\nThemeToggle.init();\n```\n\n## Configuration Options\n\n- **targetId**: The ID of the HTML element where the theme toggle button should be inserted.\n- **useSystemTime**: Boolean to determine if the theme should automatically change based on the time of day (night/day).\n- **lightTheme** \u0026 **darkTheme**: Objects defining CSS variables for light and dark themes respectively.\n- **themeButton**: CSS variables that define the position and size of the toggle button.\n\n## Methods\n\n### `init(config)`\nInitializes the ThemeToggle library. Accepts an optional configuration object to customize the library's behavior and appearance.\n\n### `toggleTheme()`\nManually toggles between light and dark themes.\n\n### `applyTheme(theme)`\nApplies the specified theme (`light` or `dark`).\n\n## Example\nHere's an example of initializing ThemeToggle with full configuration:\n\n```javascript\nThemeToggle.init({\n    targetId: 'theme-toggle',\n    useSystemTime: true,\n    lightTheme: {\n        '--background-color': '#ffffff',\n        '--text-color': '#000000'\n    },\n    darkTheme: {\n        '--background-color': '#000000',\n        '--text-color': '#ffffff'\n    },\n    themeButton: {\n        '--button-position': 'fixed',\n        '--button-top': '10px',\n        '--button-right': '10px',\n        '--icon-size': '24px'\n    }\n});\n```\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Contributing\n\nContributions are welcome! If you find any issues or want to improve the library, feel free to open a pull request or an issue on GitHub.\n\n## Contact\n\nIf you have any questions or feedback, please open an issue.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fthemetoggler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fthemetoggler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fthemetoggler/lists"}