pub.dev Dark Mode by AlexV525

/* ==UserStyle==
@name         pub.dev Dark Mode
@version      20240414.04.40
@namespace    https://userstyles.world/user/https://github.com/AlexV525
@description  A pretty dark mode style that allows you to use pub.dev in the dark.
@author       https://github.com/AlexV525
@license      MIT
==/UserStyle== */

@-moz-document domain("pub.dev"),
domain("pub-web.flutter-io.cn") {
    body {
        background-color: #10161e;
        color: #dcdcdc;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        overflow-wrap: break-word;
    }
    a {
        color: rgb(81, 167, 254);
    }
    .mdc-dialog .mdc-dialog__surface {
        background: #1C2834;
    }
    .mdc-dialog .mdc-dialog__title,
    .mdc-dialog .mdc-dialog__content {
        color: #dcdcdc;
    }
    /* Main page */
    main.landing-main {
        background-image: none;
    }
    .home-block.home-block-ff,
    .home-block.home-block-pow {
        background: #10161e;
    }
    .home-block .mini-list-item {
        background: #1C2834;
    }
    .home-block .mini-list-item:hover {
        background: #273848;
    }
    @media (min-width: 641px) {
        .home-block .mini-list-item-body:before {
            background: linear-gradient(transparent 90%, #1C2834);
        }
        .home-block .mini-list-item:hover .mini-list-item-body:before {
            background: linear-gradient(transparent 90%, #273848);
        }
    }
    /* Search page */
    .search-form-container .search-form-linked-checkbox:hover {
        background: #273848;
    }
    .search-form-container .search-form-linked-checkbox a {
        color: #dcdcdc;
    }
    .mdc-checkbox {
        filter: invert(100%);
    }
    .sort-control .sort-control-popup .sort-control-option {
        background: #1C2834;
    }
    .sort-control .sort-control-popup .sort-control-option:hover,
    .sort-control .sort-control-popup .sort-control-option.selected {
        background: #27425e;
    }
    .listing-info .count {
        background: #1C2834;
    }
    .thumbnail-container {
        background: #10161e;
    }
    .packages .packages-item:hover,
    .publishers .publishers-item:hover {
        background: #1C2834;
    }
    .packages .packages-api {
        color: #dcdcdc;
    }
    .pagination > li {
        background-color: #10161e;
    }

    /* Detail page */
    a.-x-ago {
        color: #dcdcdc;
    }
    h1.title:hover img[alt~="icon"] {
        opacity: 1;
    }
    h1.title img[alt~="icon"] {
        opacity: .5;
    }
    img[alt~="icon"],
    img[alt~="Icon"],
    img[alt="verified publisher"],
    img.inline-icon-img,
    img.pkg-page-title-copy-icon,
    img.version-table-icon {
        filter: invert(100%);
    }
    img.pkg-page-title-copy-icon {
        opacity: .5 !important;
    }
    img.pkg-page-title-copy-icon:hover {
        opacity: .8 !important;
    }
    footer.site-footer > a > img.inline-icon,
    button#-pub-like-icon-button > img {
        filter: none !important;
    }

    .pkg-page-title-copy .pkg-page-title-copy-feedback {
        background: #161f2b;
    }
    .package-badge {
        background: none;
        border-color: #13B9FD;
        color: #13B9FD;
    }
    .-pub-tag-badge {
        background: #1c1c26;
    }
    .detail-tabs-header {
        background: #161f2b;
    }
    .detail-tabs-header > .tab-button,
    .detail-tabs-header > .tab-link > a {
        color: #dcdcdc;
    }
    .detail-tabs-header > .tab-button.-active {
        color: #13B9FD;
        border-bottom-color: #13B9FD;
    }
    .detail-tabs-header > .tab-button.-private,
    .detail-tabs-header > .tab-link.-private > a {
        color: #c64444;
        border-bottom-color: #c64444;
    }
    .detail-info-box > .title:not(:first-child) {
        border-top: 1px solid #4d4d4d;
    }
    .packages-scores .packages-score-value.-has-value,
    .score-key-figures .score-key-figure-title {
        color: #13B9FD;
    }
    .packages-scores .packages-score-label,
    .score-key-figures .score-key-figure-label {
        color: #7d848c;
    }
    .markdown-body h1,
    .markdown-body h2 {
        border-bottom: 1px solid #4d4d4d;
    }
    .markdown-body code,
    code {
        background: #2e2e3e;
    }
    .markdown-body img {
        background-color: #10161e;
    }
    .markdown-body table tr {
        background-color: transparent !important;
    }
    summary:hover {
        background-color: rgb(23, 32, 43) !important;
    }
    pre {
        border: 1px solid #444 !important;
        color: white !important;
        background-color: rgb(23, 32, 43) !important;
    }
    .hljs {
        background: #2e2e3e;
        color: #dcdcdc;
    }
    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-subst {
        color: white;
        font-weight: bold;
    }
    .hljs-string,
    .hljs-doctag {
        color: rgb(255, 100, 100);
    }
    .hljs-built_in,
    .hljs-builtin-name {
        color: #0086b3;
    }
    .hljs-tag,
    .hljs-name,
    .hljs-attribute {
        color: #2424bb;
    }
    .hljs-number,
    .hljs-literal,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag .hljs-attr {
        color: #008080;
    }
    /* Admin page */
    .mdc-menu-surface,
    .-wide-header-detail-page .detail-header,
    .-wide-header-detail-page .detail-tabs-wide-header {
        background: #1C2834;
    }
    .mdc-button--unelevated:not(:disabled) {
        background: #27425e;
    }
    :not(.mdc-list-item--disabled).mdc-list-item,
    .mdc-button--unelevated:not(:disabled) {
        color: #dcdcdc;
    }
    .mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {
        background: #1C2834;
    }
    .mdc-select:not(.mdc-select--disabled) .mdc-floating-label,
    .mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
        color: #dcdcdc;
    }
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
        border-color: #dcdcdc;
    }
    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
        color: #dcdcdc;
    }
}