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