• Getting Started
• Themes

Sandpack Themes

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. 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.

import { amethyst } from "@codesandbox/sandpack-themes";
    
<Sandpack theme={amethyst} />;

export default function App() {
  return <h1>Hello world</h1>
}

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",
        },
      }}
    />
  );
}