Obsidian Theme: Dark Notions

darkNotions.css

/*@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;1,600;1,700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');*/

.theme-light,
.theme-dark {
    /*start My own vars*/
    --warm-grey-000: #282A2C;
    --warm-grey-100: #2C2E31;
    --warm-grey-200: #323437;
    --warm-grey-300: #3A3D41;
    --warm-grey-400: #646669;
    --warm-grey-500: #D1D0C5;
    --warm-grey-600: #D9D8CF;

    --primary-500: #CA4754;
    --accent-500: hsl(47, 82%, 49%);

    --border-width-chunky: 4px;
    /*end my own vars*/


    --background-primary: var(--warm-grey-100);
    --background-primary-alt: var(--warm-grey-000); /* used in code block bgs */
    --background-secondary: var(--warm-grey-000);
    --text-normal: var(--warm-grey-600);

    --link-color: inherit;
    --link-external-color: inherit;
    --list-indent: 1.5em;

    --background-modifier-border: var(--warm-grey-300); /*This is the HR color too*/

    --text-on-accent: var(--background-primary);
    --text-on-accent-inverted: var(--warm-grey-600);


    --color-accent: var(--accent-500);
    --accent-h: 47;
    --accent-s: 82%;
    --accent-l: 49%;
    --accent-contrast: var(--background-primary-alt);
    --bold-color: var(--primary-500);
    --bold-weight: var(--font-bold);
    --italic-weight: var(--font-light);

    /*graph*/
    --graph-line: var(--warm-grey-400);
    --graph-node: var(--warm-grey-500);
    /* Horizontal rules */
    --hr-color: var(--warm-grey-400);
    --hr-thickness: var(--border-width-chunky);
    /*headings*/
    --h1-color: var(--warm-grey-500);
    --h2-color: var(--h1-color);
    --h3-color: var(--h1-color);
    --h4-color: var(--h1-color);
    --h5-color: var(--h1-color);
    --h6-color: var(--h1-color);
    --h1-font: "Barlow Condensed";
    --h2-font: var(--h1-font);
    --h3-font: var(--h1-font);
    --h4-font: var(--h1-font);
    --h5-font: var(--h1-font);
    --h6-font: var(--h1-font);
    --h1-line-height: 1.2;
    --h2-line-height: 1.2;
    --h3-line-height: 1.3;
    --h4-line-height: 1.4;
    --h5-line-height: var(--line-height-normal);
    --h6-line-height: var(--line-height-normal);
    --h1-size: 2.2em;
    --h2-size: 2em;
    --h3-size: 1.8em;
    --h4-size: 1.66em;
    --h5-size: 1.45em;
    --h6-size: 1.2em;
    --h1-style: normal;
    --h2-style: normal;
    --h3-style: normal;
    --h4-style: normal;
    --h5-style: normal;
    --h6-style: normal;
    --h1-variant: normal;
    --h2-variant: normal;
    --h3-variant: normal;
    --h4-variant: normal;
    --h5-variant: normal;
    --h6-variant: normal;
    --h1-weight: 700;
    --h2-weight: 700;
    --h3-weight: 700;
    --h4-weight: 700;
    --h5-weight: 600;
    --h6-weight: 600;

    --blockquote-background-color:var(--warm-grey-000);
    /*base colors*/
    --color-base-00: var(--warm-grey-000);
    --color-base-05: var(--warm-grey-000);
    --color-base-10: var(--warm-grey-100);
    --color-base-20: var(--warm-grey-100);
    --color-base-25: var(--warm-grey-100);
    --color-base-30: var(--warm-grey-200);
    --color-base-35: var(--warm-grey-200);
    --color-base-40: var(--warm-grey-300);
    --color-base-50: var(--warm-grey-400);
    --color-base-60: var(--warm-grey-400);
    --color-base-70: var(--warm-grey-500);
    --color-base-100: var(--warm-grey-600);

    /*--text-muted:var(--warm-grey-500);*/
    /*--text-faint: var(--color-base-70);*/
    --blockquote-border-thickness:var(--border-width-chunky);
    --callout-border-width: var(--border-width-chunky);
    --callout-border-opacity:0.8;
    --list-marker-color:var(--warm-grey-400);
    --checkbox-border-color: var(--warm-grey-400);
    /*--checkbox-radius:0;*/
    --blockquote-border-radius:var(--callout-radius);

    --color-red-rgb: 233, 49, 71;
    --color-red: #e93147;
    --color-orange-rgb: 255, 193, 130;
    --color-orange: #FFC182;
    --color-yellow-rgb: 224, 172, 0;
    --color-yellow: #e0ac00;
    --color-green-rgb: 91, 185, 139;
    --color-green: #5BB98B;
    --color-cyan-rgb: 0, 191, 188;
    --color-cyan: #00bfbc;
    --color-blue-rgb: 94, 177, 239;
    --color-blue: #5EB1EF;
    --color-purple-rgb: 190, 147, 228;
    --color-purple: #BE93E4;
    --color-pink-rgb: 213, 57, 132;
    --color-pink: #d53984;
}

.cm-gutterElement{
    color:var(--color-base-40);
}

.cm-formatting-header {
    color: var(--warm-grey-300);
}

.cm-s-obsidian span.cm-formatting-link {
    color: inherit;
}

.cm-line.HyperMD-quote{
    --pad:0.8em;
    padding-top: var(--pad) !important;
    padding-bottom: var(--pad) !important;

}

.callout {
    /*overflow: hidden;*/
    /*border-style: solid;*/
    /*border-color: rgba(var(--callout-color), var(--callout-border-opacity));*/
    /*border-width: var(--callout-border-width);*/
    /*border-radius: var(--callout-radius);*/
    /*margin: 1em 0;*/
    /*mix-blend-mode: var(--callout-blend-mode);*/
    background-color: var(--warm-grey-000);
    padding: var(--callout-padding);
}



/*View mode stuff*/
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
    margin-block-end: 0;
}

.markdown-rendered p {
    margin-block-start: 0;
}