New

Introducing a new and improved editor powered by VS Code Web

Learn more
arrow_back
Blog chevron_right Sandpack
Sep 30, 2022

Contribute to Sandpack in Hacktoberfest

Empower developers with custom live coding experiences by contributing new themes to Sandpack .

Adewale Abati
Adewale Abati
Contribute to Sandpack in Hacktoberfest

At CodeSandbox, we are excited for Hacktoberfest and all the value that open source contributions generate at this time of the year for exciting open source projects, the maintainers and contributors.

We are thrilled to also share that we’ve added the hacktoberfest topic to Sandpack and would love your contributions.

Contributing Sandpack themes

Our key goal is empowering developers to include custom live coding experiences on the web, regardless of your website layout or level of design or expertise. To be able to do this, we have provided plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options from the community.

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 it 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

sandpack-theme-builder.gif

Publish a theme

At this point, you need to go to the Sandpack repository, fork it, and introduce some changes in your pull request. The easiest way to do this is to use CodeSandbox Projects:

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

Contribution branch

  1. Create a new file in the codesandbox/sandpack/sandpack-themes/src folder with the following name [myAwesomeTheme].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 myAwesomeTheme: SandpackTheme = {
  colors: {
    ...
  },
 
  syntax: {
    ...
  },
 
  font: {
    ...
  },
};
 
  1. Include your new theme into the index.ts file, which exposes all themes.
  2. Commit and send in your pull request. Done 🚀

We cannot wait to see the amazing themes from the community. And if you have any questions or want to reach out to the team, feel free to contact us on our community platform or on GitHub.

Happy contributing! 🎉



Keep reading about Sandpack .

Using Sandpack for React Libraries Documentation
Sandpack Apr 19, 2023

Using Sandpack for React Libraries Documentation

Improve the accessibility of your React library's Docs with live coding examples powered by Sandpack.

Announcing Sandpack 2.0 and a Node.js runtime for any browser
Sandpack Feb 16, 2023

Announcing Sandpack 2.0 and a Node.js runtime for any browser

We are beyond excited to introduce Sandpack 2.0, which brings a Node.js runtime that runs in every browser.

Sandpack v1: a fresh design and a new accessible API
Sandpack Jun 15, 2022

Sandpack v1: a fresh design and a new accessible API

Today, we are proud to announce the first major release of Sandpack v1 - A toolkit for creating in-browser live coding.