React Theme Toggle

\n \n );\n}","readOnly":false},"/index.js":{"code":"import \"./styles.css\";\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\ncreateRoot(document.getElementById(\"root\")).render();","readOnly":true},"/submit.js":{"code":"import \"@testing-library/jest-dom\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport App from \"./App\";\n\n/* Basic behaviour */\n\ntest(\"Defaults to light theme\", () => {\n render();\n expect(screen.getByTestId(\"themed-box\")).toHaveTextContent(/light/i);\n});\n\ntest(\"Theme toggles on each click\", () => {\n render();\n const btn = screen.getByTestId(\"toggle-btn\");\n const box = screen.getByTestId(\"themed-box\");\n\n fireEvent.click(btn);\n expect(box).toHaveTextContent(/dark/i);\n\n fireEvent.click(btn);\n expect(box).toHaveTextContent(/light/i);\n});\n\n/* Deep propagation */\n\ntest(\"Nested component receives updated theme\", () => {\n render();\n fireEvent.click(screen.getByTestId(\"toggle-btn\"));\n expect(screen.getByTestId(\"themed-box\")).toHaveTextContent(/dark/i);\n});\n","readOnly":true},"/styles.css":{"code":".font-medium{font-weight:500;}","readOnly":true},"/run.test.js":{"code":"import \"@testing-library/jest-dom\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport App from \"./App\";\n\ntest(\"Renders toggle button\", () => {\n render();\n expect(screen.getByTestId(\"toggle-btn\")).toBeInTheDocument();\n});\n\n// 🚨 Expected to fail until toggleTheme is implemented\n\ntest(\"Clicking the button switches to dark mode\", () => {\n render();\n fireEvent.click(screen.getByTestId(\"toggle-btn\"));\n const box = screen.getByTestId(\"themed-box\");\n expect(box).toHaveTextContent(/dark/i);\n});\n","readOnly":true},"/ThemedBox.js":{"code":"import React, { useContext } from \"react\";\nimport { ThemeContext } from \"./ThemeProvider\";\n\nexport default function ThemedBox() {\n const theme = \"light\";\n const box = theme === \"light\" ? \"bg-gray-100 text-black\" : \"bg-gray-700 text-white\";\n\n return (\n

\n Current theme is {theme}\n

\n );\n}","readOnly":false},"/package.json":{"code":"{\n \"dependencies\": {\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"@testing-library/react\": \"latest\",\n \"@testing-library/jest-dom\": \"latest\",\n \"jest\": \"latest\"\n },\n \"scripts\": { \"test\": \"jest\" },\n \"jest\": {\n \"testEnvironment\": \"jsdom\",\n \"setupFilesAfterEnv\": [\"/setupTests.js\"]\n }\n}","readOnly":true},"/ToggleSwitch.js":{"code":"import React, { useContext } from \"react\";\nimport { ThemeContext } from \"./ThemeProvider\";\n\nexport default function ToggleSwitch() {\n const theme = \"light\";\n\n return (\n \n {theme === \"light\" ? \"Switch to Dark\" : \"Switch to Light\"}\n \n );\n}","readOnly":false},"/ThemeProvider.js":{"code":"import React, { createContext, useState } from \"react\";\n\nexport const ThemeContext = createContext();\n\nexport default function ThemeProvider({ children }) {\n const theme = \"light\";\n const toggleTheme = () => {};\n\n return (\n \n {children}\n \n );\n}","readOnly":false},"/public/index.html":{"code":"\n\n \n \n \n React Theme Toggle\n \n \n

\n \n","readOnly":true}},"solutionFiles":{"/App.js":{"code":"import React, { useContext } from \"react\";\nimport ThemeProvider, { ThemeContext } from \"./ThemeProvider\";\nimport ToggleSwitch from \"./ToggleSwitch\";\nimport ThemedBox from \"./ThemedBox\";\n\nfunction Main() {\n const { theme } = useContext(ThemeContext);\n const container = theme === \"light\" ? \"bg-white text-black\" : \"bg-gray-800 text-white\";\n\n return (\n

\n \n \n

\n );\n}\n\nexport default function App() {\n return (\n \n

\n \n );\n}","readOnly":false},"/index.js":{"code":"import \"./styles.css\";\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\ncreateRoot(document.getElementById(\"root\")).render();","readOnly":true},"/submit.js":{"code":"import \"@testing-library/jest-dom\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport App from \"./App\";\n\ntest(\"Defaults to light theme\", () => {\n render();\n expect(screen.getByTestId(\"themed-box\")).toHaveTextContent(/light/i);\n});\n\ntest(\"Theme toggles on each click\", () => {\n render();\n const btn = screen.getByTestId(\"toggle-btn\");\n const box = screen.getByTestId(\"themed-box\");\n\n fireEvent.click(btn);\n expect(box).toHaveTextContent(/dark/i);\n\n fireEvent.click(btn);\n expect(box).toHaveTextContent(/light/i);\n});\n\ntest(\"Nested component receives updated theme\", () => {\n render();\n fireEvent.click(screen.getByTestId(\"toggle-btn\"));\n expect(screen.getByTestId(\"themed-box\")).toHaveTextContent(/dark/i);\n});\n","readOnly":true},"/styles.css":{"code":".font-medium{font-weight:500;}","readOnly":true},"/run.test.js":{"code":"import \"@testing-library/jest-dom\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport App from \"./App\";\n\ntest(\"Renders toggle button\", () => {\n render();\n expect(screen.getByTestId(\"toggle-btn\")).toBeInTheDocument();\n});\n\ntest(\"Clicking the button switches to dark mode\", () => {\n render();\n fireEvent.click(screen.getByTestId(\"toggle-btn\"));\n expect(screen.getByTestId(\"themed-box\")).toHaveTextContent(/dark/i);\n});\n","readOnly":true},"/ThemedBox.js":{"code":"import React, { useContext } from \"react\";\nimport { ThemeContext } from \"./ThemeProvider\";\n\nexport default function ThemedBox() {\n const { theme } = useContext(ThemeContext);\n const box = theme === \"light\" ? \"bg-gray-100 text-black\" : \"bg-gray-700 text-white\";\n\n return (\n

\n Current theme is {theme}\n

\n );\n}","readOnly":false},"/package.json":{"code":"{\n \"dependencies\": {\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"@testing-library/react\": \"latest\",\n \"@testing-library/jest-dom\": \"latest\",\n \"jest\": \"latest\"\n },\n \"scripts\": { \"test\": \"jest\" },\n \"jest\": {\n \"testEnvironment\": \"jsdom\",\n \"setupFilesAfterEnv\": [\"/setupTests.js\"]\n }\n}","readOnly":true},"/ToggleSwitch.js":{"code":"import React, { useContext } from \"react\";\nimport { ThemeContext } from \"./ThemeProvider\";\n\nexport default function ToggleSwitch() {\n const { theme, toggleTheme } = useContext(ThemeContext);\n\n return (\n \n {theme === \"light\" ? \"Switch to Dark\" : \"Switch to Light\"}\n \n );\n}","readOnly":false},"/ThemeProvider.js":{"code":"import React, { createContext, useState, useMemo } from \"react\";\n\nexport const ThemeContext = createContext();\n\nexport default function ThemeProvider({ children }) {\n const [theme, setTheme] = useState(\"light\");\n\n const toggleTheme = () => setTheme(t => (t === \"light\" ? \"dark\" : \"light\"));\n\n const value = useMemo(() => ({ theme, toggleTheme }), [theme]);\n\n return {children};\n}","readOnly":false},"/public/index.html":{"code":"\n\n \n \n \n React Theme Toggle\n \n \n

\n \n","readOnly":true}},"topicBodyWithCodeEntityOutline":{"title":"Theme Toggle","collection":["code"],"id":"d1bddacd-5423-4a1a-bfb8-3c31576be315","premium":true,"level":["Mid"],"language":["javascript"],"body":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Theme Toggle","nodeType":"text"}],"nodeType":"heading-1"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"3GQg7aGQBaFSEEHP5VaQz4","type":"Entry","createdAt":"2024-04-07T11:46:10.636Z","updatedAt":"2024-04-07T11:46:10.636Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"richMediaCatchAll"}},"locale":"en-US"},"fields":{"type":"spacer-md"}}},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"SSOQZZsWJDzhSyEQAZ1Fv","type":"Entry","createdAt":"2024-09-19T22:08:47.328Z","updatedAt":"2024-09-19T22:08:47.328Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"richMediaCatchAll"}},"locale":"en-US"},"fields":{"type":"tags"}}},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"3Q4RNYvPaF12gyKx522ra4","type":"Entry","createdAt":"2024-04-07T11:44:23.267Z","updatedAt":"2024-04-07T11:44:23.267Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"richMediaCatchAll"}},"locale":"en-US"},"fields":{"type":"spacer-sm"}}},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"6ueRoFK441aURjvDgIv2XB","type":"Entry","createdAt":"2025-07-10T14:59:13.859Z","updatedAt":"2025-07-10T14:59:28.295Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"keyValuePairs"}},"locale":"en-US"},"fields":{"key":"react-theme-toggle-tags","value":["Context API","Global state management"]}}},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"3MHYT7GA5AoCDiYf0bfoun","type":"Entry","createdAt":"2024-04-07T11:47:33.713Z","updatedAt":"2024-04-07T11:47:33.713Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"richMediaCatchAll"}},"locale":"en-US"},"fields":{"type":"spacer-lg"}}},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Requirements:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Create a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"ThemeToggle","nodeType":"text"},{"data":{},"marks":[],"value":" feature that lets the user switch between ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"light\"","nodeType":"text"},{"data":{},"marks":[],"value":" and ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"dark\"","nodeType":"text"},{"data":{},"marks":[],"value":" modes. ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"The chosen theme must be available to any descendant component without prop-drilling.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Behaviour:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Default theme is ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"light","nodeType":"text"},{"data":{},"marks":[],"value":". ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Clicking the toggle swaps the theme for the entire tree.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Toggling multiple times must alternate correctly.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Only React Context may be used for state propagation—no prop passing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Note:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Do not edit ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"data-testid","nodeType":"text"},{"data":{},"marks":[],"value":" attributes on any element as they are used for testing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"formattedTitle":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Theme Toggle","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"blogAccessLevel":["all"],"questionTopics":["react"],"slug":"theme-toggle-react","codeEntity":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"1FwYR2mqEAjQybL8MJpGO5","type":"Entry","createdAt":"2025-07-10T14:38:48.746Z","updatedAt":"2025-07-21T15:24:30.044Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":45,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"codeEntity"}},"locale":"en-US"},"fields":{"name":"Theme Toggle","slug":"theme-toggle-react","description":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Theme Toggle","nodeType":"text"}],"nodeType":"heading-1"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:3:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:7:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Requirements:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Create a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"ThemeToggle","nodeType":"text"},{"data":{},"marks":[],"value":" feature that lets the user switch between ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"light\"","nodeType":"text"},{"data":{},"marks":[],"value":" and ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"dark\"","nodeType":"text"},{"data":{},"marks":[],"value":" modes. ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"The chosen theme must be available to any descendant component without prop-drilling.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Behaviour:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Default theme is ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"light","nodeType":"text"},{"data":{},"marks":[],"value":". ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Clicking the toggle swaps the theme for the entire tree.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Toggling multiple times must alternate correctly.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Only React Context may be used for state propagation—no prop passing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Note:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Do not edit ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"data-testid","nodeType":"text"},{"data":{},"marks":[],"value":" attributes on any element as they are used for testing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"solution":{"nodeType":"document","data":{},"content":[{"nodeType":"heading-1","data":{},"content":[{"nodeType":"text","value":"Overview","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"6Mo6YpQpU5jjLMmAlBg763","type":"Entry","createdAt":"2025-07-21T15:24:27.686Z","updatedAt":"2025-07-21T15:24:27.686Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"videoEmbed"}},"locale":"en-US"},"fields":{"videoName":"theme-toggle-react","embedUrl":"https://player.vimeo.com/video/1103151890"}}},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Context & state","marks":[{"type":"bold"}],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"ThemeProvider","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" owns a single piece of state and toggle functionality:","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"4ZWFzDGJV8aedp38s0f7K1","type":"Entry","createdAt":"2025-07-10T15:07:00.638Z","updatedAt":"2025-07-10T15:07:00.638Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"codeBlock"}},"locale":"en-US"},"fields":{"title":"react-theme-toggle-context","id":"61205562-0a9f-4704-9be2-9e639cc09cb6","language":["javascript"],"indentationLevel":0,"body":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"const [theme, setTheme] = useState(\"light\");\nconst toggleTheme = () => setTheme(t => (t === \"light\" ? \"dark\" : \"light\"));","marks":[],"data":{}}]}]}}}},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Memoization","marks":[{"type":"bold"}],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Both values are memo-passed through a context:","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"7ah4q909b6Pb3TZI3pY6SX","type":"Entry","createdAt":"2025-07-10T15:07:41.725Z","updatedAt":"2025-07-10T15:07:41.725Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"codeBlock"}},"locale":"en-US"},"fields":{"title":"react-theme-toggle-provider","id":"cf6283e0-c502-41e5-ae33-d3c86d066a90","language":["javascript"],"indentationLevel":0,"body":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}}]}]}}}},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Subscribing","marks":[{"type":"bold"}],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"The ","marks":[],"data":{}},{"nodeType":"text","value":"useContext","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" hook is used to subscribe the component to ","marks":[],"data":{}},{"nodeType":"text","value":"ThemeContext","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":", instantly giving it the current ","marks":[],"data":{}},{"nodeType":"text","value":"theme","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" value and the ","marks":[],"data":{}},{"nodeType":"text","value":"toggleTheme","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" function supplied by the provider.","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"xvse45tz18v1"}},"id":"pbL0eraBPY5RhNbGptqd1","type":"Entry","createdAt":"2025-07-10T15:08:52.220Z","updatedAt":"2025-07-10T15:08:52.220Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"codeBlock"}},"locale":"en-US"},"fields":{"title":"react-theme-toggle-subscribing","id":"580e3f4b-04d0-47a2-b8de-b01340c871ac","language":["javascript"],"indentationLevel":0,"body":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"const { theme } = useContext(ThemeContext);","marks":[],"data":{}}]}]}}}},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]}]}]}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"embedded-entry-inline","data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},"inputType":["default"]}},"codeEntityDescription":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Theme Toggle","nodeType":"text"}],"nodeType":"heading-1"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:3:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:7:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Requirements:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Create a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"ThemeToggle","nodeType":"text"},{"data":{},"marks":[],"value":" feature that lets the user switch between ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"light\"","nodeType":"text"},{"data":{},"marks":[],"value":" and ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"\"dark\"","nodeType":"text"},{"data":{},"marks":[],"value":" modes. ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"The chosen theme must be available to any descendant component without prop-drilling.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Behaviour:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Default theme is ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"light","nodeType":"text"},{"data":{},"marks":[],"value":". ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Clicking the toggle swaps the theme for the entire tree.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Toggling multiple times must alternate correctly.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Only React Context may be used for state propagation—no prop passing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Note:","nodeType":"text"}],"nodeType":"heading-3"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Do not edit ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"data-testid","nodeType":"text"},{"data":{},"marks":[],"value":" attributes on any element as they are used for testing.","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"codeEntitySolution":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Overview","nodeType":"text"}],"nodeType":"heading-1"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:codeEntity:fields:solution:content:1:content:3:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[{"type":"bold"}],"value":"Context & state","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[{"type":"code"}],"value":"ThemeProvider","nodeType":"text"},{"data":{},"marks":[],"value":" owns a single piece of state and toggle functionality:","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:codeEntity:fields:solution:content:2:content:0:content:1:content:0:content:0:content:4:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[{"type":"bold"}],"value":"Memoization","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Both values are memo-passed through a context:","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:codeEntity:fields:solution:content:2:content:1:content:1:content:0:content:0:content:3:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:9:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[{"type":"bold"}],"value":"Subscribing","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"The ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"useContext","nodeType":"text"},{"data":{},"marks":[],"value":" hook is used to subscribe the component to ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"ThemeContext","nodeType":"text"},{"data":{},"marks":[],"value":", instantly giving it the current ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"theme","nodeType":"text"},{"data":{},"marks":[],"value":" value and the ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"toggleTheme","nodeType":"text"},{"data":{},"marks":[],"value":" function supplied by the provider.","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:5:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:codeEntity:fields:solution:content:2:content:2:content:1:content:0:content:0:content:11:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"target":"$10:props:topicBodyWithCodeEntityOutline:body:content:1:content:1:data:target"},"content":[],"nodeType":"embedded-entry-inline"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"codeEntityInputType":["default"]}}]