Theme Provider

The Theme Provider provides an interface to listen to theme changes. For example, you can detect when the user changes from dark to light mode and vice versa.

The text in this line will be Black in Light Mode and White in Dark Mode!

Example

A Highlight component that uses the ThemeProvider to change text color based on the theme.

export const Highlight = ({ children }) => {  const [theme, settheme] = useState("");
  function onChange(theme) {    settheme(theme);  }
  return (    <ThemeProvider onChange={onChange}>      <span        style={{          backgroundColor: "#11e8bb70",          borderRadius: "5px",          color: theme === "dark" ? "#fff" : "#000",          padding: "0.1rem",          width: "auto",        }}      >        {children}      </span>    </ThemeProvider>  );};

Props

Prop	Type	Default	Required
onChange	(theme: string) => void	none	false

onChange

A callback called when the theme changes. It recieves the current theme as a string.