Catppuccin Macchiato theme for Zettlr

catppuccin-macchiato.zettlr.css

/*
 * Catppuccin Macchiato Theme for Zettlr
 * 
 * A warm, dark theme using the Catppuccin Macchiato color palette
 * Based on Catppuccin style guidelines: https://github.com/catppuccin/catppuccin
 * 
 * Installation:
 * 1. Set the Bielefeld base theme
 * 2. Copy and paste this file into Zettlr config
 *
 * It uses the Victor Mono font. If you have the Nerd Font installed, it will use that.
 * If you don't, it will import it from Google Fonts, but that does require Internet access.
 * 
 * Author: Dave Williams <https://github.com/daveio>
 * License: MIT
 */

@import url("https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");");

/* ===== CATPPUCCIN MACCHIATO COLOR VARIABLES ===== */
:root {
  --monospace: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
  /* Catppuccin 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;

  /* Text Colors */
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;

  /* Surface Colors */
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;

  /* Base Colors */
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
}

/* ===== GLOBAL STYLES ===== */

/* Hide scrollbars for cleaner look */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Main body styling */
body {
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
  background-color: var(--ctp-base);
  color: var(--ctp-text);
}

.cm-content {
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
}

/* ===== MENUBAR STYLING ===== */
#menubar {
  background: linear-gradient(180deg, var(--ctp-surface0) 0%, var(--ctp-surface1) 100%);
  border-bottom: 1px solid var(--ctp-surface2);
  padding-left: 0;
}

/* ===== EDITOR STYLING ===== */
body #editor {
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
  background-color: var(--ctp-base);
  background:
    linear-gradient(135deg, var(--ctp-base) 0%, var(--ctp-mantle) 100%),
    radial-gradient(circle at 20% 80%, var(--ctp-surface0) 11 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--ctp-surface0) 11 0%, transparent 50%);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.CodeMirror {
  background-color: transparent !important;
  color: var(--ctp-text);
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.6;
}

/* ===== TYPOGRAPHY ===== */

.cm-header-1 {
  color: var(--ctp-red);
  font-size: 1.8em;
}

.cm-header-2 {
  color: var(--ctp-peach);
  font-size: 1.6em;
}

.cm-header-3 {
  color: var(--ctp-yellow);
  font-size: 1.4em;
}

.cm-header-4 {
  color: var(--ctp-green);
  font-size: 1.2em;
}

.cm-header-5 {
  color: var(--ctp-sapphire);
  font-size: 1.1em;
}

.cm-header-6 {
  color: var(--ctp-lavender);
  font-size: 1.05em;
}

/* Code blocks and inline code */
.cm-fenced-code,
.cm-comment,
.cm-monospace {
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace !important;
  background-color: var(--ctp-surface0);
  color: var(--ctp-text);
  border-radius: 4px;
  padding: 2px 4px;
}

/* Code block background */
.CodeMirror-line .cm-fenced-code {
  background-color: var(--ctp-surface0);
}

/* ===== MARKDOWN SYNTAX HIGHLIGHTING ===== */

/* Emphasis and strong */
.cm-em {
  color: var(--ctp-yellow);
  font-style: italic;
}

.cm-strong {
  color: var(--ctp-red);
  font-weight: bold;
}

/* Links */
.cm-url,
.cm-link {
  color: var(--ctp-blue);
  text-decoration: underline;
}

/* Lists */
.cm-formatting-list {
  color: var(--ctp-mauve);
}

/* Quotes */
.cm-quote {
  color: var(--ctp-subtext0);
  font-style: italic;
  border-left: 3px solid var(--ctp-surface2);
  padding-left: 8px;
}

/* Horizontal rules */
.cm-hr {
  display: inline-block;
  width: 100%;
  height: 2px;
  color: transparent;
  background: linear-gradient(90deg, var(--ctp-mauve) 0%, var(--ctp-lavender) 50%, transparent 100%);
  border: none;
  margin: 8px 0;
}

/* Tags */
.cm-tag {
  color: var(--ctp-blue);
  background-color: var(--ctp-surface1);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.9em;
}

/* ===== CURSOR AND SELECTION ===== */

/* Cursor */
.CodeMirror-cursor {
  border-left: 2px solid var(--ctp-rosewater);
  border-right: none;
  width: 0;
}

/* Current line highlighting */
.CodeMirror-activeline-background {
  background-color: rgba(202, 211, 245, 0.1) !important;
}

/* Selection */
.CodeMirror-selected {
  background-color: rgba(147, 154, 183, 0.3) !important;
}

/* ===== FILE TREE STYLING ===== */
body #file-tree {
  background-color: var(--ctp-mantle) !important;
  border-right: 1px solid var(--ctp-surface1);
}

/* ===== TAB STYLING ===== */
body div#tab-container {
  background-color: var(--ctp-surface0) !important;
  border-bottom: 1px solid var(--ctp-surface2);
}

body div#tab-container div[role="tab"] {
  background-color: var(--ctp-surface1);
  color: var(--ctp-subtext1);
  border-right: 1px solid var(--ctp-surface2);
  transition: all 0.2s ease;
}

body div#tab-container div[role="tab"]:hover {
  background-color: var(--ctp-surface2);
  color: var(--ctp-text);
}

body div#tab-container div[role="tab"].active {
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
  box-shadow: 0 -3px 0 var(--ctp-lavender) inset !important;
  border-right: 1px solid var(--ctp-surface1);
}

/* ===== SEARCH AND REPLACE ===== */
.CodeMirror-search-match {
  background-color: var(--ctp-teal) !important;
  color: var(--ctp-crust) !important;
}

.CodeMirror-search-match.CodeMirror-search-match-selected {
  background-color: var(--ctp-red) !important;
  color: var(--ctp-text) !important;
}

/* ===== LINE NUMBERS ===== */
.CodeMirror-linenumber {
  color: var(--ctp-overlay1);
  padding-right: 10px;
}

.CodeMirror-activeline .CodeMirror-linenumber {
  color: var(--ctp-lavender);
  font-weight: 500;
}

/* ===== SYNTAX HIGHLIGHTING FOR CODE BLOCKS ===== */

/* Keywords */
.cm-keyword {
  color: var(--ctp-mauve);
  font-weight: 500;
}

/* Strings */
.cm-string {
  color: var(--ctp-green);
}

/* Numbers */
.cm-number {
  color: var(--ctp-peach);
}

/* Comments */
.cm-comment {
  color: var(--ctp-overlay2);
  font-style: italic;
}

/* Variables */
.cm-variable {
  color: var(--ctp-text);
}

.cm-variable-2 {
  color: var(--ctp-blue);
}

/* Functions */
.cm-def {
  color: var(--ctp-blue);
  font-weight: 500;
}

/* Operators */
.cm-operator {
  color: var(--ctp-sky);
}

/* Brackets */
.cm-bracket {
  color: var(--ctp-overlay2);
}

/* Built-ins */
.cm-builtin {
  color: var(--ctp-red);
}

/* Attributes */
.cm-attribute {
  color: var(--ctp-yellow);
}

/* Types */
.cm-type {
  color: var(--ctp-yellow);
}

/* ===== FORMATTING CHARACTERS ===== */
.cm-formatting {
  color: var(--ctp-overlay1);
  font-weight: normal;
}

.cm-highlightSpace {
  background-image: radial-gradient(circle at 50% 55%, #446 10%, transparent 20%) !important;
}

.cm-formatting-header {
  color: var(--ctp-overlay2);
}

.cm-formatting-strong {
  color: var(--ctp-red);
  opacity: 0.7;
}

.cm-formatting-em {
  color: var(--ctp-yellow);
  opacity: 0.7;
}

.cm-formatting-code {
  color: var(--ctp-overlay1);
}

.cm-formatting-link {
  color: var(--ctp-blue);
  opacity: 0.7;
}

/* ===== FOLDING AND WIDGETS ===== */
.CodeMirror-foldmarker {
  background-color: var(--ctp-surface2);
  color: var(--ctp-text);
  border: 1px solid var(--ctp-overlay0);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 0.8em;
}

/* ===== MISC UI ELEMENTS ===== */

/* Pomodoro timer (if enabled) */
.pomodoro {
  background-color: var(--ctp-surface1);
  color: var(--ctp-text);
  border: 1px solid var(--ctp-surface2);
}

/* Word count and statistics */
.stats {
  background-color: var(--ctp-surface0);
  color: var(--ctp-subtext1);
  border-top: 1px solid var(--ctp-surface2);
}

/* ===== PREVIEW PANE (if applicable) ===== */
.preview {
  background-color: var(--ctp-base);
  color: var(--ctp-text);
}

.preview h1,
.preview h2,
.preview h3,
.preview h4,
.preview h5,
.preview h6 {
  color: var(--ctp-text);
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
}

.preview h1 {
  color: var(--ctp-red);
}
.preview h2 {
  color: var(--ctp-peach);
}
.preview h3 {
  color: var(--ctp-yellow);
}
.preview h4 {
  color: var(--ctp-green);
}
.preview h5 {
  color: var(--ctp-sapphire);
}
.preview h6 {
  color: var(--ctp-lavender);
}

.preview code {
  background-color: var(--ctp-surface0);
  color: var(--ctp-text);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "VictorMono NFM", "Victor Mono", "Menlo", "Monaco", "Courier New", monospace;
}

.preview pre {
  background-color: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface2);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}

.preview blockquote {
  border-left: 4px solid var(--ctp-surface2);
  background-color: var(--ctp-surface0);
  margin: 16px 0;
  padding: 8px 16px;
  color: var(--ctp-subtext0);
}

.preview a {
  color: var(--ctp-blue);
  text-decoration: none;
}

.preview a:hover {
  color: var(--ctp-sky);
  text-decoration: underline;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .CodeMirror {
    font-size: 13px;
    line-height: 1.5;
  }

  .cm-header {
    font-size: inherit;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Focus indicators */
.CodeMirror-focused .CodeMirror-cursor {
  border-left-color: var(--ctp-rosewater);
  animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --ctp-text: #ffffff;
    --ctp-base: #000000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ADDITIONAL ENHANCEMENTS ===== */

/* Subtle hover effects for interactive elements */
div[role="tab"]:not(.active):hover {
  transform: translateY(-1px);
}

/* Better focus outline for accessibility */
.CodeMirror-focused {
  outline: 2px solid var(--ctp-lavender);
  outline-offset: -2px;
}

/* Improve readability of selected text */
::selection {
  background-color: var(--ctp-overlay2);
  color: var(--ctp-text);
}

/* ===== DARK MODE SPECIFIC ADJUSTMENTS ===== */
body.dark #editor {
  /* Enhanced dark mode styling */
  background:
    linear-gradient(135deg, var(--ctp-base) 0%, var(--ctp-mantle) 100%),
    radial-gradient(circle at 30% 70%, rgba(198, 160, 246, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(138, 173, 244, 0.05) 0%, transparent 50%);
}

/* ===== CUSTOM ENHANCEMENTS ===== */

/* Typewriter mode line highlighting */
.CodeMirror-linebackground.typewriter-active-line {
  background-color: rgba(202, 211, 245, 0.08) !important;
  border-top: 1px solid var(--ctp-surface1);
  border-bottom: 1px solid var(--ctp-surface1);
}

/* Zen mode adjustments */
.zen-mode #editor {
  background: var(--ctp-base);
}

/* Print styles */
@media print {
  body,
  .CodeMirror {
    background: white !important;
    color: black !important;
  }
}