A simple Catppuccin Macchiato theme for anything markdown driven.

catppuccin-macchiato.css

/*
    Catppuccin Macchiato Markdown Theme
    Simple & clean version – good for most markdown renderers
*/

:root {
  /* Macchiato palette */
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink:    #f5bde6;
  --ctp-mauve:   #c6a0f6;
  --ctp-red:     #ed8796;
  --ctp-maroon:  #ee99a0;
  --ctp-peach:   #f5a97f;
  --ctp-yellow:  #eed49f;
  --ctp-green:   #a6da95;
  --ctp-teal:    #8bd5ca;
  --ctp-sky:     #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue:    #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text:    #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base:     #24273a;
  --ctp-mantle:   #1e2030;
  --ctp-crust:    #181926;
}

/* ──────────────────────────────────────────────── */

body, .markdown-preview-view, .markdown-body {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Headings */
h1, .markdown-preview-view h1 { color: var(--ctp-red);    font-weight: 600; border-bottom: 1px solid var(--ctp-surface1); padding-bottom: 0.3em; }
h2, .markdown-preview-view h2 { color: var(--ctp-peach);  font-weight: 600; border-bottom: 1px solid var(--ctp-surface2); padding-bottom: 0.25em; }
h3, .markdown-preview-view h3 { color: var(--ctp-yellow); font-weight: 600; }
h4, .markdown-preview-view h4 { color: var(--ctp-green);  font-weight: 600; }
h5, .markdown-preview-view h5 { color: var(--ctp-teal);   font-weight: 500; }
h6, .markdown-preview-view h6 { color: var(--ctp-sky);    font-weight: 500; }

/* Inline formatting */
strong, b              { color: var(--ctp-red);    font-weight: 600; }
em, i                  { color: var(--ctp-maroon); font-style: italic; }
strong em, em strong   { color: var(--ctp-peach);  font-weight: 600; font-style: italic; }

code, .code-inline     {
  background: var(--ctp-surface0);
  color: var(--ctp-peach);
  padding: 0.15em 0.35em;
  border-radius: 5px;
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 0.95em;
}

/* Code blocks / fenced code */
pre, .code-block, .highlight pre, .markdown-preview-view pre {
  background-color: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface1);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  color: var(--ctp-text);
  padding: 0;
}

/* Links */
a, .external-link {
  color: var(--ctp-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}

a:hover, .external-link:hover {
  color: var(--ctp-lavender);
  border-bottom-color: var(--ctp-lavender);
}

/* Blockquotes */
blockquote, .markdown-preview-view blockquote {
  border-left: 4px solid var(--ctp-blue);
  background-color: var(--ctp-mantle);
  padding: 0.1rem 1.2rem;
  margin: 1.2rem 0;
  color: var(--ctp-subtext1);
}

/* Lists */
ul, ol {
  color: var(--ctp-text);
}

li > p:first-child {
  margin: 0.35em 0;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--ctp-surface1);
  margin: 2.2rem 0;
}

/* Tables */
table {
  border-collapse: collapse;
  margin: 1.4rem 0;
}

th, td {
  border: 1px solid var(--ctp-surface1);
  padding: 0.6em 1em;
}

th {
  background-color: var(--ctp-surface0);
  color: var(--ctp-lavender);
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: var(--ctp-mantle);
}

/* Task lists / checkboxes (common in Obsidian & many renderers) */
.task-list-item-checkbox {
  accent-color: var(--ctp-mauve);
}

/* Selection highlight */
::selection {
  background: var(--ctp-surface2);
  color: var(--ctp-text);
}

vditor.css

/* ----------------------------------------------------------------------------
   Catppuccin Macchiato theme for Vditor
   https://github.com/Vanessa219/vditor
   Flavor: Macchiato (cool mid-tone dark pastel)
   Last updated: 2026-03
   ---------------------------------------------------------------------------- */

:root {
  /* Macchiato palette */
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink: #f5bde6;
  --ctp-mauve: #c6a0f6;
  --ctp-red: #ed8796;
  --ctp-maroon: #ee99a0;
  --ctp-peach: #f5a97f;
  --ctp-yellow: #eed49f;
  --ctp-green: #a6da95;
  --ctp-teal: #8bd5ca;
  --ctp-sky: #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue: #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
}

:root,
.vditor,
.vditor--dark,
.vditor-preview,
.vditor-ir,
.vditor-wysiwyg,
.vditor-textarea {
  color-scheme: dark;

  /* Base palette */
  --vditor-primary-color: #8aadf4; /* blue (links, accents) */
  --vditor-second-color: #b7bdf8; /* lavender-ish accent */
  --vditor-success-color: #a6da95; /* green */
  --vditor-warning-color: #eed49f; /* yellow */
  --vditor-danger-color: #ed8796; /* red */
  --vditor-info-color: #91d7e3; /* sky */

  /* Background layers - Macchiato has nice depth */
  --vditor-background-color: #24273a; /* base */
  --vditor-second-background-color: #1e2030; /* mantle (slightly darker) */
  --vditor-third-background-color: #181926; /* crust (darkest) */
  --vditor-hover-background-color: #363a4f; /* surface0 hover */

  /* Editor area */
  --vditor-editor-background-color: #1e2030;
  --vditor-editor-color: #cad3f5; /* text */

  /* Toolbar */
  --vditor-toolbar-background-color: #1e2030;
  --vditor-toolbar-hover-background-color: #363a4f;
  --vditor-toolbar-border-color: #494d64;

  /* Borders & lines */
  --vditor-border-color: #494d64; /* surface0-ish */
  --vditor-scrollbar-thumb-background-color: #5b6078;
  --vditor-scrollbar-thumb-hover-background-color: #6e738d;

  /* Preview / rendered content */
  --vditor-preview-background-color: #1e2030;
  --vditor-preview-color: #cad3f5;
  --vditor-preview-code-background-color: #181926;
  --vditor-preview-blockquote-color: #f5a97f; /* peach for quotes */
  --vditor-preview-link-color: #8aadf4;
  --vditor-preview-link-hover-color: #b7bdf8;

  /* Code block / highlight */
  --vditor-code-block-background-color: #181926;
  --vditor-code-color: #cad3f5;

  /* Selection */
  ::selection {
    background: #c6a0f6; /* mauve */
    color: #181926;
  }

  /* Headings */
  h1, .markdown-preview-view h1 {
    color: var(--ctp-red);
    font-weight: 600;
    border-bottom: 1px solid var(--ctp-surface1);
    padding-bottom: 0.3em;
  }
  h2, .markdown-preview-view h2 {
    color: var(--ctp-peach);
    font-weight: 600;
    border-bottom: 1px solid var(--ctp-surface2);
    padding-bottom: 0.25em;
  }
  h3, .markdown-preview-view h3 {
    color: var(--ctp-yellow);
    font-weight: 600;
  }
  h4, .markdown-preview-view h4 {
    color: var(--ctp-green);
    font-weight: 600;
  }
  h5, .markdown-preview-view h5 {
    color: var(--ctp-teal);
    font-weight: 500;
  }
  h6, .markdown-preview-view h6 {
    color: var(--ctp-sky);
    font-weight: 500;
  }

  /* Inline formatting */
  strong, b {
    color: var(--ctp-red);
    font-weight: 600;
  }
  em, i {
    color: var(--ctp-maroon);
    font-style: italic;
  }
  strong em, em strong {
    color: var(--ctp-peach);
    font-weight: 600;
    font-style: italic;
  }

  /* Tables */
  table th {
    background-color: #363a4f;
    color: #cad3f5;
  }
  table td, table th {
    border-color: #494d64;
  }

  /* Blockquote */
  blockquote {
    border-left-color: #f5a97f; /* peach */
    color: #c6a0f6; /* mauve text */
  }

  /* Inline code */
  code {
    background-color: #363a4f;
    color: #f5bde6; /* pink */
  }

  /* Lists markers */
  ul > li::marker,
  ol > li::marker {
    color: #8bd5ca; /* teal */
  }

  /* Disabled / placeholder */
  .vditor__counter,
  .vditor-ir__tip,
  .vditor-textarea::placeholder {
    color: #6e738d !important;
  }

  /* Dark mode toggle icon / other small accents */
  .vditor-icon--current path {
    fill: #91d7e3; /* sky */
  }
}

/* Force dark mode classes if your app forces .vditor--dark */
.vditor--dark {
  --vditor-background-color: #24273a;
  --vditor-editor-background-color: #1e2030;
  --vditor-preview-background-color: #1e2030;
}

/* Optional: nicer syntax highlighting override if Vditor uses highlight.js / prism */
.vditor-preview .hljs,
.vditor-preview pre code {
  background: #181926 !important;
  color: #cad3f5 !important;
}

/* Macchiato accent colors for different code token types (if needed) */
.hljs-keyword {
  color: #c6a0f6;
} /* mauve   */
.hljs-string {
  color: #a6da95;
} /* green   */
.hljs-number {
  color: #f5a97f;
} /* peach   */
.hljs-comment {
  color: #6e738d;
} /* subtle  */
.hljs-function {
  color: #8aadf4;
} /* blue    */

/* Catppuccin Macchiato – improved hljs syntax highlighting
   Based on official catppuccin/highlight.js Macchiato flavor + tweaks for Vditor readability */

.vditor-preview__content pre code.hljs,
.vditor-preview pre code,
pre code.hljs {
  background: #181926 !important; /* crust – darkest for code blocks */
  color: #cad3f5 !important; /* text – very readable base */
}

/* Core token types – Macchiato palette with better distinction */
.hljs-comment,
.hljs-quote {
  color: #6e738d !important;
  font-style: italic;
} /* subtle gray-blue comments */

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-addition {
  color: #c6a0f6 !important;
} /* mauve – strong for keywords/control */

.hljs-string,
.hljs-regexp,
.hljs-title.class_,
.hljs-class {
  color: #a6da95 !important;
} /* green – strings & class names */

.hljs-number,
.hljs-built_in {
  color: #f5a97f !important;
} /* peach – numbers & builtins */

.hljs-function,
.hljs-title.function_,
.hljs-attr,
.hljs-attribute {
  color: #8aadf4 !important;
} /* blue – functions & attributes */

.hljs-variable,
.hljs-template-variable,
.hljs-params,
.hljs-property {
  color: #cad3f5 !important;
} /* text – variables/identifiers use main text color for max readability */

.hljs-meta,
.hljs-meta-string,
.hljs-doctag {
  color: #f5bde6 !important;
} /* pink – meta / special */

.hljs-operator,
.hljs-punctuation {
  color: #b7bdf8 !important;
} /* lavender – operators lighter but visible */

.hljs-symbol {
  color: #eed49f !important;
} /* yellow – symbols */

.hljs-bullet,
.hljs-link {
  color: #91d7e3 !important;
} /* sky/teal – lists & links in code */

.hljs-deletion {
  color: #ed8796 !important;
  background: rgba(237, 135, 150, 0.15);
} /* red with faint bg for deletions */

/* Subtle emphasis / sections */
.hljs-section,
.hljs-name,
.hljs-strong {
  color: #f5bde6 !important;
  font-weight: bold;
} /* pink for headings/strong */

.hljs-emphasis {
  font-style: italic;
}

/* Make sure variables don't disappear or clash */
.hljs-variable:not(.hljs-built_in),
.hljs-identifier {
  color: #cad3f5 !important; /* plain text color → no low-contrast issues */
  font-style: normal !important;
}

/* Optional: slightly dim parameters if you want distinction */
.hljs-params {
  color: #c6a0f6aa !important; /* semi-transparent mauve for params */
}

/* Block background fallback (in case Vditor overrides) */
.vditor-preview__content .hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: #181926;
}