{"id":15062426,"url":"https://github.com/alex-grover/astro-themes","last_synced_at":"2025-04-05T15:03:41.903Z","repository":{"id":57897584,"uuid":"528199798","full_name":"alex-grover/astro-themes","owner":"alex-grover","description":"Easy dark mode for Astro websites","archived":false,"fork":false,"pushed_at":"2025-03-13T00:59:50.000Z","size":1872,"stargazers_count":63,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T14:06:28.136Z","etag":null,"topics":["astro","astro-component","dark-mode"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-themes","language":"TypeScript","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/alex-grover.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":".github/code_of_conduct.md","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":"2022-08-23T23:49:18.000Z","updated_at":"2025-03-13T00:59:53.000Z","dependencies_parsed_at":"2024-02-02T04:32:25.782Z","dependency_job_id":"825bdd05-6c1e-4ed5-b11c-7a4e53e62674","html_url":"https://github.com/alex-grover/astro-themes","commit_stats":{"total_commits":46,"total_committers":3,"mean_commits":"15.333333333333334","dds":"0.15217391304347827","last_synced_commit":"0881ec7de74626ee3f68901bb7d016c28e0662ae"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-grover%2Fastro-themes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-grover%2Fastro-themes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-grover%2Fastro-themes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-grover%2Fastro-themes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex-grover","download_url":"https://codeload.github.com/alex-grover/astro-themes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353729,"owners_count":20925329,"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-component","dark-mode"],"created_at":"2024-09-24T23:36:02.473Z","updated_at":"2025-04-05T15:03:41.882Z","avatar_url":"https://github.com/alex-grover.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 astro-themes [![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/alex-grover/astro-themes/ci.yml?branch=main)](https://github.com/alex-grover/astro-themes/actions/workflows/ci.yml?query=branch%3Amain) [![npm](https://img.shields.io/npm/v/astro-themes)](https://www.npmjs.com/package/astro-themes)\n\nEasy dark mode for Astro websites. Add themes in 2 lines of code! Zero dependencies, supports SSR, and works with any\nframework or UI.\n\n## Install\n\n```sh\nnpm install --save-dev astro-themes\n```\n\n## Use\n\nAdd the `\u003cThemes /\u003e` component in your app. Works best in a centralized layout component, so it's shared everywhere.\n\n![code sample adding Themes component in document head](https://user-images.githubusercontent.com/3088615/187366957-fd3b3ef6-c3a8-4524-a898-49be189e1a73.png)\n\n### Usage\n\n`astro-themes` gives you the ability to get and set the theme, with builtin browser standards. No polluting the global\nscope or any other hacks! These methods will work without a framework, or from within your React/Svelte/Vue/etc\ncomponents.\n\nSet the theme:\n\n```ts\ndocument.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' })) // or pass `null` to clear the saved setting\n```\n\nGet the current theme:\n\n```ts\ndocument.documentElement.attributes.getNamedItem('data-theme')?.value // 'light' | 'dark'\n```\n\nSet a default theme (only applied if the browser doesn't specify a preference for dark mode):\n\n```astro\n\u003cThemes defaultTheme=\"dark\" /\u003e\n```\n\n#### Compatibility with Tailwind\n\nBy default, Tailwind expects `class=\"dark\"` on the `html` element rather than `data-theme`. To ensure that `dark:` classes work correctly, you can configure your dark mode selector as described [here](https://tailwindcss.com/docs/dark-mode#customizing-the-selector).\n\n## What does it do?\n\n- Provides ability to get and set the theme from any framework, or none at all\n  - Set theme by dispatching a custom browser event: `document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' }))`\n  - Get current theme: `document.documentElement.attributes.getNamedItem('data-theme')?.value`\n- Sets `data-theme` attribute on the `html` element, so you can implement dark mode in CSS\n- Sets `color-scheme` CSS attribute on the `html` element, so the browser renders built in elements appropriately\n- Reads user theme preference on page load\n  - From `localStorage`, if they've set it in the past\n  - From `prefers-color-scheme: dark`, if supported\n  - Falls back to the `defaultTheme` option, or `light` if not specified\n- Synchronizes setting across tabs\n- Responds to changes in OS preference (for example, the OS automatically switching to dark mode in the evening)\n\n## Run example locally\n\n```sh\ngh repo clone alex-grover/astro-themes\ncd astro-themes\nnpm install\nnpm link\nnpm link astro-themes\nnpm run example\n```\n\n## Feedback\n\nIdeas, bug reports, or questions are welcomed! Please don't hesitate to [open an issue](https://github.com/alex-grover/astro-themes/issues/new).\n\nThis component was inspired by the excellent [`next-themes`](https://github.com/pacocoursey/next-themes).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-grover%2Fastro-themes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-grover%2Fastro-themes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-grover%2Fastro-themes/lists"}