defineTheme preview

<script>
  import { defineTheme, extendTheme } from "svelte-highlight/theme";
  import atomOneDark from "svelte-highlight/themes/atom-one-dark";

  const midnight = defineTheme({
    name: "midnight",
    roles: {
      background: "#0b1021",
      foreground: "#d6deeb",
      comment: { color: "#637777", fontStyle: "italic" },
      keyword: "#c792ea",
      // ...
    },
  });

  const branded = extendTheme(atomOneDark, {
    name: "atom-one-dark-branded",
    roles: { keyword: "#c792ea" },
  });
</script>

<HighlightStyle theme={mode === "defineTheme" ? midnight : branded}>
  <Highlight language={typescript} {code} />
</HighlightStyle>

API

foregroundbackgroundcommentkeywordstringliteralfunctiontypevariablepropertytagpunctuationmetaadditiondeletion

defineTheme() building a full palette from the ~14 semantic roles above — pick any swatch to see it update live.

interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  // Say hello
  return `Hello, ${user.name}!`;
};