Themes

Have multi themes (Support dark mode):

see: node_modules/@codesandbox/sandpack-themes/dist/esm/index.d.ts

amethyst aquaBlue atomDark cobalt2 cyberpunk dracula ecoLight freeCodeCampDark githubLight

gruvboxDark gruvboxLight levelUp monokaiPro neoCyan nightOwl sandpackDark freeCodeCampLight oceanBlue

online preview

online preview

the default theme

You can click the themes button in the top right corner to switch to dark mode.

markdown code

      
      null
    

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('world');
</script>

Open Sandbox

custom theme

You can click the themes button in the top right corner to switch to dark mode.

markdown code

      
      null
    

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  helloWorld = "Hello world";
}

Open Sandbox