Skip to main content

Themes

All themes

See all themes available on @codesandbox/sandpack-themes and how you can use it

Access →

Sandpack Theme Builder

Design and customize your own theme, among other Sandpack presets.

Try it now ↗

The overall style can be set through the theme prop. Sandpack offers a set of predefined options, but individual values can be passed to customize the style of your Sandpack instance.

Standard Themes​

Sandpack comes with some predefined themes:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return (
    <Sandpack 
      // Try out the included themes below!
      theme="dark"
      // theme="light"
      // themes="auto"
    />
  );
}
Open on CodeSandbox

All themes​

Besides the included themes, you can also consume a set of themes from @codesandbox/sandpack-themes, an open-source package that contains many other themes compatible with Sandpack. You can find a list of all themes available on @codesandbox/sandpack-themes. To use a custom theme, you need to import and reference it in your code.



import { githubLight } from "@codesandbox/sandpack-themes";

<Sandpack theme={githubLight} />;
export default function App() {
  return <h1>Hello World</h1>
}
Open on CodeSandbox

Custom Theme​

You can also pass a partial theme object that overrides properties in the default theme, which is light.

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return (
    <Sandpack 
      theme={{
        colors: {
          accent: "rebeccapurple",
        },
        syntax: {
          tag: "#006400",
          string: "rgb(255, 165, 0)",
          plain: "tomato",
        },
      }}
    />
  );
}
Open on CodeSandbox