react/lib/components/playground/code-theme.ts

import { PrismTheme } from 'prism-react-renderer'
import { ZeitUIThemes } from 'components/styles/themes'

const makeCodeTheme = (theme: ZeitUIThemes): PrismTheme => ({
  plain: {
    backgroundColor: theme.palette.background,
    color: theme.palette.accents_4,
    fontWeight: '400',
    fontStyle: 'normal',
    fontFamily: theme.font.mono,
    fontSize: '.875rem',
    textRendering: 'geometricPrecision',
  },
  styles: [
    {
      types: ["comment", "prolog", "doctype", "cdata", "punctuation"],
      style: {
        color: 'theme.palette.accents_3',
        opacity: .5,
      }
    },
    {
      types: ["namespace"],
      style: {
        opacity: 1
      }
    },
    {
      types: ["tag", "operator", "number"],
      style: {
        color: theme.palette.accents_6,
      }
    },
    {
      types: ["property", "function"],
      style: {
        color: theme.palette.success,
      }
    },
    {
      types: ["tag-id", "selector", "atrule-id"],
      style: {
        color: "#eeebff"
      }
    },
    {
      types: ["attr-name"],
      style: {
        color: theme.palette.warning,
      }
    },
    {
      types: [
        "boolean",
        "string",
        "entity",
        "url",
        "attr-value",
        "keyword",
        "control",
        "directive",
        "unit",
        "statement",
        "regex",
        "at-rule",
        "placeholder",
        "variable"
      ],
      style: {
        color: theme.palette.purple,
      }
    },
    {
      types: ["deleted"],
      style: {
        textDecorationLine: "line-through"
      }
    },
    {
      types: ['language-javascript', 'script'],
      style: {
        color: theme.palette.success
      },
    },
    {
      types: ["inserted"],
      style: {
        textDecorationLine: "underline"
      }
    },
    {
      types: ["italic"],
      style: {
        fontStyle: "italic"
      }
    },
    {
      types: ["important", "bold"],
      style: {
        fontWeight: "bold"
      }
    },
    {
      types: ["important"],
      style: {
        color: "#c4b9fe"
      }
    }
  ]
})

export default makeCodeTheme