Creating a Custom Style for Sandpack

At some point in setting up Sandpack in your application, you might want to customize its looks. You can tweak the appearance of the editor by creating a custom theme.

Creation

To make a theme, create a theme variable:

const theme = {
  palette: {
    activeText: '#de904d',
    defaultText: '#bababa',
    inactiveText: '#979797',
    activeBackground: '#2a2a2a',
    defaultBackground: '#343434',
    inputBackground: '#2e2e2e',
    accent: '#de904d',
    errorBackground: '#dac1fb',
    errorForeground: '#b08df8',
  },
  syntax: {
    plain: '#f0fdaf',
    comment: {
      color: '#757575',
      fontStyle: 'italic',
    },
    keyword: '#e5fd78',
    tag: '#f0fdaf',
    punctuation: '#ffffff',
    definition: '#eeeeee',
    property: '#e0a571',
    static: '#ffffff',
    string: '#dafecf',
  },
  typography: {
    bodyFont:
      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    monoFont:
      '"Fira Code", "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
    fontSize: '14px',
    lineHeight: '1.6',
  },
};

If you’re using TypeScript, you can use the SandpackTheme type.

Also, there is a GUI tool to easily create and preview your theme.

Usage

You can pass the theme that you created to the Sandpack component:

import { Sandpack } from '@codesandbox/sandpack-react';
import '@codesandbox/sandpack-react/dist/index.css';

export default function App() {
  return <Sandpack theme={theme} />;
}

You can learn more about theming in the Sandpack docs.