{"id":31532891,"url":"https://github.com/hungdev/simple-theme","last_synced_at":"2025-10-04T04:00:05.251Z","repository":{"id":51683245,"uuid":"520456564","full_name":"hungdev/simple-theme","owner":"hungdev","description":"Handle dark mode in reactjs","archived":false,"fork":false,"pushed_at":"2022-08-02T16:14:17.000Z","size":186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-15T00:05:47.450Z","etag":null,"topics":["dark-mode","dark-mode-switcher","darkmode","theme"],"latest_commit_sha":null,"homepage":"","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/hungdev.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}},"created_at":"2022-08-02T10:44:11.000Z","updated_at":"2024-04-15T00:05:47.451Z","dependencies_parsed_at":"2022-08-23T00:20:39.067Z","dependency_job_id":null,"html_url":"https://github.com/hungdev/simple-theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hungdev/simple-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hungdev%2Fsimple-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hungdev%2Fsimple-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hungdev%2Fsimple-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hungdev%2Fsimple-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hungdev","download_url":"https://codeload.github.com/hungdev/simple-theme/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hungdev%2Fsimple-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278262436,"owners_count":25957938,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"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":["dark-mode","dark-mode-switcher","darkmode","theme"],"created_at":"2025-10-04T04:00:03.303Z","updated_at":"2025-10-04T04:00:05.241Z","avatar_url":"https://github.com/hungdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Demo theme Dark Mode - ReactJs\n\n\nBài toán đưa ra là chỉ có 1 file color, file color này không có dark và light type, và các màn này sử dụng file color này,\nkhông có cặp đối xứng ví dụ như chế độ dark là blue-color: blue-color-dark, và light là blue-color: blue-color-light.\n\nĐể xử lý case này cần define cho mỗi màn các màu, và ko được define cho global color vì nếu define cho global color khi build\nsẽ bị ghi đè color với nhau, nó sẽ chỉ ăn color ở màn cuối cùng.\n\n\nReference: \n\n\n[https://www.thisdot.co/blog/how-to-implement-a-dark-to-light-mode-feature-in-your-react-sass-project](https://www.thisdot.co/blog/how-to-implement-a-dark-to-light-mode-feature-in-your-react-sass-project)\n\n[https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/](https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/)\n\n[https://github.com/Glacian22/Easy-React-Theming/blob/master/src/index.css](https://github.com/Glacian22/Easy-React-Theming/blob/master/src/index.css)\n\n[https://dev.to/alexeagleson/how-to-create-a-dark-mode-component-in-react-3ibg](https://dev.to/alexeagleson/how-to-create-a-dark-mode-component-in-react-3ibg)\n\n[https://javascript.plainenglish.io/the-best-way-to-add-dark-mode-to-your-react-sass-project-ce3ae3bd8616](https://javascript.plainenglish.io/the-best-way-to-add-dark-mode-to-your-react-sass-project-ce3ae3bd8616)\n\n[https://blog.bitsrc.io/3-ways-to-theme-react-components-9cfa631351e9](https://blog.bitsrc.io/3-ways-to-theme-react-components-9cfa631351e9)\n\n\n[https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class)\n\nkey search: integrate darkmode reactjs or theming reactjs\n\n\nNote: Cái prefers-color-scheme: dark chỉ có tác dụng xác định dark hay light ở hệ thống, \ný tưởng là dựa vào đó để toggle set class dark hay light vào thẻ dom, \nchứ prefers-color-scheme không có tác dụng switch theme giúp\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhungdev%2Fsimple-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhungdev%2Fsimple-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhungdev%2Fsimple-theme/lists"}