obsidian.css

/*
 Magma - A Dark theme for Obsidian 
 Made By Mayonnaise2124
 */

 body {
    font-size: 16px;
    --font-monospace: Consolas, monaco, monospace;
}

.theme-dark {
    /* Backgrounds: All the background Colors
     - backgroud-primary: The background color of a panel
     - background-prmary-alt: the color for the very edge of a panel
     - background-secondary: The background color of side panels and and panel titles
     - background-secondary-alt: The background color for the sidebar, and also the color of
       the currently active panel's title
     */
    --background-primary: hsl(25, 4%, 12%);
    --background-primary-alt: hsl(25, 2%, 8%);
    --background-secondary: hsl(25, 3%, 15%);
    --background-secondary-alt: hsl(25, 3%, 5%);

    /* Modifier colors: For things like input boxes
     - background-modifier-border: Modifier border
     - background-modifier-form-field: The inside fill when not hovered over
     - background-modifier-form-field-highlighted: The inside fill when hovered over
    */
    --background-modifier-border: hsl(25, 25%, 25%);
    --background-modifier-form-field: hsl(25, 15%, 12%);
    --background-modifier-form-field-highlighted: hsl(25, 15%, 10%);
    --background-modifier-success: hsl(118, 76%, 57%);
    --background-modifier-error: hsl(2, 76%, 57%);
    --background-modifier-error-rgb: 229, 68, 62;
    --background-modifier-error-hover: hsl(2, 76%, 40%);
    
    /* Text-related colors
     - text-accent: Color for links
     - text-accent-hover: Hovered links color
     - text-normal: Normal text color
     - text-muted: Slightly fainter text
     - text-faint: Very light text
     - text-highlight-bg: Highlight background for searches
     - text-selection: Cursor selection color
     */
    --text-accent: hsl(27, 61%, 60%);
    --text-accent-hover: hsl(27, 61%, 50%);
    --text-normal: hsl(30, 53%, 93%);
    --text-muted: hsl(31, 12%, 53%);
    --text-faint: hsl(26, 3%, 39%);
    --text-error: hsl(2, 76%, 57%);
    --text-error-hover: hsl(2, 76%, 45%);
    --text-highlight-bg: hsl(28, 59%, 49%);
    --text-selection: hsla(194, 62%, 42%, 0.39);
    
    /* Stuff for interactive colors
     - interactive-accent: Color of button background
     - interactive-accent-hover: Color of hovered button background
     - text-on-accent: Color of text on buttons
     */
    --interactive-normal: hsl(27, 40%, 60%);
    --interactive-hover: hsl(27, 40%, 50%);
    --interactive-accent: hsl(27, 67%, 49%);
    --interactive-accent-rgb: 209, 117, 41;
    --interactive-accent-hover: hsl(27, 52%, 40%);
    --text-on-accent: var(--text-normal);

    /* Scrollbar colors: the color of the scrollbar
     - scrollbar-active-thumb-bg: 
     - scrollbar-bg: 
     - scrollbar-thumb-bg: 
     */
    --scrollbar-active-thumb-bg: hsl(30, 50%, 51%);
    --scrollbar-bg: hsl(30, 9%, 22%);
    --scrollbar-thumb-bg: hsla(30, 44%, 45%, 0.904);

    /* Custom: Pulsing Color: For pulsing animations */
    --pulse-start: hsl(7, 61%, 60%);
    --pulse-end: hsl(49, 61%, 60%);
}

/* Change Math and Code Block Color */
.cm-math {
    color: var(--text-muted) !important;
}

.cm-inline-code, code, .HyperMD-codeblock {
    color: var(--text-muted) !important;
}

/* Pulsing Colors for the active panel header */
@keyframes headerPulse {
    0% {
        border-bottom-color: var(--pulse-start);
    }

    50% {
        border-bottom-color: var(--pulse-end);
    }

    100% {
        border-bottom-color: var(--pulse-start);
    }
}

.workspace-leaf.mod-active .view-header {
    animation: headerPulse 6s infinite;
}


/* Some stuff concerning the Graph View */

/* Fill color of nodes */
.graph-view.color-fill {
    color: var(--interactive-normal);
}

/* Fill color of hovered nodes */
.graph-view.color-fill-highlight {
    color: var(--interactive-hover);
}


/* Fading Status Bar and Note Controls (Thanks to Rumen Dimitrov) */
.status-bar:hover .status-bar-item {
    opacity: 1;
    transition: opacity .1s ease-in-out;
}

.status-bar:not(:hover) .status-bar-item {
    opacity: 0.25;
    transition: opacity .25s ease-in-out;
}


.view-header:hover .view-actions {
    opacity: 1;
    transition: opacity .1s ease-in-out;
}

.view-header:not(:hover) .view-actions {
    opacity: 0.25;
    transition: opacity .25s ease-in-out;
}

/* Higher Contrast for Status Bar */
.status-bar-item {
    color: var(--text-accent)
}

/* Tag Pills (Based on the design by _ph) */
a.tag {
    /* Magma Background */
    background-color: hsl(27, 55%, 32%);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cdefs%2F%3E%3Cpath%20fill%3D%27%233f3c39%27%20d%3D%27M0%200v4l1%201%203-2-1-3H0zm4%200l1%203%202%201%203-3-1.5-1H4zm5.5%200L11%201l-.5-1h-1zM12%200l2%201%20.333984-1H12zm3.75%200L15%203l1%201V0h-.25zM12%201l-1%201%202%203%201-3-2-1zm-2%202L8%205%207%209h2l3-3-2-3zm4%200l-1%203%202-1-1-2zM4%204L1%206l5%203%201-4-3-1zM0%206v3l1%201%204-1-5-3zm16%200l-2%201%202%202V6zm-3%201l-3%203%204%202%202-2-3-3zm-8%203l-4%201%203%204%203-1h2l-2-2-2-2zm1%200l4%204%202-2-4-2H6zm-6%201v3l1-2-1-1zm16%200l-2%202%202%201v-3zM2%2013l-2%202v1h3l-1-3zm11%200l-2%202%201%201h2.333984L15%2014l-2-1zm-6%202l-3%201h4.5L7%2015zm1%200l1.5%201h1l-.5-1H8zm8%200l-.25%201H16v-1z%27%2F%3E%3C%2Fsvg%3E");
    background-size: 40px;
    background-repeat: repeat repeat;
    border: none;
    color: var(--text-normal);
    font-size: 11px;
    padding: 1px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
}

a.tag:hover {
    color: var(--text-normal);
    background-color: hsl(30, 5%, 24%);
}

/* Code Syntax Highlighting */
.token.comment {
    color: hsl(36, 4%, 52%) !important;
    font-style: oblique;
}

.token.keyword {
    color: hsl(29, 63%, 60%) !important;
    font-weight: bolder;
}

.token.punctuation {
    color: hsl(0, 0%, 69%) !important;
}

.token.class-name, .token.function {
    color:hsl(214, 64%, 67%) !important;
}

.token.string {
    color: hsl(113, 34%, 55%) !important;
}

.token.doctype {
    color: hsl(88, 60%, 64%) !important;
}

.token.tag {
    color: hsl(318, 78%, 69%) !important;
}

.token.dom.variable {
    color: hsl(29, 34%, 54%) !important;
}