Stuck on an issue?

We’re open to supporting new Sandpack themes because our key goal is empowering developers to include custom live coding experiences over the web, regardless of your website layout or level of design expertise. That’s why we provide plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options. So, how can you contribute to new themes?

Sandpack Theme Builder

Sandpack provides a tool to guide you in creating your custom theme. Start with a dark or light theme, and then add your custom values like primary and secondary colors.

Plus, if you want to give an even more personal touch, you can go to the Advanced tab and set colors for the syntax highlight and other cases.

https://sandpack.codesandbox.io/theme

Publish a theme

At this point, you need to go to the Sandpack repository, fork, and introduce some changes in your pull request. BTW, you can just use CodeSandbox Projects to do that:

1. Open the Sandpack repository on CodeSandbox Projects;
2. Create a contribution branch, which will fork the repository for you:

3. Create a new file in codesandbox/sandpack/sandpack-themes/src folder with following file [theme name].ts
4. The content of this file must be an export for an object that contains the theme:

import type { SandpackTheme } from "./types";

export const THEME_NAME: SandpackTheme = {
  colors: {
		...
  },

  syntax: {
		...
  },
  font: {
    ...
  },
};

5. Include your new theme into the index.ts file, that exposes all themes.

Still not clear? Feel free to contact us on Discord or on GitHub.