A pretty dark mode style that allows you to use pub.dev in the dark.
pub.dev Dark Mode by AlexV525
Details
AuthorAlexV525
LicenseMIT
Categorypub.dev
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This also applies to pub-web.flutter-io.cn.
See the issue to track official dark mode support: https://github.com/dart-lang/pub-dev/issues/4416.
Source code
/* ==UserStyle==
@name pub.dev Dark Mode
@version 20241008.10.38
@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;
}
.package-tag {
background: #2e2e3e;
color: #dcdcdc;
}
.-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-data-table,
.mdc-data-table__header-cell,
.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;
}
.mdc-data-table__header-cell,
.mdc-data-table__cell,
: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-select__dropdown-icon {
fill: rgba(200, 200, 200, 0.54);
}
.mdc-select:not(.mdc-select--disabled) .mdc-floating-label,
.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
color: #dcdcdc;
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label,
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__selected-text {
color: #b37effde;
}
.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;
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #fff;
}
}