{"id":15609000,"url":"https://github.com/surjithctly/astro-color-scheme","last_synced_at":"2025-04-15T11:54:15.000Z","repository":{"id":65407170,"uuid":"584815401","full_name":"surjithctly/astro-color-scheme","owner":"surjithctly","description":"Astro Color Scheme is a fully headless dark mode theme toggle for Astro.","archived":false,"fork":false,"pushed_at":"2024-06-07T16:10:15.000Z","size":27,"stargazers_count":48,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T07:15:25.427Z","etag":null,"topics":["astro","astro-themes","color-scheme","dark-mode","dark-theme","headless"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-color-scheme","language":"Astro","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/surjithctly.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}},"created_at":"2023-01-03T15:32:38.000Z","updated_at":"2025-02-25T15:51:22.000Z","dependencies_parsed_at":"2024-04-15T02:42:53.683Z","dependency_job_id":"227c14ff-a6f8-4e46-8c09-7978466e1f39","html_url":"https://github.com/surjithctly/astro-color-scheme","commit_stats":{"total_commits":15,"total_committers":3,"mean_commits":5.0,"dds":0.4666666666666667,"last_synced_commit":"ccfb3dd2fe7494e25f7dc7023033397f15d9919b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-color-scheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-color-scheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-color-scheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surjithctly%2Fastro-color-scheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surjithctly","download_url":"https://codeload.github.com/surjithctly/astro-color-scheme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248982443,"owners_count":21193410,"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":["astro","astro-themes","color-scheme","dark-mode","dark-theme","headless"],"created_at":"2024-10-03T05:40:46.772Z","updated_at":"2025-04-15T11:54:14.980Z","avatar_url":"https://github.com/surjithctly.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Color Scheme\n\nAstro Color Scheme is a fully headless dark mode theme toggle for Astro.\n\n[**Live Demo on Stackblitz →**](https://stackblitz.com/edit/github-jpfnv9-ep5z59?file=src%2Fpages%2Findex.astro)\n\n[**Live Demo on Stablo Template →**](https://stablo-astro.web3templates.com/)\n\n## Installation\n\n```\nnpm install astro-color-scheme\n# or\npnpm add astro-color-scheme\n```\n\n## Basic Usage\n\nYou can toggle the theme using `button`, `select`, `checkbox` or `radio` inside the `\u003cThemeSwitch\u003e`.\n\n```jsx\n---\nimport { ThemeSwitch } from \"astro-color-scheme\";\n---\n\n\u003cdiv\u003e\n  \u003cThemeSwitch strategy=\"button\"\u003e\n    \u003cbutton\u003eToggle Theme\u003c/button\u003e\n  \u003c/ThemeSwitch\u003e\n\u003c/div\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eAdvanced Examples\u003c/summary\u003e\n\n**Using Select:**\n\n```jsx\n---\nimport { ThemeSwitch } from \"astro-color-scheme\";\n---\n\n\u003cdiv\u003e\n  \u003cThemeSwitch strategy=\"select\" defaultTheme=\"system\"\u003e\n    \u003cselect\u003e\n      \u003coption value=\"system\"\u003eSystem\u003c/option\u003e\n      \u003coption value=\"dark\"\u003eDark\u003c/option\u003e\n      \u003coption value=\"light\"\u003eLight\u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/ThemeSwitch\u003e\n\u003c/div\u003e\n```\n\n**Using Radio:**\n\n```jsx\n---\nimport { ThemeSwitch } from \"astro-color-scheme\";\n---\n\n\u003cdiv\u003e\n  \u003cThemeSwitch strategy=\"radio\" defaultTheme=\"system\" as=\"div\"\u003e\n    \u003cform\u003e\n      \u003clabel\u003e\u003cinput type=\"radio\" name=\"theme\" value=\"system\" /\u003eSystem\u003c/label\u003e\n      \u003clabel\u003e\u003cinput type=\"radio\" name=\"theme\" value=\"dark\" /\u003eDark\u003c/label\u003e\n      \u003clabel\u003e\u003cinput type=\"radio\" name=\"theme\" value=\"light\" /\u003eLight\u003c/label\u003e\n    \u003c/form\u003e\n  \u003c/ThemeSwitch\u003e\n\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSet theme without any toggle\u003c/summary\u003e\n\n```jsx\n---\nimport { ThemeSwitch } from \"astro-color-scheme\";\n---\n\n\u003cdiv\u003e\n  \u003cThemeSwitch defaultTheme=\"dark\"/\u003e\n\u003c/div\u003e\n```\n\n\u003c/details\u003e\n\n## Options\n\nOptions for `ThemeSwitch`\n\n| option         | required                     | notes                                                           |\n| -------------- | ---------------------------- | --------------------------------------------------------------- |\n| `strategy`     | `required` if you use toggle | Possible values: `button`, `checkbox`, `select` or `radio`      |\n| `defaultTheme` | `optional`                   | Default: `system`, Possible values: `light`, `dark` or `system` |\n| `as`           | `optional`                   | Default: `span`, Possible values: `div`, `span`                 |\n\nThe `as` option lets you select what wrapper element to use for the ThemeSwitch. Elements Allowed for Toggle inside `ThemeSwitch` are `\u003cbutton\u003e`, `\u003cinput type=checkbox\u003e`, `\u003cselect\u003e`, `\u003cform\u003e`.\n\n```html\n\u003c!-- Button --\u003e\n\u003cbutton\u003eToggle Theme\u003c/button\u003e\n\n\u003c!-- Checkbox --\u003e\n\u003cinput type=\"checkbox\" /\u003e\n\n\u003c!-- Select --\u003e\n\u003cselect\u003e\n  \u003coption value=\"system\"\u003eSystem\u003c/option\u003e\n  \u003coption value=\"dark\"\u003eDark\u003c/option\u003e\n  \u003coption value=\"light\"\u003eLight\u003c/option\u003e\n\u003c/select\u003e\n```\n\n## Customizations\n\nAs a headless plugin, You are free to add your own styles and icons based on the theme.\n\nHere's an example on how to add custom styles using css variables.\n\n```html\n\u003cstyle\u003e\n  html {\n    --background-color: white;\n    --text-color: black;\n    color: var(--text-color);\n    background-color: var(--background-color);\n  }\n  .dark {\n    --background-color: black;\n    --text-color: white;\n  }\n  /* OR */\n  [data-theme=\"dark\"] {\n    --background-color: black;\n    --text-color: white;\n  }\n\u003c/style\u003e\n```\n\nHere's an example shows usage of Astro Icon.\n\n```jsx\n---\nimport { Icon } from \"astro-icon\";\nimport { ThemeSwitch } from \"astro-color-scheme\";\n---\n\n\u003cdiv\u003e\n  \u003cThemeSwitch strategy=\"button\"\u003e\n    \u003cbutton\u003e\n      \u003cspan class=\"sr-only\"\u003eToggle Theme\u003c/span\u003e\n      \u003cIcon class=\"dark:hidden\" name=\"heroicons-outline:sun\" /\u003e\n      \u003cIcon class=\"hidden dark:block\" name=\"heroicons-outline:moon\" /\u003e\n    \u003c/button\u003e\n  \u003c/ThemeSwitch\u003e\n\u003c/div\u003e\n```\n\nThis plugin also supports custom checkbox switch with animations. Just use `strategy=\"checkbox\"` and add your content. By default we add `dark/light` class into the `html` as well as `data-theme` attribute. Here's how it would look like:\n\n```html\n\u003chtml lang=\"en\" class=\"dark\" data-theme=\"dark\"\u003e\u003c/html\u003e\n```\n\n## Tailwind CSS\n\nThis plugin should work well with regular CSS as well as Tailwind CSS. You can style the `dark` mode using `dark:` modifier to add custom icon based on the chosen theme. Make sure you change the `darkMode` to `class` to make this work.\n\n```js\n// tailwind.config.cjs\n darkMode: \"class\",\n```\n\n\u003c/details\u003e\n\n## Contribute\n\nPlease create an issue.\n\n## Credits\n\nCopyright ©️ 2023-2099. [Surjith S M](https://twitter.com/surjithctly).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurjithctly%2Fastro-color-scheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurjithctly%2Fastro-color-scheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurjithctly%2Fastro-color-scheme/lists"}