{"id":20672733,"url":"https://github.com/nas5w/usecontext-theme-toggling","last_synced_at":"2025-04-19T19:11:06.537Z","repository":{"id":39384470,"uuid":"208461535","full_name":"nas5w/usecontext-theme-toggling","owner":"nas5w","description":"This is a simple example repository demonstrating one way to toggle React themes using the useContext hook.","archived":false,"fork":false,"pushed_at":"2023-01-04T10:21:30.000Z","size":1982,"stargazers_count":12,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T12:05:07.855Z","etag":null,"topics":["hooks","javascript","react","typescript","usecontext","usecontexthook"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/nas5w.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-14T15:38:43.000Z","updated_at":"2024-03-05T11:52:54.000Z","dependencies_parsed_at":"2023-02-02T08:16:37.890Z","dependency_job_id":null,"html_url":"https://github.com/nas5w/usecontext-theme-toggling","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nas5w%2Fusecontext-theme-toggling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nas5w%2Fusecontext-theme-toggling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nas5w%2Fusecontext-theme-toggling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nas5w%2Fusecontext-theme-toggling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nas5w","download_url":"https://codeload.github.com/nas5w/usecontext-theme-toggling/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249773428,"owners_count":21323466,"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":["hooks","javascript","react","typescript","usecontext","usecontexthook"],"created_at":"2024-11-16T20:38:39.191Z","updated_at":"2025-04-19T19:11:06.520Z","avatar_url":"https://github.com/nas5w.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## About the Project\n\nThis project shows one method to use React's `useContext` and `useState` hooks to implement dark/light mode toggling. The relevant files are `src/ThemeProvider.tsx`, `src/index.tsx`, and `src/App.tsx`.\n\nThis project uses Typescript, but the same functionality can be achieved in javascript by removing the types.\n\n## Demo\n\nYou can see a working version of this simple app on Netlify here:\n\n**[Demo site](https://usecontext-theme-demo.netlify.com/)**\n\n## ThemeProvider.tsx\n\nIn our `ThemeProvider` component, we define our `Theme` as being either light or dark and we define our ThemeContext as being an object with two properties: `theme` and `toggleTheme` (the theme and ability to toggle the theme will be made available to other components via the `useContext` hook).\n\nWe have to make sure to export the `ThemeContext` object we create using `React.createContext`.\n\nWithin the `ThemeProvider` component, we maintain our `theme` state using the `useState` hook and create a `toggleTheme` function that will toggle the state between `light` and `dark`.\n\nFor simplicity, we simple set the document body's `color` and `backgroundColor` styles based on whether the `theme` state is currently light or dark. Finally, we export our `ThemeContext` `Provider` with value set to and object with `theme` and `toggleTheme` properties. We then render `children` within our `ThemeContext.Provider` component.\n\n```javascript\nimport React, { useState } from \"react\";\n\ntype Theme = \"light\" | \"dark\";\ntype ThemeContext = { theme: Theme; toggleTheme: () =\u003e void };\n\nexport const ThemeContext = React.createContext\u003cThemeContext\u003e(\n  {} as ThemeContext\n);\n\nexport const ThemeProvider: React.FC = ({ children }) =\u003e {\n  const [theme, setTheme] = useState\u003cTheme\u003e(\"light\");\n  const toggleTheme = () =\u003e {\n    setTheme(theme === \"light\" ? \"dark\" : \"light\");\n  };\n\n  const color = theme === \"light\" ? \"#333\" : \"#FFF\";\n  const backgroundColor = theme === \"light\" ? \"#FFF\" : \"#333\";\n\n  document.body.style.color = color;\n  document.body.style.backgroundColor = backgroundColor;\n\n  return (\n    \u003cThemeContext.Provider value={{ theme, toggleTheme }}\u003e\n      {children}\n    \u003c/ThemeContext.Provider\u003e\n  );\n};\n```\n\n## index.tsx\n\nIn our `index` file, we simply wrap the entire app in our new `ThemeProvider` component. Of course we don't _need_ to do this at the app level in real projects, we just need to make sure that any components that need `theme` or `toggleTheme` are within the child tree of our provider.\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport { ThemeProvider } from \"./ThemeProvider\";\n\nReactDOM.render(\n  \u003cThemeProvider\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n## App.tsx\n\nIn the `App` component, we use the `useContext` hook to gain access to our `theme` string and `toggleTheme` function. We create a simple button that can toggle the theme and only use `theme` to determine what we show the user: \"Switch to dark mode\" or \"Switch to light mode\"\n\n```javascript\nimport React, { useContext } from \"react\";\nimport { ThemeContext } from \"./ThemeProvider\";\n\nconst App: React.FC = () =\u003e {\n  const { theme, toggleTheme } = useContext(ThemeContext);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eHi friend!\u003c/div\u003e\n      \u003cbutton onClick={toggleTheme}\u003e\n        Switch to {theme === \"light\" ? \"dark\" : \"light\"} mode\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnas5w%2Fusecontext-theme-toggling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnas5w%2Fusecontext-theme-toggling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnas5w%2Fusecontext-theme-toggling/lists"}