nord-for-org/web/style/themes.scss

// Variables //////////////////////////////////////////////////////////////////

$tooltip-underline-size: 3px;

// Themes /////////////////////////////////////////////////////////////////////

$nord0:   #2e3440;
$nord1:   #3b4252;
$nord2:   #434c5e;
$nord3:   #4c566a;
$nord4:   #d8dee9;
$nord5:   #e5e9f0;
$nord6:   #eceff4;
$nord7:   #8fbcbb;
$nord8:   #88c0d0;
$nord9:   #81a1c1;
$nord10:  #5e81ac;
$nord11:  #bf616a;
$nord12:  #d08770;
$nord13:  #ebcb8b;
$nord14:  #a3be8c;
$nord15:  #b48ead;
$dark:    $nord1;
$light:   $nord5;
$accent1: $nord7;
$accent2: $nord9;
$accent3: $nord8;

.light {
    $border-color: $accent1;

    color: $dark;
    background: $light;

    $bg-nav: linear-gradient(to right, $nord6, $nord4);
    .navbar, header, .dropdown {
        background: $bg-nav;
        color: $dark;
    }

    .navbar svg {
        fill: $dark;
    }

    transition: background 500ms ease-in-out, color 1s ease-in-out;

    pre {
        border-color: $light;
    }

    pre.src, pre.example {
        &::before {
            background-color: $nord6;
            color: $dark;
        }
    }

    pre.src, pre.example, .org-src-container {
        background: $light;
        color: $dark;
    }

    .status {
        background: $bg-nav;
        color: $dark;
    }

    .tooltip {
        border-bottom: $tooltip-underline-size dotted $accent3;

        .tooltiptext {
            background-color: $accent3;
            color: $dark;

            &::after {
                border-color: $accent3 transparent transparent transparent;
            }
        }
    }

    #content {
        a {
            box-shadow: inset 0 -3px 0 $accent3;
            transition: box-shadow 300ms ease-in-out;

            &:hover {
                box-shadow: inset 0 -23px 0 $accent3;
                transition: box-shadow 300ms ease-in-out;
            }
        }
    }

    table, th, td {
        border: 1px solid $dark;
    }

    th {
        background: darken($light, 5%);
    }

    .gentree {
        filter: invert(0%);
        transition: filter 1s ease-in-out;
    }
}

.black, .dark {
    $border-color: $nord1;

    color: $nord6;
    background: $nord0;

    $bg-nav: linear-gradient(to right, $nord3, $nord1);
    .navbar, header, .dropdown {
        background: $bg-nav;
        color: $light;
    }

    .navbar svg {
        fill: $light;
    }

    transition: background 500ms ease-in-out, color 1s ease-in-out;

    pre {
        border: none;
    }

    pre.src, pre.example {
        &::before {
            background-color: $nord0;
            color: $nord6;
        }
    }

    .status {
        background: $bg-nav;
        color: $nord6;
    }

    .tooltip {
        border-bottom: $tooltip-underline-size dotted $nord7;

        .tooltiptext {
            background-color: $nord7;
            color: $nord6;

            &::after {
                border-color: $nord7 transparent transparent transparent;
            }
        }
    }

    #content {
        a {
            box-shadow: inset 0 -3px 0 $nord7;
            transition: box-shadow 300ms ease-in-out;

            &:hover {
                box-shadow: inset 0 -23px 0 $nord7;
                transition: box-shadow 300ms ease-in-out;
            }
        }
    }

    table, th, td {
        border: 1px solid $nord7;
    }

    th {
        background: darken($nord0, 2.5%);
    }

    .gentree {
        filter: invert(100%);
        transition: filter 1s ease-in-out;
    }

    pre.src, pre.example, .org-src-container {
        background: $nord1;
        color: $nord5;
    }
}

.black {
    background: black;
    color: $nord4;

    $bg-nav: linear-gradient(to right, $nord2, $nord0);
    .navbar, header, .dropdown {
        background: $bg-nav;
    }

    pre.src, pre.example, .org-src-container {
        background: $nord0;
        color: $nord4;
    }
}

#lightBtn {
    background: $light;
}

#darkBtn {
    background: $nord0;
}

#blackBtn {
    background: black;
}

pre {
    box-shadow: none;
}

.closeButton {
    background-color: $nord11;
}

.minButton {
    background-color: $nord12;
}

.maxButton {
    background-color: $nord14;
}

.floatButton {
    background-color: $nord15;
}