# Global Styles

> Cherry's global CSS reset and base styles for consistent rendering across browsers.

Source: https://cherry.al/code/global-styles

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# 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:

```tsx
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:

```tsx
"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:

<Code title="src/lib/utils/global.tsx" language="tsx" code={`"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 };`} />

<Button href="https://github.com/cherry-design-system/styled-components/blob/main/src/lib/utils/global.tsx" icon="code" iconPosition="left">
  View Source
</Button>