Global Styles
Global styles consist of a basic set of CSS rules designed to reset certain browser behaviors. Both CherryThemeProvider and ClientThemeProvider inject the Cherry global styles automatically. If your app ships its own global styles, pass $globalStyles={false} to ClientThemeProvider and render yours as a child instead. Outside the providers, include them manually:
import { GlobalStyles } from "cherry-styled-components";GlobalStyles is a function that takes a Theme and returns a global-style component built with createGlobalStyle. Call it with your theme and render the result, as in this minimal wrapper. Unlike the real CherryThemeProvider, it skips the dark theme handling and toggle context:
"use client";
import React from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { GlobalStyles, Theme } from "cherry-styled-components";
function ManualThemeProvider({
children,
theme,
}: {
children: React.ReactNode;
theme: Theme;
}) {
const GlobalStylesComponent = GlobalStyles(theme);
return (
<StyledThemeProvider theme={theme}>
<GlobalStylesComponent />
{children}
</StyledThemeProvider>
);
}
export { ManualThemeProvider };The Actual Global Styles
Adjust the global styles according to your project's requirements:
src/lib/utils/global.tsx
"use client";
import { createGlobalStyle } from "styled-components";
import { Theme } from "./theme";
const GlobalStyles = (theme: Theme) => createGlobalStyle`
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
scroll-behavior: smooth;
background-color: ${theme.colors.light};
}
body {
font-family: "Inter", sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
min-width: 0;
}
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
}
pre,
code,
kbd,
samp,
blockquote,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
ul li,
ol li {
margin: 0;
padding: 0;
color: ${theme.colors.dark};
}
a {
color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
}
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
figure {
margin: 0;
}
fieldset {
appearance: none;
border: none;
}
button,
input,
a,
img,
svg,
svg * {
transition: all 0.3s ease;
}
strong,
b {
font-weight: 700;
}
hr {
margin: 20px 0;
border: none;
border-bottom: 1px solid ${theme.colors.grayLight};
}
`;
export { GlobalStyles };