zed.dev dark mode by Antikyth

/* ==UserStyle==
@name           zed.dev dark mode
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Dark mode with a black background.
@author         Antikyth
==/UserStyle== */
@-moz-document url-prefix("https://zed.dev/") {
    .not-prose {
        background-color: var(--palette-offgray-100) !important;
        box-shadow: 4px 4px 0px var(--shadow) !important;
    }

    element {
        box-shadow: 4px 4px 0px var(--shadow) !important;
    }

    .syntax-block-comment,
    .syntax-cdata,
    .syntax-comment,
    .syntax-doctype,
    .syntax-operator,
    .syntax-prolog {
        color: var(--palette-green-300);
    }

    .syntax-function,
    .syntax-function-name,
    .syntax-keyword,
    .syntax-atrule,
    .syntax-builtin,
    .syntax-important,
    .syntax--selector,
    .syntax-punctuation {
        color: var(--palette-orange);
    }

    .syntax-boolean,
    .syntax-number {
        color: var(--palette-yellow-600);
    }

    .syntax-char,
    .syntax-string {
        color: var(--palette-lime);
    }

    .syntax-regex {
        color: var(--palette-green-400);
    }

    .syntax-variable {
        color: white;
        text-decoration: underline;
    }

    .syntax-title {
        color: var(--palette-yellow);
    }

    .syntax-entity,
    .syntax-type,
    .syntax url {
        color: var(--palette-blue);
    }

    figure {
        background-color: var(--palette-offgray-100);
    }

    figcaption {
        color: var(--palette-blue-600) !important;
    }



    :root {
        --palette-offgray-100: #111620;
        --palette-offgray-200: #272b34;
        --palette-offgray-300: #3d424e;
        --palette-offgray-400: #8e95a2;
        --palette-offgray-500: #bac0ca;
        --palette-offgray-600: #e2e5e9;

        --palette-offwhite-600: #e9e8e3;
        --palette-offwhite-500: #c8c5bd;
        --palette-offwhite-400: #87867c;
        --palette-offwhite-300: #51504d;
        --palette-offwhite-200: #242422;
        --palette-offwhite-100: #121212;

        --palette-blue-800: #cdf;
        --palette-blue-700: #8fb5ff;
        --palette-blue-600: #6295f9;
        --palette-blue-500: #1d67f6;
        --palette-blue-400: #084ccf;
        --palette-blue-300: #053289;
        --palette-blue-200: #132b63;
        --palette-blue-100: #1a2742;

        --palette-purple-700: #f0e5ff;
        --palette-purple-600: #e2cbff;
        --palette-purple-500: #bb8dff;
        --palette-purple-400: #9d5fff;
        --palette-purple-300: #7013ff;
        --palette-purple-200: #4f00d8;
        --palette-purple-100: #360090;

        --palette-green-600: #d0f6e7;
        --palette-green-500: #8bdab9;
        --palette-green-400: #46be8c;
        --palette-green-300: #00a873;
        --palette-green-200: #007a50;
        --palette-green-100: #003d1f;

        --palette-teal-600: #dffffe;
        --palette-teal-500: #70f2f3;
        --palette-teal-400: #00e7e8;
        --palette-teal-300: #00cbc9;
        --palette-teal-200: #00999b;
        --palette-teal-100: #006567;

        --palette-yellow-800: #fff7d2;
        --palette-yellow-700: #fff1b6;
        --palette-yellow-600: #ffe674;
        --palette-yellow-500: #ffd912;
        --palette-yellow-400: #ffd000;
        --palette-yellow-300: #f29500;
        --palette-yellow-200: #b45800;
        --palette-yellow-100: #522d0d;

        --palette-orange: #ff7113;
        --palette-yellow: #ffc955;
        --palette-lime: #a9e407;
        --palette-blue: #1ebcff;
        --shadow: rgba(0, 0, 0, 0.12);

        --palette-red-600: #fed1ce;
        --palette-red-500: #fd978b;
        --palette-red-400: #fa6257;
        --palette-red-300: #f73c33;
        --palette-red-200: #b02a21;
        --palette-red-100: #731508;
    }
}