/* 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: 32, 14, 14; --mat-surface-rgb: 32, 14, 14; --mat-on-surface-rgb: 254, 218, 217; --mat-primary-rgb: 255, 179, 178; --mat-on-primary-rgb: 104, 0, 19; /* ── Core Backgrounds ──────────────────────────────────── */ --background-primary: #200e0e; --background-primary-alt: #200e0e; --background-secondary: #291616; --background-secondary-alt: #2e1a1a; /* ── Titlebar ──────────────────────────────────────────── */ --titlebar-background: #200e0e; --titlebar-background-focused: #291616; --titlebar-text-color: #fedad9; /* ── Borders & Dividers ────────────────────────────────── */ --background-modifier-border: #5e3f3e; --background-modifier-border-focus: #ae8786; --background-modifier-border-hover: #ae8786; /* ── Text Colors ───────────────────────────────────────── */ --text-normal: #fedad9; --text-muted: #e8bcbb; --text-faint: #ae8786; --text-on-accent: #680013; --text-selection: rgba(255, 179, 178, 0.25); /* ── Accent & Interactive ──────────────────────────────── */ --interactive-accent: #ffb3b2; --interactive-accent-hover: #ff525d; --interactive-accent-rgb: 255, 179, 178; --text-accent: #ffb3b2; --text-accent-hover: #ff525d; /* ── 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: #2f9fa4; --background-modifier-error: #93000a; --background-modifier-error-hover: #ffb4ab; /* ── Obsidian Color Scale (--color-base-XX) ────────────── */ --color-base-00: #200e0e; --color-base-05: #200e0e; --color-base-10: #1a0909; --color-base-20: #291616; --color-base-25: #2e1a1a; --color-base-30: #392524; --color-base-35: #452f2f; --color-base-40: #5e3f3e; --color-base-50: #ae8786; --color-base-60: #e8bcbb; --color-base-70: #fedad9; --color-base-100: #fedad9; /* ── Semantic Colors ───────────────────────────────────── */ --color-red: #ffb4ab; --color-orange: #70d6db; --color-yellow: #ffb3b2; --color-green: #2f9fa4; --color-cyan: #8f0d21; --color-blue: #ffb3b2; --color-purple: #ffb3b2; --color-pink: #70d6db; /* ── Headings ──────────────────────────────────────────── */ --h1-color: #ffb3b2; --h2-color: #ffb3b2; --h3-color: #ffb3b2; --h4-color: #70d6db; --h5-color: #e8bcbb; --h6-color: #ae8786; /* ── Links ─────────────────────────────────────────────── */ --link-color: #ffb3b2; --link-color-hover: #000000; --link-external-color: #70d6db; --link-unresolved-color: #ae8786; /* ── Tags ──────────────────────────────────────────────── */ --tag-color: #000000; --tag-background: #ff525d; --tag-border-color: #ffb3b2; --tag-color-hover: #680013; --tag-background-hover: #ffb3b2; /* ── Checkboxes ────────────────────────────────────────── */ --checkbox-color: #ffb3b2; --checkbox-color-hover: #ff525d; --checkbox-border-color: #ae8786; --checkbox-marker-color: #680013; /* ── Code Blocks ───────────────────────────────────────── */ --code-background: #291616; --code-normal: #fedad9; --code-comment: #ae8786; --code-function: #ffb3b2; --code-important: #ffb4ab; --code-keyword: #ffb3b2; --code-operator: #70d6db; --code-property: #e8bcbb; --code-punctuation: #5e3f3e; --code-string: #70d6db; --code-tag: #ffb4ab; --code-value: #ffb3b2; /* ── 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 #ae8786; /* ── Graph View ────────────────────────────────────────── */ --graph-node: #ffb3b2; --graph-node-unresolved: #ae8786; --graph-node-focused: #000000; --graph-node-tag: #ffb3b2; --graph-node-attachment: #70d6db; --graph-line: #5e3f3e; --graph-background: #200e0e; } /* ── Active line highlight ─────────────────────────────────── */ .cm-active { background-color: rgba(var(--mat-on-surface-rgb), 0.03) !important; }