@media (prefers-color-scheme: dark) {
    :root {
        --image-filters: invert(1) hue-rotate(180deg) contrast(0.8);
        --out-of-focus-opacity: 0.5;

        /* Color scheme */
        --main-bg-color: hsl(0deg 0% 12%);
        --rule-color: rgba(255, 255, 255, 0.15);
        --kbd-border-color: #222222;
        --header-bg-color: hsl(30deg 3% 16%);
        --header-border-color: transparent;
        --ui-button-color: rgb(255, 255, 255);
        --cursor-color: white;

        /* Cells */
        --normal-cell: 100, 100, 100;
        /* --code-differs */
        --error-color: 255, 125, 125;
        --normal-cell-color: rgba(var(--normal-cell), 0.2);
        --dark-normal-cell-color: rgba(var(--normal-cell), 0.4);
        --selected-cell-color: rgb(40 147 189 / 65%);
        --code-differs-cell-color: #9b906c;
        --error-cell-color: rgba(var(--error-color), 0.6);
        --bright-error-cell-color: rgba(var(--error-color), 0.9);
        --light-error-cell-color: rgba(var(--error-color), 0);

        /*Export styling*/
        --export-bg-color: hsl(225deg 17% 18%);
        --export-color: rgb(255 255 255 / 84%);
        --export-card-bg-color: rgb(73 73 73);
        --export-card-title-color: rgba(255, 255, 255, 0.85);
        --export-card-text-color: rgb(255 255 255 / 70%);
        --export-card-shadow-color: #0000001c;

        /*Frontmatter styling*/
        --frontmatter-button-bg-color: #554e4e;
        --frontmatter-outline-color: rgb(255 248 235);
        --frontmatter-input-bg-color: #2c2c2c;
        --frontmatter-input-border-color: #757575;

        /* PlutoLand upload styling */
        --plutoland-bg-color: var(--main-bg-color);
        --plutoland-bigbutton-bg-color: #5b5858;
        --plutoland-url-fg: #c0cdee;
        --plutoland-url-bg: #02376f;
        --plutoland-or-bg-color: #323334;

        /*Pluto output styling */
        --pluto-schema-types-color: rgba(30, 19, 19, 0.6);
        --pluto-schema-types-border-color: rgba(255, 255, 255, 0.2);
        --pluto-dim-output-color: hsl(0, 0, 70%);
        --pluto-output-color: hsl(0deg 0% 77%);
        --pluto-output-h-color: hsl(0, 0%, 90%);
        --pluto-output-bg-color: var(--main-bg-color);
        --a-underline: #ffffff69;
        --blockquote-color: inherit;
        --blockquote-bg: #2e2e2e;
        --admonition-title-color: black;
        --jl-message-color: rgb(38 90 32);
        --jl-message-accent-color: rgb(131 191 138);
        --jl-info-color: rgb(42 73 115);
        --jl-info-accent-color: rgb(92 140 205);
        --jl-warn-color: rgb(96 90 34);
        --jl-warn-accent-color: rgb(221 212 100);
        --jl-danger-color: rgb(100 47 39);
        --jl-danger-accent-color: rgb(255, 117, 98);
        --jl-debug-color: hsl(288deg 33% 27%);
        --jl-debug-accent-color: hsl(283deg 59% 69%);
        /* --footnote-border-color */
        --table-border-color: rgba(255, 255, 255, 0.2);
        --table-bg-hover-color: rgba(193, 192, 235, 0.15);
        --pluto-tree-color: rgb(209 207 207 / 61%);

        /*pluto cell styling*/
        --disabled-cell-bg-color: rgba(139, 139, 139, 0.25);
        --selected-cell-bg-color: rgb(42 115 205 / 78%);
        --hover-scrollbar-color-1: rgba(0, 0, 0, 0.15);
        --hover-scrollbar-color-2: rgba(0, 0, 0, 0.05);
        --skip-as-script-background-color: #888;
        --depends-on-skip-as-script-background-color: #666;

        /* Pluto shoulders */
        --shoulder-hover-bg-color: rgba(255, 255, 255, 0.05);

        /* Logs */
        --pluto-logs-bg-color: hsl(0deg 0% 17%);
        --pluto-logs-key-color: rgba(255, 255, 255, 0.6);
        --pluto-logs-progress-fill: #5f7f5b;
        --pluto-logs-progress-bg: #3d3d3d;
        --pluto-logs-progress-border: hsl(210deg 35% 72%);
        --pluto-logs-info-color: #484848;
        --pluto-logs-info-accent-color: inherit;
        --pluto-logs-warn-color: rgb(80 76 38);
        --pluto-logs-warn-accent-color: rgb(239 231 135);
        --pluto-logs-danger-color: rgb(100 47 39);
        --pluto-logs-danger-accent-color: rgb(255 147 132);
        --pluto-logs-debug-color: hsl(288deg 19% 25%);
        --pluto-logs-debug-accent-color: hsl(283deg 56% 79%);

        /*Top navbar styling*/
        --nav-h1-text-color: white;
        --nav-filepicker-color: #b6b6b6;
        --nav-filepicker-border-color: #c7c7c7;
        --nav-filepicker-suggest-color: rgba(107, 125, 140, 0.796);
        --nav-process-status-bg-color: rgb(82, 82, 82);
        --nav-process-status-color: var(--pluto-output-h-color);

        /*header*/
        --restart-recc-header-color: rgb(44 106 157 / 56%);
        --restart-recc-accent-color: rgb(44 106 157);
        --restart-req-header-color: rgb(145 66 60 / 56%);
        --dead-process-header-color: rgba(250, 75, 21, 0.473);
        --loading-header-color: hsl(0deg 0% 20% / 50%);
        --disconnected-header-color: rgba(255, 169, 114, 0.56);
        --binder-loading-header-color: hsl(51deg 64% 90% / 50%);

        /*loading bar*/
        --loading-grad-color-1: #a9d4f1;
        --loading-grad-color-2: #d0d4d7;

        /*saveall container*/
        --overlay-button-bg: #2c2c2c;
        --overlay-button-border: #9e9e9e70;
        --overlay-button-border-save: #c7a74670;
        --overlay-button-color: white;

        /*input_context_menu*/
        --input-context-menu-border-color: rgba(255, 255, 255, 0.1);
        --input-context-menu-bg-color: rgb(39, 40, 47);
        --input-context-menu-soon-color: #b1b1b144;
        --input-context-menu-hover-bg-color: rgba(255, 255, 255, 0.1);
        --input-context-menu-li-color: #c7c7c7;

        /* ai features */
        --ai-gradient-bg: linear-gradient(20deg, #371d43, #613c35);
        --ai-prompt-bg: #3a3a3a;
        /*Pkg status*/
        --pkg-popup-bg: #3d2f44;
        --pkg-popup-border-color: #574f56;
        --pkg-popup-buttons-bg-color: var(--input-context-menu-bg-color);
        --black: white;
        --white: black;
        --pkg-terminal-bg-color: #252627;
        --pkg-terminal-border-color: #c3c3c388;

        /* run area*/
        --pluto-runarea-bg-color: rgb(43, 43, 43);
        --pluto-runarea-span-color: hsl(353, 5%, 64%);

        /*drop ruler*/
        --dropruler-bg-color: rgba(255, 255, 255, 0.1);

        /* jlerror */
        --jlerror-header-color: #d9baba;
        --jlerror-mark-bg-color: rgb(0 0 0 / 18%);
        --jlerror-a-bg-color: hsl(65.82deg 17.14% 27.45%);
        --jlerror-a-border-left-color: hsl(66 27% 35% / 1);
        --jlerror-mark-color: #b1a9a9;

        /* helpbox */
        --helpbox-bg-color: rgb(30 34 31);
        --helpbox-box-shadow-color: #00000017;
        --helpbox-header-bg-color: #2c3e36;
        --helpbox-header-tab-bg-color: #554e4e;
        --helpbox-header-color: rgb(255 248 235);
        --helpbox-search-bg-color: #2c2c2c;
        --helpbox-search-border-color: #757575;
        --helpbox-notfound-search-color: rgb(139, 139, 139);
        --helpbox-text-color: rgb(230, 230, 230);
        --code-section-bg-color: rgb(44, 44, 44);
        --code-section-border-color: #555a64;
        --process-item-bg: #443d44;
        --process-busy: #ffcd70;
        --process-finished: hsl(126deg 30% 60%);
        --process-undefined: rgb(151, 151, 151);
        --process-failed: hsl(4, 30%, 60%);
        --process-notify-bg: hsl(0 0% 21%);

        /*footer*/
        --footer-color: #cacaca;
        --footer-bg-color: var(--header-bg-color);
        --footer-atag-color: rgb(114, 161, 223);
        --footer-input-border-color: #6c6c6c;
        --footer-filepicker-button-color: black;
        --footer-filepicker-focus-color: #c1c1c1;
        --footnote-border-color: rgba(114, 225, 231, 0.15);

        /* undo delete cell*/
        --undo-delete-box-shadow-color: rgb(0 0 0 / 6%);

        /*codemirror hints*/
        --cm-color-editor-tooltip-border: rgba(0, 0, 0, 0.2);
        --cm-color-editor-li-aria-selected-bg: #3271e7;
        --cm-color-editor-li-aria-selected: white;
        --cm-color-editor-li-notexported: rgba(255, 255, 255, 0.5);
        --code-background: hsl(222deg 16% 19%);
        --cm-color-code-differs-gutters: rgb(235 213 28 / 11%);
        --cm-color-line-numbers: #8d86875e;
        --cm-selection-background: hsl(215deg 64% 59% / 48%);
        --cm-selection-background-blurred: hsl(215deg 0% 59% / 48%);
        --cm-highlighted: #cbceb629;

        /* code highlighting */
        --cm-color-editor-text: oklch(90% 3% 0deg);
        --cm-color-comment: oklch(80% 30% 0deg);
        --cm-color-keyword: oklch(70% 40% 30deg);
        --cm-color-symbol: oklch(80% 30% 60deg);
        --cm-color-macro: oklch(80% 30% 150deg);
        --cm-color-command: oklch(80% 10% 120deg);
        --cm-color-string: oklch(80% 10% 180deg);
        --cm-color-variable: oklch(80% 10% 270deg);
        --cm-color-literal: oklch(80% 30% 330deg);
        --cm-filter-type: brightness(80%) saturate(80%);
        --cm-color-builtin: #5e7ad3;
        --cm-color-function: #f99b15;
        --cm-color-link: #815ba4;
        --cm-color-bracket: #b8ab87;
        --cm-color-matchingBracket: white;
        --cm-color-matchingBracket-bg: #c58c237a;
        --cm-color-placeholder-text: rgb(255 255 255 / 20%);
        --cm-color-clickable-underline: #5d5f70;

        /* Mixed parsers */
        --cm-color-html: #00ab85;
        --cm-color-html-accent: #00e7b4;
        --cm-color-css: #ebd073;
        --cm-color-css-accent: #fffed2;
        --cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa: #ffffea;
        --cm-color-md: #a2c9d5;
        --cm-color-md-accent: #00a9d1;

        /*autocomplete menu*/
        --autocomplete-menu-bg-color: var(--input-context-menu-bg-color);

        /* Landing colors */
        --index-text-color: rgb(199, 199, 199);
        --index-light-text-color: rgb(199, 199, 199);
        --index-clickable-text-color: rgb(235, 235, 235);
        --docs-binding-bg: #323431;
        --index-card-bg: #313131;
        --welcome-mywork-bg: var(--header-bg-color);
        --welcome-newnotebook-bg: rgb(68 72 102);
        --welcome-recentnotebook-bg: #3b3b3b;
        --welcome-recentnotebook-border: #6e6e6e;
        --welcome-open-bg: hsl(233deg 20% 33%);
        --welcome-card-author-backdrop: #0000006b;
    }

    @media (prefers-contrast: more) {
        :root {
            --cm-color-line-numbers: #b3b3b3;
        }
    }
}
