simple xkcd by confusedbread

/* ==UserStyle==
@name           simple xkcd
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    simple and customizable xkcd theme
@author         bread
@advanced color textColor "Text color" #cdd6f4
@advanced color overlayColor "Overlay color" #181825
@advanced color bgColor "Background color" #1e1e2e
@advanced color linkColor "Link color" #89b4fa
@advanced text borderOpactiy "Border opactiy" 10%
@advanced text hoverOpactiy "Hover opactiy" 50%
==/UserStyle== */

@-moz-document url-prefix("https://xkcd.com/") {
    :root {
        --textColor: /*[[textColor]]*/;
        --overlayColor: /*[[overlayColor]]*/;
        --bgColor: /*[[bgColor]]*/;
        --linkColor: /*[[linkColor]]*/;
        --borderColor: color-mix(in srgb, var(--textColor) /*[[borderOpactiy]]*/, transparent);
        --hoverColor: color-mix(in srgb, var(--overlayColor) /*[[hoverOpactiy]]*/, transparent);
    }

    body {
        color: var(--textColor);
        background-color: var(--bgColor);
    }

    #bottom,
    #topContainer,
    .comicNav:nth-of-type(1),
    ul + br {
        display: none;
    }

    #middleContainer {
        border: none;
        background: none;
    }

    ul.comicNav li a {
        color: var(--textColor);
        background-color: var(--overlayColor);
        border-color: var(--borderColor);
        box-shadow: none;
    }

    ul.comicNav li a:hover,
    ul.comicNav li a:focus {
        color: var(--textColor);
        background-color: var(--hoverColor);
    }

    div > a {
        color: var(--linkColor);
    }

    #comic img {
        filter: invert(1) hue-rotate(180deg);
        mix-blend-mode: screen;
    }
}