/* Matugen Obsidian Dynamic Colors Snippet * Place output in: /.obsidian/snippets/matugen.css * Then enable it in: Settings → Appearance → CSS Snippets */ .theme-dark, .theme-light { /* ── Material You RGB helpers ──────────────────────────── */ --mat-bg-rgb: 19, 18, 29; --mat-surface-rgb: 19, 18, 29; --mat-on-surface-rgb: 228, 224, 240; --mat-primary-rgb: 195, 192, 255; --mat-on-primary-rgb: 29, 0, 165; /* ── Core Backgrounds ──────────────────────────────────── */ --background-primary: #13121d; --background-primary-alt: #13121d; --background-secondary: #1b1a25; --background-secondary-alt: #1f1e29; /* ── Titlebar ──────────────────────────────────────────── */ --titlebar-background: #13121d; --titlebar-background-focused: #1b1a25; --titlebar-text-color: #e4e0f0; /* ── Borders & Dividers ────────────────────────────────── */ --background-modifier-border: #464557; --background-modifier-border-focus: #918fa3; --background-modifier-border-hover: #918fa3; /* ── Text Colors ───────────────────────────────────────── */ --text-normal: #e4e0f0; --text-muted: #c7c4da; --text-faint: #918fa3; --text-on-accent: #1d00a5; --text-selection: rgba(195, 192, 255, 0.25); /* ── Accent & Interactive ──────────────────────────────── */ --interactive-accent: #c3c0ff; --interactive-accent-hover: #3c24f6; --interactive-accent-rgb: 195, 192, 255; --text-accent: #c3c0ff; --text-accent-hover: #3c24f6; /* ── Hover & Active Modifiers ──────────────────────────── */ --background-modifier-hover: rgba(var(--mat-on-surface-rgb), 0.06); --background-modifier-active-hover: rgba(var(--mat-primary-rgb), 0.15); --background-modifier-success: #a32200; --background-modifier-error: #93000a; --background-modifier-error-hover: #ffb4ab; /* ── Obsidian Color Scale (--color-base-XX) ────────────── */ --color-base-00: #13121d; --color-base-05: #13121d; --color-base-10: #0d0d17; --color-base-20: #1b1a25; --color-base-25: #1f1e29; --color-base-30: #292934; --color-base-35: #34343f; --color-base-40: #464557; --color-base-50: #918fa3; --color-base-60: #c7c4da; --color-base-70: #e4e0f0; --color-base-100: #e4e0f0; /* ── Semantic Colors ───────────────────────────────────── */ --color-red: #ffb4ab; --color-orange: #ffb4a3; --color-yellow: #c3c0ff; --color-green: #a32200; --color-cyan: #3e3a96; --color-blue: #c3c0ff; --color-purple: #c3c0ff; --color-pink: #ffb4a3; /* ── Headings ──────────────────────────────────────────── */ --h1-color: #c3c0ff; --h2-color: #c3c0ff; --h3-color: #c3c0ff; --h4-color: #ffb4a3; --h5-color: #c7c4da; --h6-color: #918fa3; /* ── Links ─────────────────────────────────────────────── */ --link-color: #c3c0ff; --link-color-hover: #faf6ff; --link-external-color: #ffb4a3; --link-unresolved-color: #918fa3; /* ── Tags ──────────────────────────────────────────────── */ --tag-color: #faf6ff; --tag-background: #3c24f6; --tag-border-color: #c3c0ff; --tag-color-hover: #1d00a5; --tag-background-hover: #c3c0ff; /* ── Checkboxes ────────────────────────────────────────── */ --checkbox-color: #c3c0ff; --checkbox-color-hover: #3c24f6; --checkbox-border-color: #918fa3; --checkbox-marker-color: #1d00a5; /* ── Code Blocks ───────────────────────────────────────── */ --code-background: #1b1a25; --code-normal: #e4e0f0; --code-comment: #918fa3; --code-function: #c3c0ff; --code-important: #ffb4ab; --code-keyword: #c3c0ff; --code-operator: #ffb4a3; --code-property: #c7c4da; --code-punctuation: #464557; --code-string: #ffb4a3; --code-tag: #ffb4ab; --code-value: #c3c0ff; /* ── Scrollbar ─────────────────────────────────────────── */ --scrollbar-thumb-bg: rgba(var(--mat-on-surface-rgb), 0.12); --scrollbar-active-thumb-bg: rgba(var(--mat-on-surface-rgb), 0.25); --scrollbar-bg: transparent; /* ── Inputs ────────────────────────────────────────────── */ --input-shadow: none; --input-shadow-hover: 0 0 0 2px #918fa3; /* ── Graph View ────────────────────────────────────────── */ --graph-node: #c3c0ff; --graph-node-unresolved: #918fa3; --graph-node-focused: #faf6ff; --graph-node-tag: #c3c0ff; --graph-node-attachment: #ffb4a3; --graph-line: #464557; --graph-background: #13121d; } /* ── Active line highlight ─────────────────────────────────── */ .cm-active { background-color: rgba(var(--mat-on-surface-rgb), 0.03) !important; }