Theming

Reactberry ships with theme support built into DesignSystemProvider.

Right now the package exposes two built-in theme names:

• light
• dark

Basic usage

If you do nothing, the provider uses the light theme by default.

import { DesignSystemProvider } from "@reactberry/system/providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <DesignSystemProvider>{children}</DesignSystemProvider>;
}

Switching themes

Pass themeName to the provider.

import { DesignSystemProvider } from "@reactberry/system/providers";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <DesignSystemProvider themeName="dark">{children}</DesignSystemProvider>;
}

What the provider does

DesignSystemProvider handles the Reactberry setup for you:

• registers the styled-components server/client integration
• provides the active theme through ThemeProvider
• applies Reactberry global styles

Disabling global styles

If you need to control global styling yourself, you can disable the built-in global styles.

<DesignSystemProvider withGlobalStyles={false}>{children}</DesignSystemProvider>

Working with theme-aware components

Reactberry primitives and blocks read values from the active theme, so common props like these should come from Reactberry instead of custom one-off CSS where possible:

• color
• skin
• fontSize
• fontWeight
• spacing props like p, m, gap
• shape props like shape

Example page

import { Box, Button, Text } from "@reactberry/system/elements";

export default function SettingsPage() {
  return (
    <Box p="l" display="flex" flexDirection="column" gap="m">
      <Text as="h1" fontSize="xxl" fontWeight="700">
        Theme-aware UI
      </Text>
      <Text as="p" color="secondary">
        The active Reactberry theme controls typography, color, and surfaces.
      </Text>
      <Button variant="default">Save preferences</Button>
    </Box>
  );
}

Next step

Once theming is in place, continue with Elements to understand the foundational layer, then Blocks for the composed reusable layer.