140 lines
6.5 KiB
CSS
140 lines
6.5 KiB
CSS
/* Matugen Obsidian Dynamic Colors Snippet
|
|
* Place output in: <vault>/.obsidian/snippets/matugen.css
|
|
* Then enable it in: Settings → Appearance → CSS Snippets
|
|
*/
|
|
|
|
.theme-dark, .theme-light {
|
|
|
|
/* ── Material You RGB helpers ──────────────────────────── */
|
|
--mat-bg-rgb: 19, 19, 20;
|
|
--mat-surface-rgb: 19, 19, 20;
|
|
--mat-on-surface-rgb: 229, 226, 227;
|
|
--mat-primary-rgb: 196, 197, 216;
|
|
--mat-on-primary-rgb: 45, 48, 62;
|
|
|
|
/* ── Core Backgrounds ──────────────────────────────────── */
|
|
--background-primary: #131314;
|
|
--background-primary-alt: #131314;
|
|
--background-secondary: #1c1b1c;
|
|
--background-secondary-alt: #201f20;
|
|
|
|
/* ── Titlebar ──────────────────────────────────────────── */
|
|
--titlebar-background: #131314;
|
|
--titlebar-background-focused: #1c1b1c;
|
|
--titlebar-text-color: #e5e2e3;
|
|
|
|
/* ── Borders & Dividers ────────────────────────────────── */
|
|
--background-modifier-border: #46464c;
|
|
--background-modifier-border-focus: #919096;
|
|
--background-modifier-border-hover: #919096;
|
|
|
|
/* ── Text Colors ───────────────────────────────────────── */
|
|
--text-normal: #e5e2e3;
|
|
--text-muted: #c7c6cc;
|
|
--text-faint: #919096;
|
|
--text-on-accent: #2d303e;
|
|
--text-selection: rgba(196, 197, 216, 0.25);
|
|
|
|
/* ── Accent & Interactive ──────────────────────────────── */
|
|
--interactive-accent: #c4c5d8;
|
|
--interactive-accent-hover: #2a2d3b;
|
|
--interactive-accent-rgb: 196, 197, 216;
|
|
--text-accent: #c4c5d8;
|
|
--text-accent-hover: #2a2d3b;
|
|
|
|
/* ── 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: #362d18;
|
|
--background-modifier-error: #93000a;
|
|
--background-modifier-error-hover: #ffb4ab;
|
|
|
|
/* ── Obsidian Color Scale (--color-base-XX) ────────────── */
|
|
--color-base-00: #131314;
|
|
--color-base-05: #131314;
|
|
--color-base-10: #0e0e0f;
|
|
--color-base-20: #1c1b1c;
|
|
--color-base-25: #201f20;
|
|
--color-base-30: #2a2a2b;
|
|
--color-base-35: #353436;
|
|
--color-base-40: #46464c;
|
|
--color-base-50: #919096;
|
|
--color-base-60: #c7c6cc;
|
|
--color-base-70: #e5e2e3;
|
|
--color-base-100: #e5e2e3;
|
|
|
|
/* ── Semantic Colors ───────────────────────────────────── */
|
|
--color-red: #ffb4ab;
|
|
--color-orange: #d4c5a7;
|
|
--color-yellow: #c7c6ce;
|
|
--color-green: #362d18;
|
|
--color-cyan: #46464d;
|
|
--color-blue: #c4c5d8;
|
|
--color-purple: #c7c6ce;
|
|
--color-pink: #d4c5a7;
|
|
|
|
/* ── Headings ──────────────────────────────────────────── */
|
|
--h1-color: #c4c5d8;
|
|
--h2-color: #c4c5d8;
|
|
--h3-color: #c7c6ce;
|
|
--h4-color: #d4c5a7;
|
|
--h5-color: #c7c6cc;
|
|
--h6-color: #919096;
|
|
|
|
/* ── Links ─────────────────────────────────────────────── */
|
|
--link-color: #c4c5d8;
|
|
--link-color-hover: #b8bacc;
|
|
--link-external-color: #d4c5a7;
|
|
--link-unresolved-color: #919096;
|
|
|
|
/* ── Tags ──────────────────────────────────────────────── */
|
|
--tag-color: #b8bacc;
|
|
--tag-background: #2a2d3b;
|
|
--tag-border-color: #c4c5d8;
|
|
--tag-color-hover: #2d303e;
|
|
--tag-background-hover: #c4c5d8;
|
|
|
|
/* ── Checkboxes ────────────────────────────────────────── */
|
|
--checkbox-color: #c4c5d8;
|
|
--checkbox-color-hover: #2a2d3b;
|
|
--checkbox-border-color: #919096;
|
|
--checkbox-marker-color: #2d303e;
|
|
|
|
/* ── Code Blocks ───────────────────────────────────────── */
|
|
--code-background: #1c1b1c;
|
|
--code-normal: #e5e2e3;
|
|
--code-comment: #919096;
|
|
--code-function: #c4c5d8;
|
|
--code-important: #ffb4ab;
|
|
--code-keyword: #c7c6ce;
|
|
--code-operator: #d4c5a7;
|
|
--code-property: #c7c6cc;
|
|
--code-punctuation: #46464c;
|
|
--code-string: #d4c5a7;
|
|
--code-tag: #ffb4ab;
|
|
--code-value: #c7c6ce;
|
|
|
|
/* ── 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 #919096;
|
|
|
|
/* ── Graph View ────────────────────────────────────────── */
|
|
--graph-node: #c4c5d8;
|
|
--graph-node-unresolved: #919096;
|
|
--graph-node-focused: #b8bacc;
|
|
--graph-node-tag: #c7c6ce;
|
|
--graph-node-attachment: #d4c5a7;
|
|
--graph-line: #46464c;
|
|
--graph-background: #131314;
|
|
|
|
}
|
|
|
|
/* ── Active line highlight ─────────────────────────────────── */
|
|
.cm-active {
|
|
background-color: rgba(var(--mat-on-surface-rgb), 0.03) !important;
|
|
} |