dotfiles/.config/matugen/templates/obsidian.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:             {{colors.background.default.red}}, {{colors.background.default.green}}, {{colors.background.default.blue}};
    --mat-surface-rgb:        {{colors.surface.default.red}}, {{colors.surface.default.green}}, {{colors.surface.default.blue}};
    --mat-on-surface-rgb:     {{colors.on_surface.default.red}}, {{colors.on_surface.default.green}}, {{colors.on_surface.default.blue}};
    --mat-primary-rgb:        {{colors.primary.default.red}}, {{colors.primary.default.green}}, {{colors.primary.default.blue}};
    --mat-on-primary-rgb:     {{colors.on_primary.default.red}}, {{colors.on_primary.default.green}}, {{colors.on_primary.default.blue}};

    /* ── Core Backgrounds ──────────────────────────────────── */
    --background-primary:           {{colors.background.default.hex}};
    --background-primary-alt:       {{colors.surface_dim.default.hex}};
    --background-secondary:         {{colors.surface_container_low.default.hex}};
    --background-secondary-alt:     {{colors.surface_container.default.hex}};

    /* ── Titlebar ──────────────────────────────────────────── */
    --titlebar-background:          {{colors.surface_dim.default.hex}};
    --titlebar-background-focused:  {{colors.surface_container_low.default.hex}};
    --titlebar-text-color:          {{colors.on_surface.default.hex}};

    /* ── Borders & Dividers ────────────────────────────────── */
    --background-modifier-border:         {{colors.outline_variant.default.hex}};
    --background-modifier-border-focus:   {{colors.outline.default.hex}};
    --background-modifier-border-hover:   {{colors.outline.default.hex}};

    /* ── Text Colors ───────────────────────────────────────── */
    --text-normal:      {{colors.on_surface.default.hex}};
    --text-muted:       {{colors.on_surface_variant.default.hex}};
    --text-faint:       {{colors.outline.default.hex}};
    --text-on-accent:   {{colors.on_primary.default.hex}};
    --text-selection:   rgba({{colors.primary.default.red}}, {{colors.primary.default.green}}, {{colors.primary.default.blue}}, 0.25);

    /* ── Accent & Interactive ──────────────────────────────── */
    --interactive-accent:           {{colors.primary.default.hex}};
    --interactive-accent-hover:     {{colors.primary_container.default.hex}};
    --interactive-accent-rgb:       {{colors.primary.default.red}}, {{colors.primary.default.green}}, {{colors.primary.default.blue}};
    --text-accent:                  {{colors.primary.default.hex}};
    --text-accent-hover:            {{colors.primary_container.default.hex}};

    /* ── 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:        {{colors.tertiary_container.default.hex}};
    --background-modifier-error:          {{colors.error_container.default.hex}};
    --background-modifier-error-hover:    {{colors.error.default.hex}};

    /* ── Obsidian Color Scale (--color-base-XX) ────────────── */
    --color-base-00:    {{colors.background.default.hex}};
    --color-base-05:    {{colors.surface_dim.default.hex}};
    --color-base-10:    {{colors.surface_container_lowest.default.hex}};
    --color-base-20:    {{colors.surface_container_low.default.hex}};
    --color-base-25:    {{colors.surface_container.default.hex}};
    --color-base-30:    {{colors.surface_container_high.default.hex}};
    --color-base-35:    {{colors.surface_container_highest.default.hex}};
    --color-base-40:    {{colors.outline_variant.default.hex}};
    --color-base-50:    {{colors.outline.default.hex}};
    --color-base-60:    {{colors.on_surface_variant.default.hex}};
    --color-base-70:    {{colors.on_surface.default.hex}};
    --color-base-100:   {{colors.inverse_surface.default.hex}};

    /* ── Semantic Colors ───────────────────────────────────── */
    --color-red:        {{colors.error.default.hex}};
    --color-orange:     {{colors.tertiary.default.hex}};
    --color-yellow:     {{colors.secondary.default.hex}};
    --color-green:      {{colors.tertiary_container.default.hex}};
    --color-cyan:       {{colors.secondary_container.default.hex}};
    --color-blue:       {{colors.primary.default.hex}};
    --color-purple:     {{colors.secondary.default.hex}};
    --color-pink:       {{colors.tertiary.default.hex}};

    /* ── Headings ──────────────────────────────────────────── */
    --h1-color:     {{colors.primary.default.hex}};
    --h2-color:     {{colors.primary.default.hex}};
    --h3-color:     {{colors.secondary.default.hex}};
    --h4-color:     {{colors.tertiary.default.hex}};
    --h5-color:     {{colors.on_surface_variant.default.hex}};
    --h6-color:     {{colors.outline.default.hex}};

    /* ── Links ─────────────────────────────────────────────── */
    --link-color:           {{colors.primary.default.hex}};
    --link-color-hover:     {{colors.on_primary_container.default.hex}};
    --link-external-color:  {{colors.tertiary.default.hex}};
    --link-unresolved-color: {{colors.outline.default.hex}};

    /* ── Tags ──────────────────────────────────────────────── */
    --tag-color:            {{colors.on_primary_container.default.hex}};
    --tag-background:       {{colors.primary_container.default.hex}};
    --tag-border-color:     {{colors.primary.default.hex}};
    --tag-color-hover:      {{colors.on_primary.default.hex}};
    --tag-background-hover: {{colors.primary.default.hex}};

    /* ── Checkboxes ────────────────────────────────────────── */
    --checkbox-color:           {{colors.primary.default.hex}};
    --checkbox-color-hover:     {{colors.primary_container.default.hex}};
    --checkbox-border-color:    {{colors.outline.default.hex}};
    --checkbox-marker-color:    {{colors.on_primary.default.hex}};

    /* ── Code Blocks ───────────────────────────────────────── */
    --code-background:  {{colors.surface_container_low.default.hex}};
    --code-normal:      {{colors.on_surface.default.hex}};
    --code-comment:     {{colors.outline.default.hex}};
    --code-function:    {{colors.primary.default.hex}};
    --code-important:   {{colors.error.default.hex}};
    --code-keyword:     {{colors.secondary.default.hex}};
    --code-operator:    {{colors.tertiary.default.hex}};
    --code-property:    {{colors.on_surface_variant.default.hex}};
    --code-punctuation: {{colors.outline_variant.default.hex}};
    --code-string:      {{colors.tertiary.default.hex}};
    --code-tag:         {{colors.error.default.hex}};
    --code-value:       {{colors.secondary.default.hex}};

    /* ── 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 {{colors.outline.default.hex}};

    /* ── Graph View ────────────────────────────────────────── */
    --graph-node:           {{colors.primary.default.hex}};
    --graph-node-unresolved: {{colors.outline.default.hex}};
    --graph-node-focused:   {{colors.on_primary_container.default.hex}};
    --graph-node-tag:       {{colors.secondary.default.hex}};
    --graph-node-attachment: {{colors.tertiary.default.hex}};
    --graph-line:           {{colors.outline_variant.default.hex}};
    --graph-background:     {{colors.background.default.hex}};

}

/* ── Active line highlight ─────────────────────────────────── */
.cm-active {
    background-color: rgba(var(--mat-on-surface-rgb), 0.03) !important;
}