{"id":15161818,"url":"https://github.com/chancearthur/tailwindcss-dark-mode","last_synced_at":"2025-09-30T15:31:01.414Z","repository":{"id":50953540,"uuid":"183284348","full_name":"ChanceArthur/tailwindcss-dark-mode","owner":"ChanceArthur","description":"🌚 A Tailwind CSS plugin that adds variants for dark mode","archived":true,"fork":false,"pushed_at":"2021-05-26T21:54:13.000Z","size":185,"stargazers_count":640,"open_issues_count":5,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-16T23:19:14.575Z","etag":null,"topics":["css","dark-mode","dark-theme","javascript","postcss","tailwind","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/ChanceArthur.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}},"created_at":"2019-04-24T18:22:42.000Z","updated_at":"2024-10-06T18:42:37.000Z","dependencies_parsed_at":"2022-08-28T13:40:59.589Z","dependency_job_id":null,"html_url":"https://github.com/ChanceArthur/tailwindcss-dark-mode","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceArthur%2Ftailwindcss-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceArthur%2Ftailwindcss-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceArthur%2Ftailwindcss-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanceArthur%2Ftailwindcss-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanceArthur","download_url":"https://codeload.github.com/ChanceArthur/tailwindcss-dark-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234747730,"owners_count":18880494,"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","dark-mode","dark-theme","javascript","postcss","tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-27T01:00:27.573Z","updated_at":"2025-09-30T15:30:56.121Z","avatar_url":"https://github.com/ChanceArthur.png","language":"JavaScript","readme":"# Tailwind CSS Dark Mode\n\n⚠️ [Dark mode is built in to Tailwind CSS as of v2.0](https://blog.tailwindcss.com/tailwindcss-v2). This plugin will receive no further updates.\n\n## Installation\n\n```\nnpm install tailwindcss-dark-mode --save-dev\n```\n\nAdd the plugin to the `plugins` array in your Tailwind configuration.\n\n```javascript\nplugins: [\n  require('tailwindcss-dark-mode')()\n]\n```\n\n## Usage\n\nStyles generated by this plugin are only used if the selector is applied to the `\u003chtml\u003e` element. How you do that is up to you. `prefers-dark.js` is provided as an option, which is a simple script that enables dark mode based on the user's system theme.\n\n### Available Variants\n\nVariants for dark mode are based on [Tailwind's own variants](https://tailwindcss.com/docs/state-variants/)...\n\n- `dark`\n- `dark-hover`\n- `dark-focus`\n- `dark-active`\n- `dark-disabled`\n- `dark-group-hover`\n- `dark-focus-within`\n- `dark-even`\n- `dark-odd`\n- `dark-placeholder`\n\n... and are used in the same way.\n\n```html\n\u003cdiv class=\"bg-white dark:bg-black\"\u003e\n  \u003cp class=\"text-black dark:text-white\"\u003e\n    My eyes are grateful.\n\n    \u003ca ... class=\"text-blue-300 hover:text-blue-400 dark:text-blue-700 dark-hover:text-blue-600\"\u003e\n      Learn more\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Enabling Variants\n\nAs with existing variants such as `hover` and `focus`, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.\n\n```javascript\nvariants: {\n  backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],\n  borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],\n  textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']\n}\n```\n\n**Please note:** This is only a simple demonstration for how dark variants are enabled and how they could be used. The variants provided by this plugin are **not** replacements for Tailwind's own variants, they are to be used _in addition_ to them. For example, anywhere you would enable `dark-hover`, you should also enable `hover`.\n\n### Changing the Selector\n\nBy default, `.mode-dark` is used as the selector for dark mode. You can change this by adding the `darkSelector` key to the `theme` section in your Tailwind configuration.\n\n```javascript\n  theme: {\n    darkSelector: '.mode-dark'\n  }\n```\n\nDon't forget to also change the selector in `prefers-dark.js` if you are using it.\n\n## PurgeCSS\n\nIf you are using PurgeCSS, you should either add the selector to the `whitelist` array...\n\n```javascript\nwhitelist: ['mode-dark']\n```\n\n... or add `prefers-dark.js` to the `content` array.\n\n```javascript\ncontent: [\n  '**/*.js',\n  './node_modules/tailwindcss-dark-mode/prefers-dark.js',\n  './or/your/own/prefers-dark.js'\n]\n```\n\nOtherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchancearthur%2Ftailwindcss-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchancearthur%2Ftailwindcss-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchancearthur%2Ftailwindcss-dark-mode/lists"}