Appearance

Light
Dark

Custom colors

Primary
Secondary
Tertiary

Syntax

plain
comment
keyword
tag
punctuation
definition
property
static
string

Colors

surface1
surface2
surface3
clickable
base
disabled
hover
accent
error
errorSurface

Font

Themes

Amethyst
Aqua blue
Atom dark
Cobalt2
Cyberpunk
Dracula
Eco light
Free code camp dark
Github light
Gruvbox dark
Gruvbox light
Level up
Monokai pro
Neo cyan
Night owl
Sandpack dark

Preview

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

Export

{
  "colors": {
    "surface1": "#ffffff",
    "surface2": "#EFEFEF",
    "surface3": "#F3F3F3",
    "clickable": "#808080",
    "base": "#323232",
    "disabled": "#C5C5C5",
    "hover": "#4D4D4D",
    "accent": "#0971F1",
    "error": "#ff453a",
    "errorSurface": "#ffeceb"
  },
  "syntax": {
    "plain": "#151515",
    "comment": {
      "color": "#999",
      "fontStyle": "italic"
    },
    "keyword": "#0971F1",
    "tag": "#d28cf6",
    "punctuation": "#3B3B3B",
    "definition": "#042d60",
    "property": "#0971F1",
    "static": "#FF453A",
    "string": "#bf5af2"
  },
  "font": {
    "body": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
    "mono": "\"Fira Mono\", \"DejaVu Sans Mono\", Menlo, Consolas, \"Liberation Mono\", Monaco, \"Lucida Console\", monospace",
    "size": "13px",
    "lineHeight": "20px"
  }
}

How to use a custom theme?

Publish it to @codesandbox/sandpack-themes