Global Styles - Develop

Global styles consist of a basic set of CSS rules designed to reset certain browser behaviors. However, it’s important to note that we don’t reset everything—just the essential. If you’re utilizing the CherryThemeProvider, you can rest easy; it will automatically inject the Cherry global styles for you. Otherwise, if you’re not using the CherryThemeProvider, you can manually include these styles by following the code example below:

"use client";
import React from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { GlobalStyles, Theme } from "../utils";

function CherryThemeProvider({
  children,
  theme,
}: {
  children: React.ReactNode;
  theme: Theme;
}) {
  const GlobalStylesComponent = GlobalStyles(theme);

  return (
    <StyledThemeProvider theme={theme}>
      <GlobalStylesComponent />
      {children}
    </StyledThemeProvider>
  );
}

export { CherryThemeProvider };

The actual global styles

Remember if needed to adjust the global styles according to your project’s requirements.

"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;
}`;

export { GlobalStyles };

Explore the source code on GitHub: