New

Announcing Rust Support in CodeSandbox.

You can now spin up a Rust development environment!

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 .
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 Discord or on GitHub.

Happy contributing! 🎉



Keep reading about Sandpack .

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.

AMA with the Sandpack team Recap
Sandpack Feb 18, 2022

AMA with the Sandpack team Recap

In this blog post, we feature a recap of the session, as well as questions from the community and answers from the team.

    Interactive code snippets with Sandpack - a showcase.
    Sandpack Feb 4, 2022

    Interactive code snippets with Sandpack - a showcase.

    Check out some of the amazing ways people have been using Sandpack to improve the experience of code on the web.