Cherry provides built-in support for dark mode. All you have to do is pass the themeDark
prop to the CherryThemeProvider
component.
import {
CherryThemeProvider,
theme,
themeDark,
} from "cherry-styled-components";
export default function App({ Component, pageProps }) {
return (
<CherryThemeProvider theme={theme} themeDark={themeDark}>
<Component {...pageProps} />
</CherryThemeProvider>
);
}
Cherry will automatically check whether your system has dark mode enabled. If dark mode is detected, the default theme will be set to dark. This will happen only if you passed the themeDark
prop to the CherryThemeProvider
component.
If you’d like to manually switch themes in Cherry, you can take advantage of local storage to remember your last theme selection. Use the ThemeContext
provided by the Cherry library to switch themes programmatically.
This context gives you access to the current theme and a function to toggle between themes. Follow the example below:
import React from "react";
import {
Theme,
ThemeContext,
theme as themeLight,
themeDark,
} from "cherry-styled-components";
import { useTheme } from "styled-components";
export default function Header() {
const theme: Theme = useTheme() as Theme;
const { setTheme } = useContext(ThemeContext);
return (
<header>
<button
onClick={() => {
if (theme.isDark) {
setTheme(themeLight);
localStorage.theme = "light";
} else {
setTheme(themeDark);
localStorage.theme = "dark";
}
}}
>
Switch Theme
</button>
</header>
);
}
Explore the source code on GitHub: