Skip to content

Heybox dark mode by Gholts

Screenshot of Heybox dark mode

Details

AuthorGholts

LicenseMIT

Categoryxiaoheihe

Created

Updated

Size21 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Heybox Dark Theme, 小黑盒社群深色模式

Notes

  1. 出現 Bug 請在 GitHub issues 中反饋。
  2. 專案 TODO 在 GitHub 專案 README 中。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Heybox dark mode
@version      20250127.02.41
@namespace    www.xiaoheihe.cn
@description  Heybox dark mode
@author       Gholts
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://www.xiaoheihe.cn/app/") {
/* www.xiaoheihe.cn/app/ */
/* annoy elements */
.hb-view-download,
.hb-view__platforms,
.hb-view__site-info,
.top-line--left,
.top-line--right,
.hb-cpt__recent-hot-topic .hot-topic__more,
.link-reply__emoji-box.blur:after {
    display: none;
}

.hb-cpt__route-to-app-wrapper .hb-cpt__route-to-app .route-to-app__title-line,
.hb-cpt__route-to-app-wrapper .hb-cpt__route-to-app .route-to-app__downline-desc,
.search__suggestion .suggestion__item .suggestion__item-content .suggestion__item-content--name {
    color: #fff !important;
}
.search__suggestion .suggestion__item .suggestion__item-content .suggestion__item-content--name strong {
    color: #7e5aff !important;
}

/* scroll-list__top-btn */
.hb-cpt__scroll-list .scroll-list__button-group .scroll-list__top-btn {
    filter: invert(60%) contrast(340%);
    box-shadow: 0px 8px 11px 0px #0000001a;
}

/* HEADER */
.hb-view-header {
    background: #333333;
}

.hb-header-logo,
.user-box__username,
.heybox-common_email_line_24x24 {
    filter: invert(100%);
}
.view-header__right .view-header__user-box .user-box__username {
    margin-left: 6px;
}

.hb-view-search {
    background: #454545;
}
.hb-view-search:after {
    border: 1px solid #575757;
}
.hb-view-search .search__input-item {
    color: #fff;
}
.hb-avatar__image {
    border: 2px solid #898989;
}

/* MAIN */
.hb-layout__main.hb-website__container.hb-page__app {
    background: #262629
}
.hb-bbs-home .hb-bbs-home__splitline:after {
    background-color: #262629;
    width: calc(100% + 32px);
}

/* MAIN-left */
.hb-view-catalog {
    background: #444;
    border-radius: 8px;
}
.hb-view-catalog .hb-view-catalog__button.active {
    background: #363636;
}

/* btn actived icon text */
.hb-view-catalog .hb-view-catalog__button.active .btn-name,
.hb-view-catalog .hb-view-catalog__button.active .hb-icon {
    color: #ebe6e1
}
/* btn Inactive icon text */
.hb-view-catalog .hb-view-catalog__button .hb-icon,
.hb-view-catalog .hb-view-catalog__button .btn-name {
    color: #ebe6e1
}

.hb-view-catalog .hb-view-catalog__button:hover {
    background: #333
}
.hb-website__container.hb-page__app .hb-websit__left-section .hb-website__post-btn {
    filter: invert(80%);
}

/* MAIN-mid */
.hb-layout__fake-frame .hb-layout__fake-frame-left--top {
    background: #262629;
}
.hb-bbs-home,
.hb-layout__fake-frame-container {
    background: #444;
    border-radius: 8px;
}
.hb-layout__fake-frame {
    background: #262629;
}
.hb-cpt__pagination .hb-cpt__pagination--right {
    background: linear-gradient(270deg, #444 0%, #555 50%, #4440);
}
.hb-cpt__pagination .hb-cpt__pagination--left {
    background: linear-gradient(90deg, #444 0%, #555 50%, #4440);
}
.hb-cpt__pagination .hb-cpt__pagination--right .hb-icon {
    color: #fff;
}
.hb-bbs-home .bbs-home__topic-list-wrapper .bbs-home__topic-list .bbs-home__topic-item .bbs-home__topic-name {
    color: #fff;
}


.hb-cpt__bbs-content .bbs-content__title,
.hb-cpt__bbs-content .bbs-content__content {
    color: #fff;
}
.hb-cpt__content-tag.big.content-list__tag-item {
    background: #777 !important;
}
.hb-cpt__bbs-list-content .bbs-content__bottom-line .content-list__tag-item .content-tag-text {
    color: #fff !important;
}
.hb-cpt__bbs-list-content .bbs-list-content__header .header__user .list-content__username {
    color: #fff;
}
.hb-layout__fake-frame .hb-layout__fake-frame-left--bottom {
    display: none;
}

/* MAIN-right */
.hb-cpt__recent-hot-topic {
    background-color: #444;
}
.hb-cpt__recent-hot-topic .hot-topic__topic-list .top-list__item + .top-list__item:before {
    background-color: #262629;
}
.hb-cpt__topic-entrance .hot-topic-item__cotnent .hot-topic-item__name {
    color: #fff;
}
.hb-cpt__topic-entrance .hot-topic__look {
    filter: invert(60%) contrast(500%);
}
.hb-cpt__recent-hot-topic .hot-topic__header .hot-topic__name {
    color: #fff;
}

/* pull-list */
.view-header__right .view-header__user-box .user-box__pull-list {
    background-color: #444;
}
.view-header__right .view-header__user-box .user-box__pull-list .user-box__btn {
    color: #fff;
}
.view-header__right .view-header__user-box .user-box__pull-list .user-box__btn:hover {
    background: #333;
}

.search__pull-list {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #868686;
}
.search-pull__default-page .search__section .search__section-header .search__section-haeder--right:hover {
    background: #222;
}
.heybox-hot-text {
    background: #3c3c4066;
    border-radius: 3px;
}
.search-pull__default-page .search__hot-rank .hot-rank__list .hot-rank__list-item:hover {
    background: #555;
}

.search-pull__default-page .search__section .search__section-header .search__section-title,
.search-pull__default-page .search__section.discover .search__section-content .search__content-item--name,
.search-pull__default-page .search__hot-rank .hot-rank__tab .hot-rank__tab-item,
.search-pull__default-page .search__hot-rank .hot-rank__list .hot-rank__list-item .hot-rank__list-item-game-name,
.search-pull__default-page .search__hot-rank .hot-rank__list .hot-rank__list-item .hot-rank__list-item-desc {
    color: #fff;
}

/* pop-up */
.hb-cpt__route-to-app-wrapper .hb-cpt__route-to-app {
    background-color: #333;
}
.hb-cpt__route-to-app-wrapper .hb-cpt__route-to-app .route-to-app__qrcode .qrcode-icon,
.hb-cpt__route-to-app-wrapper .hb-cpt__route-to-app .route-to-app__title-line svg {
    filter: invert(100%);
}



.search__suggestion .suggestion__item:hover {
    background: #333;
}
}

@-moz-document url-prefix("https://www.xiaoheihe.cn/app/bbs/link/"), url-prefix("https://www.xiaoheihe.cn/app/game/comment/"), url-prefix("https://www.xiaoheihe.cn/app/user/profile"), url-prefix("https://www.xiaoheihe.cn/app/topic/") {
/* www.xiaoheihe.cn/app/bbs/link/ */
/* words(contents) */
.section-title__content,
.link-section-user .link-user__user-wrapper .link-user__info .user-info__line-1 .link-user__username,
.com-text,
.hb-cpt__content-tag.big .content-tag-text,
.hb-cpt__link-game-card .game-info .line-2 .follow-box .follow-num.ellipsis,
.hb-cpt__link-game-card .game-info .line-1,
.hb-cpt__price-tag .price-content-box .current-price,
.hb-cpt__slide-tab .slide-tab__tab-item .slide-tab__tab-label,
.hb-cpt__slide-tab .slide-tab__tab-item .slide-tab__tab-cnt,
.link-comment__comment-item-header .comment-item-header__info-box .info-box__line-1 .info-box__username,
.link-comment__comment-item .comment-item__content-container .comment-item__content,
.hb-bbs-link .page-header__user-info .page-header__user-wrapper .page-header__username,
.link-reply .link-reply__main-box .link-reply__operation-box .link-reply__operation-item.active .link-reply__operation-desc,
.link-reply .link-reply__main-box .link-reply__operation-box .link-reply__operation-item.active .link-reply__operation-desc,
.link-reply .link-reply__main-box .link-reply__operation-box .link-reply__operation-item .link-reply__operation-desc,
.bbs-link__related-recommend .related-recommend__container .related-recommend__container--header,
.bbs-link__related-recommend .related-recommend__container .related-recommend__link-item--content .related-recommend__link-item--left .link-item__title,
.hb-bbs-image-text .image-text__container .image-text__content,
.com-main-title,
.hb-game-comment .game-comment__content .game-comment__content-score .comment-content-score--line1 .comment-content--title,
.hb-game-comment .game-comment__content .game-comment__content-tools .item .num,
.hb-game-comment .game-comment__content .game-comment__content-tools .item .text {
    color: #fff !important;
}
.bbs-link__related-recommend .related-recommend__container .related-recommend__link-item--content .related-recommend__link-item--left .link-item__desc {
    color: #ccc !important;
}


.hb-cpt-page-header .page-header__container .page-header__container-bg {
    background-color: #666;
    border-radius: 8px 8px 0 0;
}
.hb-cpt-page-header .page-header__container,
.bbs-link__related-recommend .related-recommend__container .related-recommend__link-item--content + .related-recommend__link-item--content:before {
    background: #262629;
}
.hb-cpt-page-header .page-header__container .page-header__back-btn {
    background-color: #333;
}
.hb-cpt-page-header .page-header__container .page-header__back-btn:hover {
    background-color: #222;
}
.hb-cpt-page-header .page-header__container .page-header__back-btn .hb-icon,
.hb-cpt-page-header .page-header__container .page-header__back-btn .back-btn__text {
    color: #fff;
}
.hb-bbs-link .hb-bbs-link__header .page-header--right .page-header__share-btn .hb-icon {
    filter: invert(100%);
}
.hb-bbs-link .hb-bbs-link__header .page-header--right .page-header__share-btn:hover:after {
    background-color: #333;
}

.link-user__follow-btn,
.link-reply__menu-btn.hb-color__btn--confirm {
    filter: invert(60%) contrast(400%);
}

/* tag */
.link-section-tags .link-tags__tag-item {
    background: #333 !important;
}

/* game-card */
.hb-cpt__link-game-card {
    background: #555;
}
.hb-cpt__link-game-card .game-info .line-2 .follow-box {
    background: #333;
}
.hb-cpt__price-tag .price-content-box {
    background: #333
}
.hb-cpt__price-tag .price-content-box .crash-svg,
.hb-cpt__price-tag .price-content-box i.hb-icon {
    filter: invert(100%);
}
.hb-cpt__link-game-card .game-info .line-2 .follow-box .follow-num {
    margin-top: -3px;
}
.hb-bbs-post:after,
.hb-bbs-image-text:after {
    background-color: #262629
}
.hb-cpt__slide-tab,
.hb-cpt__slide-tab.underline:after {
    background: #444;
}
.hb-cpt__slide-tab .slide-tab__tab-item.active {
    color: #fff;
}
.link-comment__comment-item + .link-comment__comment-item:before,
.link-reply:before {
    height: 1px;
    background-color: #262629;
}
...

Reviews

No reviews yet.