← All tasksReact · Middle

Theme with Context

Write a ThemeProvider and a useTheme hook. The provider stores the theme - "light" (default) or "dark" - and makes it available to every component inside. useTheme() returns { theme, toggleTheme }, where toggleTheme switches the theme.

All components under one provider see the same theme. Calling useTheme outside the provider must throw an error whose message contains ThemeProvider.

function ThemeProvider({ children }) {
  // ...
  return children;
}

function useTheme() {
  // ...
}

Ctrl+Enter runs the tests. Tab indents; to leave the editor with the keyboard, press Esc and then Tab. Your code is saved in this browser.

Tests (3)

function Probe() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>{theme}</button>;
}
render(<ThemeProvider><Probe /></ThemeProvider>);
expect(screen.getByRole('button').textContent).toBe('light');
fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button').textContent).toBe('dark');
fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button').textContent).toBe('light');

function Probe() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>{theme}</button>;
}
render(<ThemeProvider><Probe /><Probe /></ThemeProvider>);
fireEvent.click(screen.getAllByRole('button')[0]);
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual(['dark', 'dark']);

expect(() => renderHook(() => useTheme())).toThrow('ThemeProvider');