{"id":25440263,"url":"https://github.com/livresaber/darkmode-react","last_synced_at":"2026-02-24T03:01:29.868Z","repository":{"id":62182773,"uuid":"558150154","full_name":"livresaber/darkmode-react","owner":"livresaber","description":"Componente DarkMode com React","archived":false,"fork":false,"pushed_at":"2025-01-29T03:19:50.000Z","size":1519,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T12:06:09.456Z","etag":null,"topics":["darkmode","hacktoberfest","javascript","lightmode","react"],"latest_commit_sha":null,"homepage":"https://darkmode-react.web.app","language":"TypeScript","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/livresaber.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":"2022-10-27T01:39:22.000Z","updated_at":"2025-01-29T03:19:53.000Z","dependencies_parsed_at":"2024-02-06T19:26:18.638Z","dependency_job_id":"fba63f39-fbe5-4e0e-8c0e-9e0818fbd870","html_url":"https://github.com/livresaber/darkmode-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/livresaber/darkmode-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livresaber","download_url":"https://codeload.github.com/livresaber/darkmode-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29770208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T01:40:24.820Z","status":"online","status_checked_at":"2026-02-24T02:00:07.497Z","response_time":75,"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":["darkmode","hacktoberfest","javascript","lightmode","react"],"created_at":"2025-02-17T11:30:11.734Z","updated_at":"2026-02-24T03:01:29.850Z","avatar_url":"https://github.com/livresaber.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌗 **DarkMode-React**\n\n**Effortlessly toggle between light and dark modes in your React projects!**\nA simple yet powerful component for bringing dark mode to your users.\nGive your application the look it deserves, day or night! 🌞🌚\n\n🔗 **[🚀 Live Preview](https://darkmode-react.web.app)**\n\n---\n\n## 📖 **Table of Contents**\n- [⚙️ Installation Guide](#️-installation-guide)\n- [💡 Basic Usage](#-basic-usage)\n- [⚙️ Props \u0026 Customization](#-props--customization)\n- [🎨 Style Customization](#-style-customization)\n- [📚 Component Details](#-component-details)\n- [⭐ Show Some Love!](#-show-some-love)\n- [🚀 Join the Dark Side... Or Not!](#-join-the-dark-side-or-not)\n---\n\n## ⚙️ **Installation Guide**\n\nGet started in seconds with npm! 🎯\n\n```bash\nnpm install --save darkmode-react-component\n```\n\n---\n\n## 💡 **Basic Usage**\n\nAdd **DarkModeReact** to your project with just a few lines:\n\n```tsx\nimport DarkModeReact from 'darkmode-react-component';\n\n\u003cDarkModeReact /\u003e\n```\n\nAnd that’s it! Your users can now switch between themes seamlessly! ⚡\n\n---\n\n## ⚙️ **Props \u0026 Customization**\n\nFine-tune the behavior of your dark mode switch with these props:\n\n### 🔒 `hiddenLabel`\nHide the default label for a cleaner look:\n\n```tsx\n\u003cDarkModeReact hiddenLabel /\u003e\n```\n\n### 👁️ `hiddenIcon`\nPrefer no icons? This one’s for you:\n\n```tsx\n\u003cDarkModeReact hiddenIcon /\u003e\n```\n\n### 🌚 `labelDark` \u0026 🌞 `labelLight`\nCustomize the labels for a personal touch:\n\n```tsx\n\u003cDarkModeReact labelDark=\"Tema escuro\" labelLight=\"Tema claro\" /\u003e\n```\n\n---\n\n## 🎨 **Style Customization**\n\nMatch the theme switch to your brand’s identity! Here’s how you can modify the colors:\n\n```css\nbody {\n  --dm-color-primary: #41b883; /* Primary color */\n  --dm-color-secondary: #34495e; /* Secondary color */\n  --dm-color-text: #222; /* Text color in light mode */\n  --dm-color-background: #fff; /* Background color in light mode */\n}\n\nbody.darkmode {\n  --dm-color-text: #fff; /* Text color in dark mode */\n  --dm-color-background: #222; /* Background color in dark mode */\n}\n```\n\n💡 _Pro Tip:_ Use custom CSS variables to ensure consistency across your app, and let the `.darkmode` class do the magic! ✨\n\n---\n\n## 📚 **Component Details**\n\nWhen you use **DarkModeReact**, the following happens:\n\n- ✅ The `body` tag gets a `.darkmode` class based on the current theme.\n- 💾 A `LocalStorage` key saves the user's theme preference, so their choice sticks even when they refresh the page!\n- 🎨 Style your app's components by targeting `.darkmode` in your stylesheets.\n\n**Why choose DarkModeReact?**\n\n- ⚡ _Quick to implement_: Integrate in just a few lines.\n- 🎨 _Highly customizable_: Tweak styles to match your brand.\n- 🌍 _Universal appeal_: Users love dark mode, and it’s better for their eyes!\n- 💪 _Optimized for performance_: Fast, efficient, and user-friendly.\n\n---\n\n## ⭐ **Show Some Love!**\n\nFound this component useful? **Star** ⭐ the repository, share it with fellow developers, and contribute your ideas!\nLet's build a stylish and accessible web, together! 💖\n\nGot any suggestions or issues? Head over to the **Issues** section or open a **Pull Request**. Contributions are always welcome! 🙌\n\n---\n\n## 🚀 **Join the Dark Side... Or Not!**\n\nDarkMode-React makes it easy to let users decide their preferred experience. With smooth transitions, customizable styles, and a straightforward setup, it’s the perfect addition to any modern React app.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivresaber%2Fdarkmode-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-react/lists"}