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

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

$tooltip-underline-size: 3px;

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

$dark:                         rgba( 52,  73,  94, 1);
$nord:                         rgba( 46,  52,  64, 1);
$black:                        rgba(  0,   0,   0, 1);
$accent1:                      rgba( 93, 115, 126, 1);
$accent2:                      rgba( 92, 172, 126, 1);
$accent3:                      rgba(197, 193, 155, 1);
$light:                        #eee;
$grey1:                        #f8f8f8;
$grey2:                        #dbe1e8;
$grey3:                        #b2becd;
$grey4:                        #6c7983;
$grey5:                        #454e56;
$grey6:                        #12181b;

// Accent 1
//   Black
$gradient-accent1-black-left:  linear-gradient(to left,  $black,  $accent1,  $accent1);
$gradient-accent1-black-right: linear-gradient(to right, $black,  $accent1,  $accent1);
//   Dark
$gradient-accent1-dark-left:   linear-gradient(to left,  $dark,   $accent1);
$gradient-accent1-dark-right:  linear-gradient(to right, $dark,   $accent1);
//   Light
$gradient-accent1-light-left:  linear-gradient(to left,  $light,  $accent1);
$gradient-accent1-light-right: linear-gradient(to right, $light,  $accent1);
// Accent 2
//   Black
$gradient-accent2-black-left:  linear-gradient(to left,  $black,  $accent2,  $accent2);
$gradient-accent2-black-right: linear-gradient(to right, $black,  $accent2,  $accent2);
//   Dark
$gradient-accent2-dark-left:   linear-gradient(to left,  $dark,   $accent2);
$gradient-accent2-dark-right:  linear-gradient(to right, $dark,   $accent2);
//   Light
$gradient-accent2-light-left:  linear-gradient(to left,  $light,  $accent2);
$gradient-accent2-light-right: linear-gradient(to right, $light,  $accent2);
// Accent 3
//   Black
$gradient-accent3-black-left:  linear-gradient(to left,  $black,  $accent3,  $accent3);
$gradient-accent3-black-right: linear-gradient(to right, $black,  $accent3,  $accent3);
//   Dark
$gradient-accent3-dark-left:   linear-gradient(to left,  $dark,   $accent3);
$gradient-accent3-dark-right:  linear-gradient(to right, $dark,   $accent3);
//   Light
$gradient-accent3-light-left:  linear-gradient(to left,  $light,  $accent3);
$gradient-accent3-light-right: linear-gradient(to right, $light,  $accent3);

.light {
    $bg-nav: $gradient-accent3-light-right;
    $border-color: $accent1;

    color: $dark;
    background: $light;

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

    pre {
        box-shadow: 3px 5px $dark;
        border-color: $light;
    }

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

    .navbar, header {
        background: $bg-nav;
    }

    .navbar svg {
        fill: $dark;
    }

    .status {
        background: $gradient-accent3-light-left;
        color: $dark;
    }

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

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

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

    .dropdown {
        background: $accent3;
        color: $dark;
    }

    #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;
    }
}

.dark, .black {
    $bg-nav: $gradient-accent2-dark-right;
    $border-color: $dark;

    color: $light;
    background: $dark;

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

    pre {
        box-shadow: 3px 3px $dark;
        border: none;
    }

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

    .navbar, header {
        background: $bg-nav;
    }

    .navbar svg {
        fill: $light;
    }

    .status {
        background: $gradient-accent2-dark-left;
        color: $light;
    }

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

        .tooltiptext {
            background-color: $accent1;
            color: $light;

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

    .dropdown {
        background: $dark;
        color: $light;
    }

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

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

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

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

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

.black {
    $bg-nav: $gradient-accent1-black-right;

    background: $black;

    pre {
        box-shadow: 3px 3px $light;
        border: none;
    }

    pre.src, pre.example {
        &::before {
            background-color: $black;
            color: $light;
        }
    }

    .navbar, header {
        background: $bg-nav;
    }

    .status {
        background: $gradient-accent1-black-left;
    }

    .dropdown {
        background: $dark;
        color: $light;
    }

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

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

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

    th {
        background: lighten($black, 15%);
    }
}

.nord {
    $dark:                    #2e3440;
    $black:                   #000000;
    $accent1:                 #8fbcbb;
    $accent2:                 #a3be8c;
    $accent3:                 #ebcb8b;
    $light:                   #eceff4;
    $grey1:                   #e5e9f0;
    $grey2:                   #d8dee9;
    $grey3:                   #4c566a;
    $grey4:                   #434c5e;
    $grey5:                   #3b4252;
    $grey6:                   #12181b;
    $gradient-dark-to-light:  linear-gradient(to right, $grey3, $grey5);
    // Accent 1
    //   Black

    $bg-nav: $gradient-dark-to-light;
    $border-color: $dark;

    color: $light;
    background: $dark;

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

    pre {
        box-shadow: 3px 3px $dark;
        border: none;
    }

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

    .navbar, header {
        background: $bg-nav;
    }

    .navbar svg {
        fill: $light;
    }

    .status {
        background: $gradient-dark-to-light;
        color: $light;
    }

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

        .tooltiptext {
            background-color: $accent1;
            color: $light;

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

    .dropdown {
        background: $grey3;
        color: $light;
    }

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

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

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

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

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

}

#lightBtn {
    background: $light;
}

#darkBtn {
    background: $dark;
}

#nordBtn {
    background: $nord;
}

#blackBtn {
    background: $black;
}

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