Skip to content

dark mode bilibili.tv by sapondanaisriwan

Screenshot of dark mode bilibili.tv

Details

Authorsapondanaisriwan

LicenseNo License

Categorybilibili.tv

Created

Updated

Size40 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

[DD/MM/YY]
[20.10.2022] - Add CSS to Release Calendar
[19.10.2022] - Add some CSS to studio.bilibili.tv
[17.10.2022] - Add some CSS to studio.bilibili.tv
[16.10.2022] - Add some CSS

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           bilibili.tv dark theme
@namespace       userstyles.world/user/sapondanaisriwan
@author          sapondanaisriwan(Adashima#4066)
@description    `A dark theme for bilibili.tv ONLY 😎πŸ₯ΆπŸ˜πŸ˜˜πŸ€¦β€β™‚️πŸ’ͺπŸ˜ŠπŸ™Supports:- bilibili.tv- studio.bilibili.tvFound a bug?Tell me hereπŸ‘‰ : https://forms.gle/jTJRFBrkbrHJ97vd9`
@version        1.1.5
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */

/*
Support me: https://ko-fi.com/sapondanaisriwan
*/

@-moz-document domain("bilibili.tv") {
    :root {
        --main-sl-color: #3390FF;
        --main-text-color: #C4C0B9;
        --main-text2-color: #999;
        --main-bg-color: #1d1f20;
        --main-bg2-color: #3B3B3B;
    }

    .quiz {
/*         display :none; */
        visibility:hidden
    }
    
    html {
        color-scheme: dark !important;
    }

    .vip-product-header {
        background: none !important;
    }
    
    /* highlight */
    .bstar-tab--solid .bstar-tab__item.active[data-v-496690a6],
    .ep-item__reference--active,
    .ep-item__reference--active:hover,
    .timeline-tab__item--active[data-v-95892f62],
    .bstar-video-card__tag,
    .scroll-container__item--active,
    .scroll-container__item:hover,
    .bstar-tab__item.active,
    .anime-tag {
        color: rgb(81, 167, 249) !important;
        background-image: initial;
        background-color: rgba(6, 66, 156, 0.1) !important;
    }

    .children-comment-list__operate-item:hover {
        color: rgb(81, 167, 249) !important;
    }

    /* text color 2nd */
    .bstar-sidebar__footer > a,
    .bstar-video-card__desc,
    .bstar-video-card__nickname,
    div.bstar-meta-up-follow__user-info > div,
    div.category__container ul > li > a,
    .horizontal-card__info_desc,
    .vertical-card__desc[data-v-4c1292a9],
    .live-card .live-info .info-content .info-desc .info-desc-nickname[data-v-ad5523fe],
    .content,
    .comment__translation[data-v-4a77d45e],
    .comment-send__textarea__inner textarea::placeholder,
    .up-card__sign,
    .up-card__list__item {
        color: var(--main-text2-color) !important
    }

    /* text color main*/
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    li,
    input,
    label,
    textarea,
    .room-title,
    .anchor-name,
    .follow-value,
    .gift-txt,
    .popularity-value,
    .message-text-part,
    .title,
    .content,
    .bstar-header__list-item,
    .live-list-title,
    .info-desc-nickname,
    .info-title,
    .comment-send__textarea__inner,
    .comment-wrap__total,
    .bstar-header-search-suggest__item,
    .highlight-word,
    .comp-uploader-card__body-desc_item em[data-v-ab4833e4],
    .gift-title,
    .gift-price,
    .my-balance,
    .star-num,
    .dialog__header-title,
    .balance.el-tooltip__trigger.el-tooltip__trigger,
    .cover-local__text-color-text,
    .MsoNormal,
    .act-rich-render-content p span,
    .iugc__describe.help-center__describe div,
    .feedback__dialog-title,
    .comment-send__btn.comment-send__btn--disable,
    .up-card__count, .vip-payment-entity__name,
    .vip-product-header__info-title,
    .text-align-type-justify.pap-line-1.pap-spacing-after-0pt.paragraph.pap-line-rule-auto.pap-spacing-before-0pt span{
        color: var(--main-text-color) !important;
    }

    /* bg-color */
    .filters,
    .bstar-header,
    .fav__header,
    .history__header,
    .bstar-header-search-bar__input,
    .el-popover.el-popper.popover-gift-item_wrapper,
    .el-popper.is-light.tooltip-operation-popper,
    .gift-panel,
    .el-dialog.payment-dialog,
    .rank-footer.rank-0,
    .dialog__container.dialog__container--medium.dialog__container--login.dialog__container--show,
    .el-loading-mask,
    .app__right,
    .el-dialog.feedback__dialog,
    .bstar-video-card__title-text,
    .card-section.card-section--single.timeline,
    .dialog__container.dialog__container--large.dialog__container--vip-product-dialog.dialog__container--show,
    .dialog__container.dialog__container--medium.dialog__container--undefined.dialog__container--show {
        background-color: var(--main-bg-color) !important;
    }

    /*   anime schedule   */
    .timeline,
    .bstar-video-card__title.bstar-video-card__title--small.bstar-video-card__title--bold a {
        background-color: rgb(32, 35, 36) !important;
    }

    /*   today section   */
    .timeline-header.timeline-header--today {
        border-top-color: rgb(52, 56, 58);
        border-right-color: rgb(52, 56, 58);
        border-left-color: rgb(52, 56, 58);
        border-bottom-color: initial;
        background-image: linear-gradient(rgb(33, 35, 36) 0%, rgb(29, 31, 32) 100%);
    }

    /*    highlight line */ 
    .timeline-header.timeline-header--today p,
    .timeline-header.timeline-header--today h5,
    .bstar-video-card__desc--highlight {
        color: rgb(81, 167, 249) !important;
    }

    /*    dot  */
    .timeline-card--today.timeline-card--updated .timeline-card__dot {
        background: #4C93FF !important;
    }

    /*    icon  */
    .current-time__icon::after {
        background-image: url("https://raw.githubusercontent.com/sapondanaisriwan/sapondanaisriwan.github.io/main/themes/images/history-icon.png") !important;
    }

    .timeline-card__dot {
        background-image: initial;
        background-color: rgb(50, 54, 56)!important;
        border-color: rgb(52, 56, 58)!important;
    }

    .current-time__icon {
        border: none !important;
    }

    /* text color/bg-color */
    html,
    nav,
    body,
    a,
    div[class^='bstar-header'],
    div[class^='bstar-comment'],
    div[class^='comment'],
    div[class^='bstar-meta'],
    header.bstar-header.bstar-header--mobile,
    .interactive,
    .interactive__text,
    .category__container,
    .login-tip span,
    .el-dialog.dialog-top_up {
        color: var(--main-text-color) !important;
        background-color: var(--main-bg-color) !important;
    }

    /* bg/bg-color */
    .home-page,
    .gift-control,
    .room,
    .room-info,
    .intl-live-rank,
    .rank-header,
    .rank-list-wrapper,
    .comment-sender-wrapper,
    .live-comment-container,
    .room-page .live-rank-container[data-v-b5575423],
    .room-introduction-box,
    .comment-area {
        background: var(--main-bg-color) !important;
        background-color: var(--main-bg-color) !important;
    }

    .rank-header,
    .live-rank-container,
    .comment-area,
    .live-comment-container,
    .room-page,
    .live-comment-container,
    .room-introduction-box,
    .el-popper.is-light.tooltip-operation-popper {
        /*         border-color: #565d60 !important */
        border-color: rgba(153, 153, 153, .2) !important;
    }

    .message-text-part.type-name {
        color: rgb(0, 255, 127) !important;
    }

    .anime-timeline:not(.anime-timeline--mobile) .anime-timeline__subtitle[data-v-f640ef7a]:after {
        background-image: none !important
    }
    .back-top--position[data-v-f101b496],
    .bstar-back-top--pc[data-v-f101b496],
    .bstar-back-top--mobile[data-v-f101b496],
    .cover-local__text-shadow[data-v-20049f6a],
    .live-rank-container {
        background: none !important;
    }


    .bstar-header__left-menu,
    .bstar-sidebar__link:before,
    .bstar-header-search-bar__btn > button,
    .bstar-header__list-item:before,
    .bstar-tooltip__body-reference img,
    .card-section__more[data-v-d1603a8d],
    .expand-icon,
    .popularity-icon,
    .room-info .room-info-rt .popularity .operation-icon[data-v-628aa857],
    .series__more-icon[data-v-9e7367c2] {
        filter: brightness(450%);
    }

    .bstar-header,
    .bstar-header-search-recommend,
    .bstar-header-search__popup {
        border-color: #16181C !important;
    }

    .bstar-header-search-history__item,
    .textarea.textarea--limit {
        color: var(--main-text-color) !important;
        background-color: #27292A;
        border-color: #27292A;
    }

    .bstar-video-card__cover-mask-text {
        background-color: transparent;
    }

    .room-page[data-v-b5575423] {
        background: var(--main-bg-color)
    }

    /* astronaut animation */
    .back-top--position[data-v-f101b496],
    .bstar-back-top--pc[data-v-f101b496],
    .bstar-back-top--mobile[data-v-f101b496] {
        background-image: url("https://raw.githubusercontent.com/sapondanaisriwan/Bilibili.tv-Dark-mode/main/astronaut.png") !important;
        background-repeat: no-repeat;
        background-position: left top;
        width: 160px;
        height: 160px;
        text-indent: 110%;
        white-space: nowrap;
        overflow: hidden;
        border: hidden;
        box-shadow: none;
        -webkit-animation: linear infinite;
        -webkit-animation-name: UpAndDown;
        -webkit-animation-duration: 2s;
    }

    @-webkit-keyframes UpAndDown {
        0%,
        100% {
            bottom: 0;
        }
        50% {
            bottom: 100px;
        }
    }

    body > div.bstar-back-top.bstar-back-top--pc > div,
    body > div.bstar-back-top.bstar-back-top--pc > i {
        display: none;
        box-shadow: none;
        border: hidden
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #909399 !important;
    }

    /*  comment    */
    .comment-send__btn,
    .login-footer__link[data-v-4d0c43f3] {
        color: #4c93ff !important
    }

    .comment-wrap__send div div,
    .comment-send__textarea__inner > textarea[data-v-58f8ed7d] {
        border-radius: 4px;
        background-color: var(--main-bg2-color) !important;
    }

    .up-card {
        border-color: rgb(54, 59, 61) !important;
        background-color: rgb(24, 26, 27) !import...

Reviews

No reviews yet.