react-email/src/components/code-block/themes.ts

A live preview of your emails right in your browser.

import type Prism from 'prismjs';
import type React from 'react';

export type Theme = Record<
  string | 'base' | keyof Prism.Grammar,
  React.CSSProperties
>;

export const xonokai = {
  base: {
    MozTabSize: '2',
    OTabSize: '2',
    tabSize: '2',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    whiteSpace: 'pre-wrap',
    wordWrap: 'normal',
    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
    fontSize: '14px',
    color: '#76d9e6',
    textShadow: 'none',
    background: '#2a2a2a',
    padding: '15px',
    borderRadius: '4px',
    border: '1px solid #e1e1e8',
    overflow: 'auto',
    position: 'relative',
  },
  namespace: {
    opacity: '.7',
  },
  comment: {
    color: '#6f705e',
  },
  prolog: {
    color: '#6f705e',
  },
  doctype: {
    color: '#6f705e',
  },
  cdata: {
    color: '#6f705e',
  },
  operator: {
    color: '#a77afe',
  },
  boolean: {
    color: '#a77afe',
  },
  number: {
    color: '#a77afe',
  },
  'attr-name': {
    color: '#e6d06c',
  },
  string: {
    color: '#e6d06c',
  },
  entity: {
    color: '#e6d06c',
    cursor: 'help',
  },
  url: {
    color: '#e6d06c',
  },
  selector: {
    color: '#a6e22d',
  },
  inserted: {
    color: '#a6e22d',
  },
  atrule: {
    color: '#ef3b7d',
  },
  'attr-value': {
    color: '#ef3b7d',
  },
  keyword: {
    color: '#ef3b7d',
  },
  important: {
    color: '#ef3b7d',
    fontWeight: 'bold',
  },
  deleted: {
    color: '#ef3b7d',
  },
  regex: {
    color: '#76d9e6',
  },
  statement: {
    color: '#76d9e6',
    fontWeight: 'bold',
  },
  placeholder: {
    color: '#fff',
  },
  variable: {
    color: '#fff',
  },
  bold: {
    fontWeight: 'bold',
  },
  punctuation: {
    color: '#bebec5',
  },
  italic: {
    fontStyle: 'italic',
  },
} as const;

export const vscDarkPlus = {
  base: {
    color: '#d4d4d4',
    fontSize: '13px',
    textShadow: 'none',
    fontFamily:
      'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    background: '#1e1e1e',
  },
  'doctype .token.doctype-tag': {
    color: '#569CD6',
  },
  'doctype .token.name': {
    color: '#9cdcfe',
  },
  comment: {
    color: '#6a9955',
  },
  prolog: {
    color: '#6a9955',
  },
  punctuation: {
    color: '#d4d4d4',
  },
  property: {
    color: '#9cdcfe',
  },
  tag: {
    color: '#569cd6',
  },
  boolean: {
    color: '#569cd6',
  },
  number: {
    color: '#b5cea8',
  },
  constant: {
    color: '#9cdcfe',
  },
  symbol: {
    color: '#b5cea8',
  },
  inserted: {
    color: '#b5cea8',
  },
  unit: {
    color: '#b5cea8',
  },
  selector: {
    color: '#d7ba7d',
  },
  'attr-name': {
    color: '#9cdcfe',
  },
  string: {
    color: '#ce9178',
  },
  char: {
    color: '#ce9178',
  },
  builtin: {
    color: '#ce9178',
  },
  deleted: {
    color: '#ce9178',
  },
  operator: {
    color: '#d4d4d4',
  },
  entity: {
    color: '#569cd6',
  },
  'operator.arrow': {
    color: '#569CD6',
  },
  atrule: {
    color: '#ce9178',
  },
  'atrule .token.rule': {
    color: '#c586c0',
  },
  'atrule .token.url': {
    color: '#9cdcfe',
  },
  'atrule .token.url .token.function': {
    color: '#dcdcaa',
  },
  'atrule .token.url .token.punctuation': {
    color: '#d4d4d4',
  },
  keyword: {
    color: '#569CD6',
  },
  'keyword.module': {
    color: '#c586c0',
  },
  'keyword.control-flow': {
    color: '#c586c0',
  },
  function: {
    color: '#dcdcaa',
  },
  'function .token.maybe-class-name': {
    color: '#dcdcaa',
  },
  regex: {
    color: '#d16969',
  },
  important: {
    color: '#569cd6',
  },
  italic: {
    fontStyle: 'italic',
  },
  'class-name': {
    color: '#4ec9b0',
  },
  'maybe-class-name': {
    color: '#4ec9b0',
  },
  console: {
    color: '#9cdcfe',
  },
  parameter: {
    color: '#9cdcfe',
  },
  interpolation: {
    color: '#9cdcfe',
  },
  'punctuation.interpolation-punctuation': {
    color: '#569cd6',
  },
  variable: {
    color: '#9cdcfe',
  },
  'imports .token.maybe-class-name': {
    color: '#9cdcfe',
  },
  'exports .token.maybe-class-name': {
    color: '#9cdcfe',
  },
  escape: {
    color: '#d7ba7d',
  },
  'tag .token.punctuation': {
    color: '#808080',
  },
  cdata: {
    color: '#808080',
  },
  'attr-value': {
    color: '#ce9178',
  },
  'attr-value .token.punctuation': {
    color: '#ce9178',
  },
  'attr-value .token.punctuation.attr-equals': {
    color: '#d4d4d4',
  },
  namespace: {
    color: '#4ec9b0',
  },
} as const;
export const duotoneForest = {
  base: {
    fontFamily:
      'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',
    fontSize: '14px',
    lineHeight: '1.375',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    background: '#2a2d2a',
    color: '#687d68',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#535f53',
  },
  prolog: {
    color: '#535f53',
  },
  doctype: {
    color: '#535f53',
  },
  cdata: {
    color: '#535f53',
  },
  punctuation: {
    color: '#535f53',
  },
  namespace: {
    opacity: '.7',
  },
  tag: {
    color: '#a2b34d',
  },
  operator: {
    color: '#a2b34d',
  },
  number: {
    color: '#a2b34d',
  },
  property: {
    color: '#687d68',
  },
  function: {
    color: '#687d68',
  },
  'tag-id': {
    color: '#f0fff0',
  },
  selector: {
    color: '#f0fff0',
  },
  'atrule-id': {
    color: '#f0fff0',
  },
  'attr-name': {
    color: '#b3d6b3',
  },
  boolean: {
    color: '#e5fb79',
  },
  string: {
    color: '#e5fb79',
  },
  entity: {
    color: '#e5fb79',
    cursor: 'help',
  },
  url: {
    color: '#e5fb79',
  },
  'attr-value': {
    color: '#e5fb79',
  },
  keyword: {
    color: '#e5fb79',
  },
  control: {
    color: '#e5fb79',
  },
  directive: {
    color: '#e5fb79',
  },
  unit: {
    color: '#e5fb79',
  },
  statement: {
    color: '#e5fb79',
  },
  regex: {
    color: '#e5fb79',
  },
  atrule: {
    color: '#e5fb79',
  },
  placeholder: {
    color: '#e5fb79',
  },
  variable: {
    color: '#e5fb79',
  },
  deleted: {
    textDecoration: 'line-through',
  },
  inserted: {
    borderBottom: '1px dotted #f0fff0',
    textDecoration: 'none',
  },
  italic: {
    fontStyle: 'italic',
  },
  important: {
    fontWeight: 'bold',
    color: '#b3d6b3',
  },
  bold: {
    fontWeight: 'bold',
  },
} as const;
export const holiTheme = {
  base: {},
  comment: {
    color: '#446e69',
  },
  prolog: {
    color: '#446e69',
  },
  doctype: {
    color: '#446e69',
  },
  cdata: {
    color: '#446e69',
  },
  punctuation: {
    color: '#d6b007',
  },
  property: {
    color: '#d6e7ff',
  },
  tag: {
    color: '#d6e7ff',
  },
  boolean: {
    color: '#d6e7ff',
  },
  number: {
    color: '#d6e7ff',
  },
  constant: {
    color: '#d6e7ff',
  },
  symbol: {
    color: '#d6e7ff',
  },
  deleted: {
    color: '#d6e7ff',
  },
  selector: {
    color: '#e60067',
  },
  'attr-name': {
    color: '#e60067',
  },
  builtin: {
    color: '#e60067',
  },
  inserted: {
    color: '#e60067',
  },
  string: {
    color: '#49c6ec',
  },
  char: {
    color: '#49c6ec',
  },
  operator: {
    color: '#ec8e01',
    background: 'transparent',
  },
  entity: {
    color: '#ec8e01',
    background: 'transparent',
  },
  url: {
    color: '#ec8e01',
    background: 'transparent',
  },
  atrule: {
    color: '#0fe468',
  },
  'attr-value': {
    color: '#0fe468',
  },
  keyword: {
    color: '#0fe468',
  },
  function: {
    color: '#78f3e9',
  },
  'class-name': {
    color: '#78f3e9',
  },
  regex: {
    color: '#d6e7ff',
  },
  important: {
    color: '#d6e7ff',
  },
  variable: {
    color: '#d6e7ff',
  },
} as const;
export const cb = {
  base: {
    color: '#fff',
    textShadow: '0 1px 1px #000',
    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
    direction: 'ltr',
    textAlign: 'left',
    wordSpacing: 'normal',
    whiteSpace: 'pre',
    wordWrap: 'normal',
    lineHeight: '1.4',
    background: '#222',
    border: '0',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '15px',
    margin: '1em 0',
    overflow: 'auto',
    MozBorderRadius: '8px',
    WebkitBorderRadius: '8px',
    borderRadius: '8px',
  },
  comment: {
    color: '#797979',
  },
  prolog: {
    color: '#797979',
  },
  doctype: {
    color: '#797979',
  },
  cdata: {
    color: '#797979',
  },
  selector: {
    color: '#fff',
  },
  operator: {
    color: '#fff',
  },
  punctuation: {
    color: '#fff',
  },
  namespace: {
    opacity: '.7',
  },
  tag: {
    color: '#ffd893',
  },
  boolean: {
    color: '#ffd893',
  },
  atrule: {
    color: '#B0C975',
  },
  'attr-value': {
    color: '#B0C975',
  },
  hex: {
    color: '#B0C975',
  },
  string: {
    color: '#B0C975',
  },
  property: {
    color: '#c27628',
  },
  entity: {
    color: '#c27628',
    cursor: 'help',
  },
  url: {
    color: '#c27628',
  },
  'attr-name': {
    color: '#c27628',
  },
  keyword: {
    color: '#c27628',
  },
  regex: {
    color: '#9B71C6',
  },
  function: {
    color: '#e5a638',
  },
  constant: {
    color: '#e5a638',
  },
  variable: {
    color: '#fdfba8',
  },
  number: {
    color: '#8799B0',
  },
  important: {
    color: '#E45734',
  },
  deliminator: {
    color: '#E45734',
  },
} as const;
export const vs = {
  base: {
    color: '#393A34',
    fontFamily:
      '"Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    fontSize: '.9em',
    lineHeight: '1.2em',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    border: '1px solid #dddddd',
    backgroundColor: 'white',
  },
  comment: {
    color: '#008000',
    fontStyle: 'italic',
  },
  prolog: {
    color: '#008000',
    fontStyle: 'italic',
  },
  doctype: {
    color: '#008000',
    fontStyle: 'italic',
  },
  cdata: {
    color: '#008000',
    fontStyle: 'italic',
  },
  namespace: {
    opacity: '.7',
  },
  string: {
    color: '#A31515',
  },
  punctuation: {
    color: '#393A34',
  },
  operator: {
    color: '#393A34',
  },
  url: {
    color: '#36acaa',
  },
  symbol: {
    color: '#36acaa',
  },
  number: {
    color: '#36acaa',
  },
  boolean: {
    color: '#36acaa',
  },
  variable: {
    color: '#36acaa',
  },
  constant: {
    color: '#36acaa',
  },
  inserted: {
    color: '#36acaa',
  },
  atrule: {
    color: '#0000ff',
  },
  keyword: {
    color: '#0000ff',
  },
  'attr-value': {
    color: '#0000ff',
  },
  function: {
    color: '#393A34',
  },
  deleted: {
    color: '#9a050f',
  },
  selector: {
    color: '#800000',
  },
  important: {
    color: '#e90',
    fontWeight: 'bold',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  'class-name': {
    color: '#2B91AF',
  },
  tag: {
    color: '#800000',
  },
  'attr-name': {
    color: '#ff0000',
  },
  property: {
    color: '#ff0000',
  },
  regex: {
    color: '#ff0000',
  },
  entity: {
    color: '#ff0000',
  },
  'directive.tag .tag': {
    background: '#ffff00',
    color: '#393A34',
  },
} as const;
export const materialDark = {
  base: {
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    color: '#eee',
    background: '#2f2f2f',
    fontFamily: 'Roboto Mono, monospace',
    fontSize: '1em',
    lineHeight: '1.5em',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    overflow: 'auto',
    position: 'relative',
    margin: '0.5em 0',
    padding: '1.25em 1em',
  },
  atrule: {
    color: '#c792ea',
  },
  'attr-name': {
    color: '#ffcb6b',
  },
  'attr-value': {
    color: '#a5e844',
  },
  attribute: {
    color: '#a5e844',
  },
  boolean: {
    color: '#c792ea',
  },
  builtin: {
    color: '#ffcb6b',
  },
  cdata: {
    color: '#80cbc4',
  },
  char: {
    color: '#80cbc4',
  },
  class: {
    color: '#ffcb6b',
  },
  'class-name': {
    color: '#f2ff00',
  },
  comment: {
    color: '#616161',
  },
  constant: {
    color: '#c792ea',
  },
  deleted: {
    color: '#ff6666',
  },
  doctype: {
    color: '#616161',
  },
  entity: {
    color: '#ff6666',
  },
  function: {
    color: '#c792ea',
  },
  hexcode: {
    color: '#f2ff00',
  },
  id: {
    color: '#c792ea',
    fontWeight: 'bold',
  },
  important: {
    color: '#c792ea',
    fontWeight: 'bold',
  },
  inserted: {
    color: '#80cbc4',
  },
  keyword: {
    color: '#c792ea',
  },
  number: {
    color: '#fd9170',
  },
  operator: {
    color: '#89ddff',
  },
  prolog: {
    color: '#616161',
  },
  property: {
    color: '#80cbc4',
  },
  'pseudo-class': {
    color: '#a5e844',
  },
  'pseudo-element': {
    color: '#a5e844',
  },
  punctuation: {
    color: '#89ddff',
  },
  regex: {
    color: '#f2ff00',
  },
  selector: {
    color: '#ff6666',
  },
  string: {
    color: '#a5e844',
  },
  symbol: {
    color: '#c792ea',
  },
  tag: {
    color: '#ff6666',
  },
  unit: {
    color: '#fd9170',
  },
  url: {
    color: '#ff6666',
  },
  variable: {
    color: '#ff6666',
  },
} as const;
export const dracula = {
  base: {
    color: '#f8f8f2',
    background: '#282a36',
    textShadow: '0 1px rgba(0, 0, 0, 0.3)',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    borderRadius: '0.3em',
  },
  comment: {
    color: '#6272a4',
  },
  prolog: {
    color: '#6272a4',
  },
  doctype: {
    color: '#6272a4',
  },
  cdata: {
    color: '#6272a4',
  },
  punctuation: {
    color: '#f8f8f2',
  },
  property: {
    color: '#ff79c6',
  },
  tag: {
    color: '#ff79c6',
  },
  constant: {
    color: '#ff79c6',
  },
  symbol: {
    color: '#ff79c6',
  },
  deleted: {
    color: '#ff79c6',
  },
  boolean: {
    color: '#bd93f9',
  },
  number: {
    color: '#bd93f9',
  },
  selector: {
    color: '#50fa7b',
  },
  'attr-name': {
    color: '#50fa7b',
  },
  string: {
    color: '#50fa7b',
  },
  char: {
    color: '#50fa7b',
  },
  builtin: {
    color: '#50fa7b',
  },
  inserted: {
    color: '#50fa7b',
  },
  operator: {
    color: '#f8f8f2',
  },
  entity: {
    color: '#f8f8f2',
    cursor: 'help',
  },
  url: {
    color: '#f8f8f2',
  },
  variable: {
    color: '#f8f8f2',
  },
  atrule: {
    color: '#f1fa8c',
  },
  'attr-value': {
    color: '#f1fa8c',
  },
  function: {
    color: '#f1fa8c',
  },
  'class-name': {
    color: '#f1fa8c',
  },
  keyword: {
    color: '#8be9fd',
  },
  regex: {
    color: '#ffb86c',
  },
  important: {
    color: '#ffb86c',
    fontWeight: 'bold',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
} as const;
export const shadesOfPurple = {
  base: {},
  '': {
    fontWeight: '400',
  },
  comment: {
    color: '#b362ff',
  },
  prolog: {
    color: '#b362ff',
  },
  cdata: {
    color: '#b362ff',
  },
  delimiter: {
    color: '#ff9d00',
  },
  keyword: {
    color: '#ff9d00',
  },
  selector: {
    color: '#ff9d00',
  },
  important: {
    color: '#ff9d00',
  },
  atrule: {
    color: '#ff9d00',
  },
  operator: {
    color: 'rgb(255, 180, 84)',
    background: 'none',
  },
  'attr-name': {
    color: 'rgb(255, 180, 84)',
  },
  punctuation: {
    color: '#ffffff',
  },
  boolean: {
    color: 'rgb(255, 98, 140)',
  },
  tag: {
    color: 'rgb(255, 157, 0)',
  },
  'tag .punctuation': {
    color: 'rgb(255, 157, 0)',
  },
  doctype: {
    color: 'rgb(255, 157, 0)',
  },
  builtin: {
    color: 'rgb(255, 157, 0)',
  },
  entity: {
    color: '#6897bb',
    background: 'none',
  },
  symbol: {
    color: '#6897bb',
  },
  number: {
    color: '#ff628c',
  },
  property: {
    color: '#ff628c',
  },
  constant: {
    color: '#ff628c',
  },
  variable: {
    color: '#ff628c',
  },
  string: {
    color: '#a5ff90',
  },
  char: {
    color: '#a5ff90',
  },
  'attr-value': {
    color: '#a5c261',
  },
  'attr-value .punctuation': {
    color: '#a5c261',
  },
  'attr-value .punctuation:first-child': {
    color: '#a9b7c6',
  },
  url: {
    color: '#287bde',
    textDecoration: 'underline',
    background: 'none',
  },
  function: {
    color: 'rgb(250, 208, 0)',
  },
  regex: {
    background: '#364135',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  inserted: {
    background: '#00ff00',
  },
  deleted: {
    background: '#ff000d',
  },
  'class-name': {
    color: '#fb94ff',
  },
} as const;
export const gruvboxDark = {
  base: {
    color: '#ebdbb2',
    fontFamily: 'Consolas, Monaco, "Andale Mono", monospace',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '1em',
    margin: '0.5em 0',
    overflow: 'auto',
    background: '#1d2021',
  },
  comment: {
    color: '#a89984',
  },
  prolog: {
    color: '#a89984',
  },
  cdata: {
    color: '#a89984',
  },
  delimiter: {
    color: '#fb4934',
  },
  boolean: {
    color: '#fb4934',
  },
  keyword: {
    color: '#fb4934',
  },
  selector: {
    color: '#fb4934',
  },
  important: {
    color: '#fb4934',
  },
  atrule: {
    color: '#fb4934',
  },
  operator: {
    color: '#a89984',
  },
  punctuation: {
    color: '#a89984',
  },
  'attr-name': {
    color: '#a89984',
  },
  tag: {
    color: '#fabd2f',
  },
  'tag .punctuation': {
    color: '#fabd2f',
  },
  doctype: {
    color: '#fabd2f',
  },
  builtin: {
    color: '#fabd2f',
  },
  entity: {
    color: '#d3869b',
  },
  number: {
    color: '#d3869b',
  },
  symbol: {
    color: '#d3869b',
  },
  property: {
    color: '#fb4934',
  },
  constant: {
    color: '#fb4934',
  },
  variable: {
    color: '#fb4934',
  },
  string: {
    color: '#b8bb26',
  },
  char: {
    color: '#b8bb26',
  },
  'attr-value': {
    color: '#a89984',
  },
  'attr-value .punctuation': {
    color: '#a89984',
  },
  url: {
    color: '#b8bb26',
    textDecoration: 'underline',
  },
  function: {
    color: '#fabd2f',
  },
  regex: {
    background: '#b8bb26',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  inserted: {
    background: '#a89984',
  },
  deleted: {
    background: '#fb4934',
  },
} as const;
export const baseAteliersulphurpoolLight = {
  base: {
    fontFamily:
      'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',
    fontSize: '14px',
    lineHeight: '1.375',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    background: '#f5f7ff',
    color: '#5e6687',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#898ea4',
  },
  prolog: {
    color: '#898ea4',
  },
  doctype: {
    color: '#898ea4',
  },
  cdata: {
    color: '#898ea4',
  },
  punctuation: {
    color: '#5e6687',
  },
  namespace: {
    opacity: '.7',
  },
  operator: {
    color: '#c76b29',
  },
  boolean: {
    color: '#c76b29',
  },
  number: {
    color: '#c76b29',
  },
  property: {
    color: '#c08b30',
  },
  tag: {
    color: '#3d8fd1',
  },
  string: {
    color: '#22a2c9',
  },
  selector: {
    color: '#6679cc',
  },
  'attr-name': {
    color: '#c76b29',
  },
  entity: {
    color: '#22a2c9',
    cursor: 'help',
  },
  url: {
    color: '#22a2c9',
  },
  'attr-value': {
    color: '#ac9739',
  },
  keyword: {
    color: '#ac9739',
  },
  control: {
    color: '#ac9739',
  },
  directive: {
    color: '#ac9739',
  },
  unit: {
    color: '#ac9739',
  },
  statement: {
    color: '#22a2c9',
  },
  regex: {
    color: '#22a2c9',
  },
  atrule: {
    color: '#22a2c9',
  },
  placeholder: {
    color: '#3d8fd1',
  },
  variable: {
    color: '#3d8fd1',
  },
  deleted: {
    textDecoration: 'line-through',
  },
  inserted: {
    borderBottom: '1px dotted #202746',
    textDecoration: 'none',
  },
  italic: {
    fontStyle: 'italic',
  },
  important: {
    fontWeight: 'bold',
    color: '#c94922',
  },
  bold: {
    fontWeight: 'bold',
  },
} as const;
export const coldarkCold = {
  base: {
    color: '#111b27',
    background: '#e3eaf2',
    fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '0.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#3c526d',
  },
  prolog: {
    color: '#3c526d',
  },
  doctype: {
    color: '#3c526d',
  },
  cdata: {
    color: '#3c526d',
  },
  punctuation: {
    color: '#111b27',
  },
  'delimiter.important': {
    color: '#006d6d',
    fontWeight: 'inherit',
  },
  'selector .parent': {
    color: '#006d6d',
  },
  tag: {
    color: '#006d6d',
  },
  'tag .token.punctuation': {
    color: '#006d6d',
  },
  'attr-name': {
    color: '#755f00',
  },
  boolean: {
    color: '#755f00',
  },
  'boolean.important': {
    color: '#755f00',
  },
  number: {
    color: '#755f00',
  },
  constant: {
    color: '#755f00',
  },
  'selector .token.attribute': {
    color: '#755f00',
  },
  'class-name': {
    color: '#005a8e',
  },
  key: {
    color: '#005a8e',
  },
  parameter: {
    color: '#005a8e',
  },
  property: {
    color: '#005a8e',
  },
  'property-access': {
    color: '#005a8e',
  },
  variable: {
    color: '#005a8e',
  },
  'attr-value': {
    color: '#116b00',
  },
  inserted: {
    color: '#116b00',
  },
  color: {
    color: '#116b00',
  },
  'selector .token.value': {
    color: '#116b00',
  },
  string: {
    color: '#116b00',
  },
  'string .token.url-link': {
    color: '#116b00',
  },
  builtin: {
    color: '#af00af',
  },
  'keyword-array': {
    color: '#af00af',
  },
  package: {
    color: '#af00af',
  },
  regex: {
    color: '#af00af',
  },
  function: {
    color: '#7c00aa',
  },
  'selector .token.class': {
    color: '#7c00aa',
  },
  'selector .token.id': {
    color: '#7c00aa',
  },
  'atrule .token.rule': {
    color: '#a04900',
  },
  combinator: {
    color: '#a04900',
  },
  keyword: {
    color: '#a04900',
  },
  operator: {
    color: '#a04900',
  },
  'pseudo-class': {
    color: '#a04900',
  },
  'pseudo-element': {
    color: '#a04900',
  },
  selector: {
    color: '#a04900',
  },
  unit: {
    color: '#a04900',
  },
  deleted: {
    color: '#c22f2e',
  },
  important: {
    color: '#c22f2e',
    fontWeight: 'bold',
  },
  'keyword-this': {
    color: '#005a8e',
    fontWeight: 'bold',
  },
  this: {
    color: '#005a8e',
    fontWeight: 'bold',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  entity: {
    cursor: 'help',
  },
  'token.tab:not(:empty):before': {
    color: '#3c526d',
  },
  'token.cr:before': {
    color: '#3c526d',
  },
  'token.lf:before': {
    color: '#3c526d',
  },
  'token.space:before': {
    color: '#3c526d',
  },
} as const;
export const solarizedDarkAtom = {
  base: {
    color: '#839496',
    textShadow: '0 1px rgba(0, 0, 0, 0.3)',
    fontFamily:
      "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    borderRadius: '0.3em',
    background: '#002b36',
  },
  comment: {
    color: '#586e75',
  },
  prolog: {
    color: '#586e75',
  },
  doctype: {
    color: '#586e75',
  },
  cdata: {
    color: '#586e75',
  },
  punctuation: {
    color: '#93a1a1',
  },
  property: {
    color: '#268bd2',
  },
  keyword: {
    color: '#268bd2',
  },
  tag: {
    color: '#268bd2',
  },
  'class-name': {
    color: '#FFFFB6',
    textDecoration: 'underline',
  },
  boolean: {
    color: '#b58900',
  },
  constant: {
    color: '#b58900',
  },
  symbol: {
    color: '#dc322f',
  },
  deleted: {
    color: '#dc322f',
  },
  number: {
    color: '#859900',
  },
  selector: {
    color: '#859900',
  },
  'attr-name': {
    color: '#859900',
  },
  string: {
    color: '#859900',
  },
  char: {
    color: '#859900',
  },
  builtin: {
    color: '#859900',
  },
  inserted: {
    color: '#859900',
  },
  variable: {
    color: '#268bd2',
  },
  operator: {
    color: '#EDEDED',
  },
  function: {
    color: '#268bd2',
  },
  regex: {
    color: '#E9C062',
  },
  important: {
    color: '#fd971f',
    fontWeight: 'bold',
  },
  entity: {
    color: '#FFFFB6',
    cursor: 'help',
  },
  url: {
    color: '#96CBFE',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  atrule: {
    color: '#F9EE98',
  },
  'attr-value': {
    color: '#F9EE98',
  },
} as const;
export const synthwave84 = {
  base: {
    color: '#f92aad',
    textShadow: '0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3',
    background: 'none',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    fontSize: '1em',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    backgroundColor: 'transparent !important',
    backgroundImage: 'linear-gradient(to bottom, #2a2139 75%, #34294f)',
  },
  comment: {
    color: '#8e8e8e',
  },
  'block-comment': {
    color: '#8e8e8e',
  },
  prolog: {
    color: '#8e8e8e',
  },
  doctype: {
    color: '#8e8e8e',
  },
  cdata: {
    color: '#8e8e8e',
  },
  punctuation: {
    color: '#ccc',
  },
  tag: {
    color: '#e2777a',
  },
  'attr-name': {
    color: '#e2777a',
  },
  namespace: {
    color: '#e2777a',
  },
  number: {
    color: '#e2777a',
  },
  unit: {
    color: '#e2777a',
  },
  hexcode: {
    color: '#e2777a',
  },
  deleted: {
    color: '#e2777a',
  },
  property: {
    color: '#72f1b8',
    textShadow: '0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475',
  },
  selector: {
    color: '#72f1b8',
    textShadow: '0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475',
  },
  'function-name': {
    color: '#6196cc',
  },
  boolean: {
    color: '#fdfdfd',
    textShadow:
      '0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975',
  },
  'selector .token.id': {
    color: '#fdfdfd',
    textShadow:
      '0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975',
  },
  function: {
    color: '#fdfdfd',
    textShadow:
      '0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975',
  },
  'class-name': {
    color: '#fff5f6',
    textShadow:
      '0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75',
  },
  constant: {
    color: '#f92aad',
    textShadow: '0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3',
  },
  symbol: {
    color: '#f92aad',
    textShadow: '0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3',
  },
  important: {
    color: '#f4eee4',
    textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575',
    fontWeight: 'bold',
  },
  atrule: {
    color: '#f4eee4',
    textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575',
  },
  keyword: {
    color: '#f4eee4',
    textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575',
  },
  'selector .token.class': {
    color: '#f4eee4',
    textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575',
  },
  builtin: {
    color: '#f4eee4',
    textShadow: '0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575',
  },
  string: {
    color: '#f87c32',
  },
  char: {
    color: '#f87c32',
  },
  'attr-value': {
    color: '#f87c32',
  },
  regex: {
    color: '#f87c32',
  },
  variable: {
    color: '#f87c32',
  },
  operator: {
    color: '#67cdcc',
  },
  entity: {
    color: '#67cdcc',
    cursor: 'help',
  },
  url: {
    color: '#67cdcc',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  inserted: {
    color: 'green',
  },
} as const;
export const materialOceanic = {
  base: {
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    color: '#c3cee3',
    background: '#263238',
    fontFamily: 'Roboto Mono, monospace',
    fontSize: '1em',
    lineHeight: '1.5em',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    overflow: 'auto',
    position: 'relative',
    margin: '0.5em 0',
    padding: '1.25em 1em',
  },
  atrule: {
    color: '#c792ea',
  },
  'attr-name': {
    color: '#ffcb6b',
  },
  'attr-value': {
    color: '#c3e88d',
  },
  attribute: {
    color: '#c3e88d',
  },
  boolean: {
    color: '#c792ea',
  },
  builtin: {
    color: '#ffcb6b',
  },
  cdata: {
    color: '#80cbc4',
  },
  char: {
    color: '#80cbc4',
  },
  class: {
    color: '#ffcb6b',
  },
  'class-name': {
    color: '#f2ff00',
  },
  color: {
    color: '#f2ff00',
  },
  comment: {
    color: '#546e7a',
  },
  constant: {
    color: '#c792ea',
  },
  deleted: {
    color: '#f07178',
  },
  doctype: {
    color: '#546e7a',
  },
  entity: {
    color: '#f07178',
  },
  function: {
    color: '#c792ea',
  },
  hexcode: {
    color: '#f2ff00',
  },
  id: {
    color: '#c792ea',
    fontWeight: 'bold',
  },
  important: {
    color: '#c792ea',
    fontWeight: 'bold',
  },
  inserted: {
    color: '#80cbc4',
  },
  keyword: {
    color: '#c792ea',
    fontStyle: 'italic',
  },
  number: {
    color: '#fd9170',
  },
  operator: {
    color: '#89ddff',
  },
  prolog: {
    color: '#546e7a',
  },
  property: {
    color: '#80cbc4',
  },
  'pseudo-class': {
    color: '#c3e88d',
  },
  'pseudo-element': {
    color: '#c3e88d',
  },
  punctuation: {
    color: '#89ddff',
  },
  regex: {
    color: '#f2ff00',
  },
  selector: {
    color: '#f07178',
  },
  string: {
    color: '#c3e88d',
  },
  symbol: {
    color: '#c792ea',
  },
  tag: {
    color: '#f07178',
  },
  unit: {
    color: '#f07178',
  },
  url: {
    color: '#fd9170',
  },
  variable: {
    color: '#f07178',
  },
} as const;
export const duotoneSpace = {
  base: {
    fontFamily:
      'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',
    fontSize: '14px',
    lineHeight: '1.375',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    background: '#24242e',
    color: '#767693',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#5b5b76',
  },
  prolog: {
    color: '#5b5b76',
  },
  doctype: {
    color: '#5b5b76',
  },
  cdata: {
    color: '#5b5b76',
  },
  punctuation: {
    color: '#5b5b76',
  },
  namespace: {
    opacity: '.7',
  },
  tag: {
    color: '#dd672c',
  },
  operator: {
    color: '#dd672c',
  },
  number: {
    color: '#dd672c',
  },
  property: {
    color: '#767693',
  },
  function: {
    color: '#767693',
  },
  'tag-id': {
    color: '#ebebff',
  },
  selector: {
    color: '#ebebff',
  },
  'atrule-id': {
    color: '#ebebff',
  },
  'attr-name': {
    color: '#aaaaca',
  },
  boolean: {
    color: '#fe8c52',
  },
  string: {
    color: '#fe8c52',
  },
  entity: {
    color: '#fe8c52',
    cursor: 'help',
  },
  url: {
    color: '#fe8c52',
  },
  'attr-value': {
    color: '#fe8c52',
  },
  keyword: {
    color: '#fe8c52',
  },
  control: {
    color: '#fe8c52',
  },
  directive: {
    color: '#fe8c52',
  },
  unit: {
    color: '#fe8c52',
  },
  statement: {
    color: '#fe8c52',
  },
  regex: {
    color: '#fe8c52',
  },
  atrule: {
    color: '#fe8c52',
  },
  placeholder: {
    color: '#fe8c52',
  },
  variable: {
    color: '#fe8c52',
  },
  deleted: {
    textDecoration: 'line-through',
  },
  inserted: {
    borderBottom: '1px dotted #ebebff',
    textDecoration: 'none',
  },
  italic: {
    fontStyle: 'italic',
  },
  important: {
    fontWeight: 'bold',
    color: '#aaaaca',
  },
  bold: {
    fontWeight: 'bold',
  },
} as const;
export const materialLight = {
  base: {
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    color: '#90a4ae',
    background: '#fafafa',
    fontFamily: 'Roboto Mono, monospace',
    fontSize: '1em',
    lineHeight: '1.5em',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    overflow: 'auto',
    position: 'relative',
    margin: '0.5em 0',
    padding: '1.25em 1em',
  },
  atrule: {
    color: '#7c4dff',
  },
  'attr-name': {
    color: '#39adb5',
  },
  'attr-value': {
    color: '#f6a434',
  },
  attribute: {
    color: '#f6a434',
  },
  boolean: {
    color: '#7c4dff',
  },
  builtin: {
    color: '#39adb5',
  },
  cdata: {
    color: '#39adb5',
  },
  char: {
    color: '#39adb5',
  },
  class: {
    color: '#39adb5',
  },
  'class-name': {
    color: '#6182b8',
  },
  comment: {
    color: '#aabfc9',
  },
  constant: {
    color: '#7c4dff',
  },
  deleted: {
    color: '#e53935',
  },
  doctype: {
    color: '#aabfc9',
  },
  entity: {
    color: '#e53935',
  },
  function: {
    color: '#7c4dff',
  },
  hexcode: {
    color: '#f76d47',
  },
  id: {
    color: '#7c4dff',
    fontWeight: 'bold',
  },
  important: {
    color: '#7c4dff',
    fontWeight: 'bold',
  },
  inserted: {
    color: '#39adb5',
  },
  keyword: {
    color: '#7c4dff',
  },
  number: {
    color: '#f76d47',
  },
  operator: {
    color: '#39adb5',
  },
  prolog: {
    color: '#aabfc9',
  },
  property: {
    color: '#39adb5',
  },
  'pseudo-class': {
    color: '#f6a434',
  },
  'pseudo-element': {
    color: '#f6a434',
  },
  punctuation: {
    color: '#39adb5',
  },
  regex: {
    color: '#6182b8',
  },
  selector: {
    color: '#e53935',
  },
  string: {
    color: '#f6a434',
  },
  symbol: {
    color: '#7c4dff',
  },
  tag: {
    color: '#e53935',
  },
  unit: {
    color: '#f76d47',
  },
  url: {
    color: '#e53935',
  },
  variable: {
    color: '#e53935',
  },
} as const;
export const duotoneSea = {
  base: {
    fontFamily:
      'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',
    fontSize: '14px',
    lineHeight: '1.375',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    background: '#1d262f',
    color: '#57718e',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#4a5f78',
  },
  prolog: {
    color: '#4a5f78',
  },
  doctype: {
    color: '#4a5f78',
  },
  cdata: {
    color: '#4a5f78',
  },
  punctuation: {
    color: '#4a5f78',
  },
  namespace: {
    opacity: '.7',
  },
  tag: {
    color: '#0aa370',
  },
  operator: {
    color: '#0aa370',
  },
  number: {
    color: '#0aa370',
  },
  property: {
    color: '#57718e',
  },
  function: {
    color: '#57718e',
  },
  'tag-id': {
    color: '#ebf4ff',
  },
  selector: {
    color: '#ebf4ff',
  },
  'atrule-id': {
    color: '#ebf4ff',
  },
  'attr-name': {
    color: '#7eb6f6',
  },
  boolean: {
    color: '#47ebb4',
  },
  string: {
    color: '#47ebb4',
  },
  entity: {
    color: '#47ebb4',
    cursor: 'help',
  },
  url: {
    color: '#47ebb4',
  },
  'attr-value': {
    color: '#47ebb4',
  },
  keyword: {
    color: '#47ebb4',
  },
  control: {
    color: '#47ebb4',
  },
  directive: {
    color: '#47ebb4',
  },
  unit: {
    color: '#47ebb4',
  },
  statement: {
    color: '#47ebb4',
  },
  regex: {
    color: '#47ebb4',
  },
  atrule: {
    color: '#47ebb4',
  },
  placeholder: {
    color: '#47ebb4',
  },
  variable: {
    color: '#47ebb4',
  },
  deleted: {
    textDecoration: 'line-through',
  },
  inserted: {
    borderBottom: '1px dotted #ebf4ff',
    textDecoration: 'none',
  },
  italic: {
    fontStyle: 'italic',
  },
  important: {
    fontWeight: 'bold',
    color: '#7eb6f6',
  },
  bold: {
    fontWeight: 'bold',
  },
} as const;
export const a11yDark = {
  base: {
    color: '#f8f8f2',
    background: '#2b2b2b',
    fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '0.5em 0',
    overflow: 'auto',
    borderRadius: '0.3em',
  },
  comment: {
    color: '#d4d0ab',
  },
  prolog: {
    color: '#d4d0ab',
  },
  doctype: {
    color: '#d4d0ab',
  },
  cdata: {
    color: '#d4d0ab',
  },
  punctuation: {
    color: '#fefefe',
  },
  property: {
    color: '#ffa07a',
  },
  tag: {
    color: '#ffa07a',
  },
  constant: {
    color: '#ffa07a',
  },
  symbol: {
    color: '#ffa07a',
  },
  deleted: {
    color: '#ffa07a',
  },
  boolean: {
    color: '#00e0e0',
  },
  number: {
    color: '#00e0e0',
  },
  selector: {
    color: '#abe338',
  },
  'attr-name': {
    color: '#abe338',
  },
  string: {
    color: '#abe338',
  },
  char: {
    color: '#abe338',
  },
  builtin: {
    color: '#abe338',
  },
  inserted: {
    color: '#abe338',
  },
  operator: {
    color: '#00e0e0',
  },
  entity: {
    color: '#00e0e0',
    cursor: 'help',
  },
  url: {
    color: '#00e0e0',
  },
  variable: {
    color: '#00e0e0',
  },
  atrule: {
    color: '#ffd700',
  },
  'attr-value': {
    color: '#ffd700',
  },
  function: {
    color: '#ffd700',
  },
  keyword: {
    color: '#00e0e0',
  },
  regex: {
    color: '#ffd700',
  },
  important: {
    color: '#ffd700',
    fontWeight: 'bold',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
} as const;
export const darcula = {
  base: {
    color: '#a9b7c6',
    fontFamily: "Consolas, Monaco, 'Andale Mono', monospace",
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    background: '#2b2b2b',
  },
  comment: {
    color: '#808080',
  },
  prolog: {
    color: '#808080',
  },
  cdata: {
    color: '#808080',
  },
  delimiter: {
    color: '#cc7832',
  },
  boolean: {
    color: '#cc7832',
  },
  keyword: {
    color: '#cc7832',
  },
  selector: {
    color: '#cc7832',
  },
  important: {
    color: '#cc7832',
  },
  atrule: {
    color: '#cc7832',
  },
  operator: {
    color: '#a9b7c6',
  },
  punctuation: {
    color: '#a9b7c6',
  },
  'attr-name': {
    color: '#a9b7c6',
  },
  tag: {
    color: '#e8bf6a',
  },
  'tag .punctuation': {
    color: '#e8bf6a',
  },
  doctype: {
    color: '#e8bf6a',
  },
  builtin: {
    color: '#e8bf6a',
  },
  entity: {
    color: '#6897bb',
  },
  number: {
    color: '#6897bb',
  },
  symbol: {
    color: '#6897bb',
  },
  property: {
    color: '#9876aa',
  },
  constant: {
    color: '#9876aa',
  },
  variable: {
    color: '#9876aa',
  },
  string: {
    color: '#6a8759',
  },
  char: {
    color: '#6a8759',
  },
  'attr-value': {
    color: '#a5c261',
  },
  'attr-value .punctuation': {
    color: '#a5c261',
  },
  'attr-value .punctuation:first-child': {
    color: '#a9b7c6',
  },
  url: {
    color: '#287bde',
    textDecoration: 'underline',
  },
  function: {
    color: '#ffc66d',
  },
  regex: {
    background: '#364135',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  inserted: {
    background: '#294436',
  },
  deleted: {
    background: '#484a4a',
  },
} as const;
export const zTouch = {
  base: {
    color: 'white',
    fontFamily: 'monospace',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    wordWrap: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    lineHeight: '25px',
    fontSize: '18px',
    margin: '0.5em 0',
    background: '#0a143c',
    padding: '1em',
    overflow: 'auto',
  },
  comment: {
    color: 'rgb(99, 119, 119)',
    fontStyle: 'italic',
  },
  prolog: {
    color: 'rgb(99, 119, 119)',
    fontStyle: 'italic',
  },
  cdata: {
    color: 'rgb(99, 119, 119)',
    fontStyle: 'italic',
  },
  punctuation: {
    color: 'rgb(199, 146, 234)',
  },
  deleted: {
    color: 'rgba(239, 83, 80, 0.56)',
    fontStyle: 'italic',
  },
  symbol: {
    color: 'rgb(128, 203, 196)',
  },
  property: {
    color: 'rgb(128, 203, 196)',
  },
  tag: {
    color: 'rgb(127, 219, 202)',
  },
  operator: {
    color: 'rgb(127, 219, 202)',
  },
  keyword: {
    color: 'rgb(127, 219, 202)',
  },
  boolean: {
    color: 'rgb(255, 88, 116)',
  },
  number: {
    color: 'rgb(247, 140, 108)',
  },
  constant: {
    color: 'rgb(34 183 199)',
  },
  function: {
    color: 'rgb(34 183 199)',
  },
  builtin: {
    color: 'rgb(34 183 199)',
  },
  char: {
    color: 'rgb(34 183 199)',
  },
  selector: {
    color: 'rgb(199, 146, 234)',
    fontStyle: 'italic',
  },
  doctype: {
    color: 'rgb(199, 146, 234)',
    fontStyle: 'italic',
  },
  'attr-name': {
    color: 'rgb(173, 219, 103)',
    fontStyle: 'italic',
  },
  inserted: {
    color: 'rgb(173, 219, 103)',
    fontStyle: 'italic',
  },
  string: {
    color: 'rgb(173, 219, 103)',
  },
  url: {
    color: 'rgb(173, 219, 103)',
  },
  entity: {
    color: 'rgb(173, 219, 103)',
  },
  'class-name': {
    color: 'rgb(255, 203, 139)',
  },
  atrule: {
    color: 'rgb(255, 203, 139)',
  },
  'attr-value': {
    color: 'rgb(255, 203, 139)',
  },
  regex: {
    color: 'rgb(214, 222, 235)',
  },
  important: {
    color: 'rgb(214, 222, 235)',
    fontWeight: 'bold',
  },
  variable: {
    color: 'rgb(214, 222, 235)',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
} as const;
export const duotoneEarth = {
  base: {
    fontFamily:
      'Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace',
    fontSize: '14px',
    lineHeight: '1.375',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    background: '#322d29',
    color: '#88786d',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
  },
  comment: {
    color: '#6a5f58',
  },
  prolog: {
    color: '#6a5f58',
  },
  doctype: {
    color: '#6a5f58',
  },
  cdata: {
    color: '#6a5f58',
  },
  punctuation: {
    color: '#6a5f58',
  },
  namespace: {
    opacity: '.7',
  },
  tag: {
    color: '#bfa05a',
  },
  operator: {
    color: '#bfa05a',
  },
  number: {
    color: '#bfa05a',
  },
  property: {
    color: '#88786d',
  },
  function: {
    color: '#88786d',
  },
  'tag-id': {
    color: '#fff3eb',
  },
  selector: {
    color: '#fff3eb',
  },
  'atrule-id': {
    color: '#fff3eb',
  },
  'attr-name': {
    color: '#a48774',
  },
  boolean: {
    color: '#fcc440',
  },
  string: {
    color: '#fcc440',
  },
  entity: {
    color: '#fcc440',
    cursor: 'help',
  },
  url: {
    color: '#fcc440',
  },
  'attr-value': {
    color: '#fcc440',
  },
  keyword: {
    color: '#fcc440',
  },
  control: {
    color: '#fcc440',
  },
  directive: {
    color: '#fcc440',
  },
  unit: {
    color: '#fcc440',
  },
  statement: {
    color: '#fcc440',
  },
  regex: {
    color: '#fcc440',
  },
  atrule: {
    color: '#fcc440',
  },
  placeholder: {
    color: '#fcc440',
  },
  variable: {
    color: '#fcc440',
  },
  deleted: {
    textDecoration: 'line-through',
  },
  inserted: {
    borderBottom: '1px dotted #fff3eb',
    textDecoration: 'none',
  },
  italic: {
    fontStyle: 'italic',
  },
  important: {
    fontWeight: 'bold',
    color: '#a48774',
  },
  bold: {
    fontWeight: 'bold',
  },
} as const;
export const gruvboxLight = {
  base: {
    color: '#3c3836',
    fontFamily: 'Consolas, Monaco, "Andale Mono", monospace',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '0.5em 0',
    overflow: 'auto',
    background: '#f9f5d7',
  },
  comment: {
    color: '#7c6f64',
  },
  prolog: {
    color: '#7c6f64',
  },
  cdata: {
    color: '#7c6f64',
  },
  delimiter: {
    color: '#9d0006',
  },
  boolean: {
    color: '#9d0006',
  },
  keyword: {
    color: '#9d0006',
  },
  selector: {
    color: '#9d0006',
  },
  important: {
    color: '#9d0006',
  },
  atrule: {
    color: '#9d0006',
  },
  operator: {
    color: '#7c6f64',
  },
  punctuation: {
    color: '#7c6f64',
  },
  'attr-name': {
    color: '#7c6f64',
  },
  tag: {
    color: '#b57614',
  },
  'tag .punctuation': {
    color: '#b57614',
  },
  doctype: {
    color: '#b57614',
  },
  builtin: {
    color: '#b57614',
  },
  entity: {
    color: '#8f3f71',
  },
  number: {
    color: '#8f3f71',
  },
  symbol: {
    color: '#8f3f71',
  },
  property: {
    color: '#9d0006',
  },
  constant: {
    color: '#9d0006',
  },
  variable: {
    color: '#9d0006',
  },
  string: {
    color: '#797403',
  },
  char: {
    color: '#797403',
  },
  'attr-value': {
    color: '#7c6f64',
  },
  'attr-value .punctuation': {
    color: '#7c6f64',
  },
  url: {
    color: '#797403',
    textDecoration: 'underline',
  },
  function: {
    color: '#b57614',
  },
  regex: {
    background: '#797403',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  inserted: {
    background: '#7c6f64',
  },
  deleted: {
    background: '#9d0006',
  },
} as const;
export const oneDark = {
  base: {
    background: 'hsl(220, 13%, 18%)',
    color: 'hsl(220, 14%, 71%)',
    textShadow: '0 1px rgba(0, 0, 0, 0.3)',
    fontFamily:
      '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '2',
    OTabSize: '2',
    tabSize: '2',
    WebkitHyphens: 'none',
    MozHyphens: 'none',

    hyphens: 'none',
    padding: '1em',
    margin: '0.5em 0',
    overflow: 'auto',
    borderRadius: '0.3em',
  },
  comment: {
    color: 'hsl(220, 10%, 40%)',
    fontStyle: 'italic',
  },
  prolog: {
    color: 'hsl(220, 10%, 40%)',
  },
  cdata: {
    color: 'hsl(220, 10%, 40%)',
  },
  doctype: {
    color: 'hsl(220, 14%, 71%)',
  },
  punctuation: {
    color: 'hsl(220, 14%, 71%)',
  },
  entity: {
    color: 'hsl(220, 14%, 71%)',
    cursor: 'help',
  },
  'attr-name': {
    color: 'hsl(29, 54%, 61%)',
  },
  'class-name': {
    color: 'hsl(29, 54%, 61%)',
  },
  boolean: {
    color: 'hsl(29, 54%, 61%)',
  },
  constant: {
    color: 'hsl(29, 54%, 61%)',
  },
  number: {
    color: 'hsl(29, 54%, 61%)',
  },
  atrule: {
    color: 'hsl(29, 54%, 61%)',
  },
  keyword: {
    color: 'hsl(286, 60%, 67%)',
  },
  property: {
    color: 'hsl(355, 65%, 65%)',