Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hacktoberfest: contribute to Sandpack Themes

See original GitHub 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.

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:
Screenshot 2022-09-27 at 09 31 22
  1. Create a new file in codesandbox/sandpack/sandpack-themes/src folder with following file [theme name].ts
  2. 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: {
  1. 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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:3
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

VedanthBcommented, Oct 12, 2022

Hi I would like to give this a try.

Ananyamadhu08commented, Oct 30, 2022

Hello @danilowoz, I have added some new themes as well please review 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Contribute to Sandpack in Hacktoberfest - CodeSandbox Blog
Empower developers with custom live coding experiences by contributing new themes to Sandpack .
Read more >
CodeSandbox on Twitter: "A freeCodeCamp Dark theme, by ...
More than halfway through #hacktoberfest and we've already gotten a few amazing Sandpack theme contributions from the community See some of our favorite ......
Read more >
Sandpack dark theme #368 - riccardoperra/codeimage - GitHub
Instructions for contributions · Move to packages/highlight. · Run the pnpm generate:theme script and put the sandpackDark theme name · Open the ...
Read more >
Embed an In-browser Code Preview into Your React ...
css"; function App() { return ( <div> <Sandpack template="react" theme="sandpack-dark" /> </div> ); } export default App;. Now, that was just ...
Read more >
sandpack Open-Source Projects (Oct 2022) - LibHunt
Project mention: Contribute to Sandpack in Hacktoberfest | | 2022-10-04. Create a new file in the codesandbox/sandpack/sandpack-themes/src folder ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found