Documentation index for AI agents (llms.txt). Markdown versions of every page are available by appending .md to the page URL. The full corpus is at /llms-full.txt.

Theme

The Cherry theme is a TypeScript object that defines various aspects of your project. Whether you're working on media queries, spacing sizes, colors, font sizes, or line heights, the Cherry theme has got you covered. Cherry also offers a Figma plugin to extract design tokens - check out the Figma documentation for details.

Wrap your entire application with CherryThemeProvider to ensure all components have access to the theme:

import {
  CherryThemeProvider,
  theme,
  themeDark,
} from "cherry-styled-components";

export default function App({ Component, pageProps }) {
  return (
    <CherryThemeProvider theme={theme} themeDark={themeDark}>
      <Component {...pageProps} />
    </CherryThemeProvider>
  );
}

Cherry exports two ready-made theme objects to start from: theme (light) and themeDark (dark). CherryThemeProvider accepts an optional themeDark prop - dark mode switching only happens when you pass it. The provider also exports a ThemeContext that gives you setTheme and toggleTheme for switching themes programmatically. See the Dark Mode documentation for details.

Theme Object

The theme object is type safe and uses TypeScript. The Theme interface has eight keys: the seven sections below plus an isDark boolean that marks a theme as a dark variant:

These sections, together with the isDark flag, make up the exported theme and themeDark objects:

export const theme: Theme = {
  breakpoints,
  spacing,
  colors,
  shadows,
  fonts,
  fontSizes,
  lineHeights,
  isDark: false,
};

export const themeDark: Theme = {
  breakpoints,
  spacing,
  colors: colorsDark,
  shadows: shadowsDark,
  fonts,
  fontSizes,
  lineHeights,
  isDark: true,
};

Using Shadows

Every theme ships five shadow levels (xs, sm, md, lg, xl) under theme.shadows. Reference them in your styled components to add elevation. When you pass themeDark to CherryThemeProvider, the dark theme swaps in shadowsDark, so elevation adapts to light and dark mode automatically:

import styled from "styled-components";

const Card = styled.div`
  background: ${({ theme }) => theme.colors.light};
  border-radius: ${({ theme }) => theme.spacing.radius.lg};
  box-shadow: ${({ theme }) => theme.shadows.md};
`;

See the Shadows foundation page for the full list of values.

Extending the Theme

When extending the Cherry theme, adhere to established patterns. Cherry uses the following size patterns: xs, sm, md, lg, xl, xxl, and xxxl. These patterns define not only media queries but also various other sizes.

If you extend the theme, ensure that you add the necessary type definitions to maintain consistency. All theme section interfaces (Theme, Breakpoints, Spacing, Colors, Shadows, Fonts, FontSizes, LineHeights) are exported, so you can extend them in TypeScript.

Changelog PreviousDark ModeNext
DiscordFigma TemplateFigma PluginGitHub