cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
32 lines (31 loc) • 1.21 kB
JavaScript
"use client";
"use client";
import { GlobalStyles } from "../utils/global.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { createContext, useEffect, useState } from "react";
import { ThemeProvider } from "styled-components";
//#region src/lib/styled-components/theme-provider.tsx
var ThemeContext = /* @__PURE__ */ createContext({ setTheme: () => {} });
function CherryThemeProvider({ children, theme, themeDark }) {
const [currentTheme, setTheme] = useState(theme);
useEffect(() => {
if (!themeDark) return setTheme(theme);
if (localStorage.theme === "dark" || !("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.add("dark");
setTheme(themeDark);
} else {
document.documentElement.classList.remove("dark");
setTheme(theme);
}
}, [theme, themeDark]);
const GlobalStylesComponent = GlobalStyles(currentTheme);
return /* @__PURE__ */ jsx(ThemeProvider, {
theme: currentTheme,
children: /* @__PURE__ */ jsxs(ThemeContext.Provider, {
value: { setTheme },
children: [/* @__PURE__ */ jsx(GlobalStylesComponent, {}), children]
})
});
}
//#endregion
export { CherryThemeProvider, ThemeContext };