dev.to dark mode [fix] by chiboreache

/* ==UserStyle==
@name           dev.to dark mode
@namespace      USO Archive
@author         thebagelman123
@description    `A light blue twitterish inspired dark mode for dev.to`
@version        20190915.20.42
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document domain(dev.to) {
    html {
        --green: rgba(152, 190, 101, 0.8);
        --magento: rgba(198, 120, 221, 0.8);
        --blue: rgba(97, 175, 239, 1);
        --blue-border: rgba(51, 102, 153, 1);
        --bg-grey: rgba(40, 44, 52, 1);
        --bg-grey2: rgba(50, 56, 66, 1);
        --bg-grey2-hover: rgb(62, 70, 82);
        --bg-side: rgba(33, 37, 43, 1);
        --red: rgba(224, 108, 117, 1);
        --title-yellow: rgba(209, 154, 102, 1);
        --title-yellow2: rgba(209, 154, 102, 0.7);
        --highlight-yellow: rgba(229, 192, 123, 1);
        --text-grey: rgba(187, 187, 187, 0.7);
        --text-grey2: rgba(187, 187, 187, 1);
        --visited-yellow: rgb(132, 78, 28);
        --button-text: rgba(144, 139, 129, 1);
        --bg-electromagnetic: #2f3640;
        --bg-card: #303952;
        --fg-card: #F5F5F5;
        --featured-user-name: #999999;
        --reading-time: #A6A6A6;
        --save: #00a8ff;
        --save-hover: #0097e6;
        --hashtags: #3498db;
        --navigation-text: #ecf0f1;
        --hashtag-hover:#465377;
        --listing-cat: rgba(237, 237, 237, 1);
        --top-bar-search: #3c4867;
        --card-border: #525e6f;
        --card-shadow: #3d3d3d;
    }
    body .crayons-article__main{
        /*background-color: var(--bg-electromagnetic);*/
        background-color: #282f43;
        color: #9d9da9
    }
    .crayons-article__main {
        width:100vh   
    }

    /*featured article*/
    .home .articles-list .single-article.big-article .content-wrapper {
        background: var(--bg-card);
        color: var(--fg-card);
        border-bottom: none;
    }
    .home .articles-list .featured-user-name a {
        color: var(--featured-user-name);
    }

    .home .articles-list .featured-tags .tag {
        color: var(--fg-card);
    }
    .home .articles-list .article-reading-time {
        color: var(--reading-time);
    }
    .home .articles-list .article-engagement-count a {
        color: var(--reading-time);
    }

    /*single articles*/
    .home .articles-list .single-article {
        background: var(--bg-card);
        color: var(--fg-card);
        border: 1px solid #525e6f;
        box-shadow: var(--card-shadow, 1px 1px 0px #3d3d3d);
    }
    .home .articles-list a {
        color: var(--fg-card);
    }
    .home .articles-list .single-article h4 a {
        color: var(--featured-user-name);
    }
    /*SAVE button*/
    .home .articles-list .article-engagement-count.bookmark-engage {
        background-color: var(--save);
    }
    .home .articles-list .article-engagement-count.bookmark-engage:hover {
        background-color: var(--save-hover);
    }


    /*sidebar left*/
    .home .side-bar .widget {
        /*background-color: var(--bg-card);
        color: var(--fg-card);*/
    }

    /* navigation sidebar */
    .home .side-bar .widget {
        background: var(--bg-card);
    }

    /* navigation subheader */
    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-subheader {
        background: var(--bg-card);
    }

    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-subheader a {
        color: var(--fg-card);
    }

    /* navigation title */
    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-header.sidebar-nav-header-middle {
        color: var(--navigation-text);
    }

    /* hashtag text */
    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-element a.sidebar-nav-link {
        color: var(--hashtags);
    }

    /* hashtag hover */
    .home .side-bar .sidebar-nav .sidebar-nav-block .sidebar-nav-element a.sidebar-nav-link:hover {
        background: var(--hashtag-hover);
    }

    /* widget color */
    .home .side-bar .widget {
        color: var(--fg-card);
    }

    /* newest listings */
    .home .side-bar .widget .widget-body .widget-listing-link:first-child {
        border-top: 1px solid #525e6f;
    }
    .home .side-bar .widget .widget-body .widget-listing-link {
        border-bottom: 1px solid #525e6f;
        color: var(--fg-card);
    }
    .home .side-bar .widget .widget-body .widget-listing-link:hover {
        background: var(--hashtag-hover);
    }
    .home .side-bar .widget .widget-body .widget-listing-link .widget-listing-link-category {
        color: var(--listing-cat);
    }

    /* sign in widget */
    .home .side-bar .widget .cta-button {
        color: #353b48;
        background: #a29bfe;
        border-color: var(--blue);
    }
    .home .side-bar .widget.signin-cta-widget {
        border: 1px solid var(--blue);
        box-shadow: 5px 6px 0px var(--blue);
    }
    .home .side-bar .widget.signin-cta-widget header {
        background: var(--blue);
    }
    .home .side-bar .widget .cta-button.login-cta-button {
        background: #a29bfe;
    }

    /* listings header */
    .home .side-bar .widget header.widget-header-listings {
        background: var(--hashtag-hover);
    }
    .home .side-bar .widget header a {
        color: var(--fg-card)
    }

    /* discussions */
    .home .side-bar .widget-link-list__item a {
        color: var(--fg-card);
    }
    .home .side-bar .widget-link-list__item .discuss-list-comment-count {
        color: var(--fg-card);
    }

    /* top bar */
    .top-bar {
        background: var(--hashtag-hover);
    }

    /* top bar search */
    .nav-search-form__input {
        background: var(--top-bar-search);
        color: var(--fg-card);
    }
    .nav-search-form__input::placeholder {
        color: var(--fg-card);
    }

    /* side footer */
    .home .side-bar .side-footer a {
        color: var(--fg-card);
    }


    /* widgets */
    .home .side-bar .widget {
        border: 1px solid #525e6f;
        box-shadow: var(--card-shadow, 1px 1px 0px #3d3d3d);
    }

    /* navigation */
    .home .articles-list .on-page-nav-controls .nav-chronofiter-link.selected {
        background: #a29bfe;
        color: #2d3436;
        border: 1px solid #7268fd;
        box-shadow: 3px 4px 0px #7268fd;
    }

    .home .articles-list .on-page-nav-controls .nav-chronofiter-link:hover {
        opacity: 1;
        background: #7268fd;
        color: #cad1d3;
        border: 1px solid #a29bfe;
        box-shadow: 3px 4px 0px #a29bfe;
    }

    /* top bar icons */
    .top-bar nav .nav-link {
        fill: #cad1d3;
    }


    /* sponsored section */
    .home .side-bar .widget .widget-body .sidebar-sponsor .sponsor-tagline {
        color: #cccccc;
    }

    .home .side-bar .widget .widget-body .sidebar-sponsor .sponsor-tagline .sponsor-learn-more {
        color: var(--blue);
    }



    /*
    ARTICLE CSS
    */
    .home {
        background-color: #282f43;
    }
    .container {
        background: var(--bg-card);
        border: 1px solid #525e6f;
        box-shadow: var(--card-shadow, 1px 1px 0px #3d3d3d);
    }

    .container .body {
        background: var(--bg-card);
        color: var(--fg-card);
    }

    .container .body blockquote {
        border-left: calc(0.2vw + 2px) solid var(--fg-card);
    }

    .comments-container form {
        background: #282f43;
        border: 1px solid #525e6f;
    }
    .comments-container form textarea {
        background: var(--bg-card);
        border: 1px solid #525e6f;
    }

    .container .article-actions {
        background: var(--bg-card);
    }
    .container .article-actions button .reaction-number, .container .article-actions .article-actions-comments-count {
        color: #F5F5F5;
    }
    .stories-show {
        background:#282f43;
    }

    /* comments */
    .single-comment-node .inner-comment {
        background: var(--hashtag-hover);
        border: 2px solid #525e6f;
    }

    .single-comment-node .details a {
        color: var(--featured-user-name);
    }

    body {
        color: #F5F5F5;
    }


    /*
    HASHTAG SECTION
    */

    .user-profile-header {
        background: var(--hashtag-hover);
    }
    .tag-header {
        border: 2px solid var(--blue);
        box-shadow: 5px 6px 0px var(--blue);
    }

    .feed-cta {
        border: 1px solid var(--blue) !important;
        box-shadow: 5px 6px 0px rgba(23, 138, 232, 1) !important;
        /*color: ;*/
    }

    .feed-cta .cta-container {
        padding: calc(1vw + 7px) 9px;
        margin-bottom: 0px;
        background: var(--bg-card);
    }
    .top-bar .logo {
        background: #353b48;   
    }
}