Destiner's notes

Creating a Custom Style for Sandpack

9 February 2022

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:

ts
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:

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