{"id":19865137,"url":"https://github.com/angelhtml/tailwind_colormode","last_synced_at":"2026-05-14T06:31:35.826Z","repository":{"id":250486622,"uuid":"834596846","full_name":"angelhtml/Tailwind_colormode","owner":"angelhtml","description":"dark mode for tailwind","archived":false,"fork":false,"pushed_at":"2024-07-27T18:56:03.000Z","size":4207,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T20:33:23.273Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/angelhtml.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,"publiccode":null,"codemeta":null}},"created_at":"2024-07-27T18:51:02.000Z","updated_at":"2024-07-27T18:56:06.000Z","dependencies_parsed_at":"2024-07-27T20:03:58.922Z","dependency_job_id":"d1040e50-f94e-4c71-a124-b64d7db1110b","html_url":"https://github.com/angelhtml/Tailwind_colormode","commit_stats":null,"previous_names":["angelhtml/tailwind_colormode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/angelhtml/Tailwind_colormode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angelhtml%2FTailwind_colormode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angelhtml%2FTailwind_colormode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angelhtml%2FTailwind_colormode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angelhtml%2FTailwind_colormode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angelhtml","download_url":"https://codeload.github.com/angelhtml/Tailwind_colormode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angelhtml%2FTailwind_colormode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33013214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-12T15:21:18.406Z","updated_at":"2026-05-14T06:31:35.773Z","avatar_url":"https://github.com/angelhtml.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n\n\n#dark mode\n\n##tailwind.config.js\n+ darkMode:\"class\",\n\n```Javascript\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./components/**/*.{js,ts,jsx,tsx}\"\n  ],\n  darkMode:\"class\",\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n\n\n```\n\n## inside a component\n\n```Javascript\n    let [mode, setMode] = useState(false)\n\n    useEffect(()=\u003e {\n        if(mode){\n            document.documentElement.classList.add(\"dark\")\n        }else{\n            document.documentElement.classList.remove(\"dark\")\n        }\n        console.log(mode)\n    },[mode])\n\n \u003cbutton onClick={()=\u003e setMode(!mode)} className=\"text-silver font-medium text-2xl border-2 rounded-md border-silver hover:text-black hover:border-black\"\u003e{mode ? \u003cMdSunny /\u003e : \u003cMdModeNight/\u003e}\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangelhtml%2Ftailwind_colormode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangelhtml%2Ftailwind_colormode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangelhtml%2Ftailwind_colormode/lists"}