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

Try it out (17 total):

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.

Editable example

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

export default function App() {
  return (
        colors: {
          accent: "rebeccapurple",
        syntax: {
          tag: "#006400",
          string: "rgb(255, 165, 0)",
          plain: "tomato",