Skip to content

夜间哔哩 NightMode For Bilibili.com by qiuzaiyou

Imported from a private source

Mirrored from https://raw.githubusercontent.com/QIUZAIYOU/Stylish/main/Bilibili/bilibili.user.styl

Screenshot of 夜间哔哩 NightMode For Bilibili.com

Details

Authorqiuzaiyou

LicenseGPL-3.0 License

Categoryqiuzaiyou,bilibili

Created

Updated

Size515 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

⭐1. 常用页面夜间模式全覆盖 ⭐2. 去除广告 ⭐3. 页面样式优化

Notes

⛔ 目前发现B站将部分页面元素放入了「shadow-root」里,若官方「未使用CSS变量」则会导致样式失效,该问题目前没有解决方法。Support for ShadowRoot DOM #1212

⭐ 若发现本样式适配图片不能正常显示的问题,可在 Stylus 设置中尝试开启「启用CSP补丁以使样式资源生效」选项。⭐
⭐ 但开启此选项可能会导致网站加载异常,情视具体情况而定。⭐

历史更新

大部分已完成,部分施工中...

目前常用页面应该已经全面覆盖了。

除了「直播」和「游戏」相关页面,使用时可点击浏览器工具栏 stylus 图标,再点击本样式名称后面的操作菜单(竖着的三个点),勾选排除当前链接,这两个域名相关页面夜化后续会补上。

2024

07.13 22:20:重新适配「shadow-root」中官方使用「CSS变量」的元素。

07.10 16:10:⛔ 因「播放页」评论区被放入「shadow-root」导致样式失效并且暂无解决办法,故先取消此部分样式修改。

03.10 11:43:修复「直播页」部分元素未适配问题。

02.01 16:18:适配「播放页」投票功能相关元素。

01.19 08:51:修复「专属视频」未开通时页面部分元素未适配问题,因本人未开通任何包月充电,所以专属视频实际播放页是什么样我也不知道处理不了。

01.18 09:46:屏蔽「首页」及「搜索结果页」视频卡片部分中广告占位元素。

01.17 15:34:修复部分元素未适配问题。

2023

10.11 18:41:适配「AI视频总结」功能。

08.01 21:20:尽量恢复适配旧版「首页」及「播放页」。

02.08 08:44:修复「稍后再看」播放页中发现的部分元素未适配问题。

01.19 23:34:修复未登录状态下「首页」中发现的部分元素未适配问题。

2022

10.17 21:59:适配「饭盒」相关页面。

10.11 17:45:修复「创作中心」页中部分非发现的未适配问题。

09.04 16:16:修复 #18 ,当前「创作中心」估计仍有我未适配到的地方,等后续使用中发现后修复。

08.23 17:25:适配「黑板活动」页下方反馈动态区域。

08.12 08:23:紧急修复因屏蔽新版「首页」第一个板块中的广告导致页面无法向下滚动的错误。

08.11 20:37:适配「首页」及「视频分类详情」页最近更新代码。

08.06 23:27:修复「播放页」代码更新后「屏蔽设定」及「高级弹幕」表单未覆盖问题。

08.06 21:43:修复「专题」页面及「全站评论」模块相关元素未覆盖问题。

07.27 20:26:修复「直播」页面相关元素未覆盖问题。

06.01 08:26:修复 #16 及其他问题修复。这几天B站更新频繁,我发现了就会适配。

05.23 11:21:修复「笔记」页面相关元素未覆盖问题。

05.21 13:31:修复「直播」页面及前缀为「Link」的域名下页面未覆盖问题。

05.16 22:15:修复「播放页」中「屏蔽设定」及「高级弹幕」表单未覆盖问题。

04.22 16:01:适配最近「动态」页面更新。

04.05 21:04:修复 #14 及「新版首页」部分元素覆盖错误问题。

04.05 14:50:修复 #13 及「排行」页面及元素未覆盖问题。

03.30 10:15:修复 #12 和部分页面及元素未覆盖问题。

03.29 16:49:适配新版「播放」及「动态」页面(修复 #7 #11)并修复部分页面及元素未覆盖问题。

03.28 18:39:适配新版「分区」页面并修复部分页面未覆盖问题。

03.23 23:36:适配新版「搜索」页面(修复 #10)及新版骨架屏。

02.17 00:18:适配「客服中心」并修复部分页面未覆盖问题。

02.09 22:31:修复「创作中心」部分页面未覆盖问题,适配「素材酷平台」。

02.04 22:43:适配「话题页」。

01.02 18:30:修复 #8

2021

12.29 09:30:修复 #6

12.28 08:26:修复部分新版「首页」直播板块屏蔽失效问题。

10.02 20:58:修复部分「直播」相关页面夜化不全问题。

09.28 16:09:继续修复并适配新版首页。

09.14 11:04:继续修复并适配新版首页。

09.10 17:11:适配「游戏中心」部分页面。

09.02 17:34:部分积累问题修复,适配新版首页。

08.17 16:19:趁有空更新了部分「直播间」页面元素。

08.04 15:16:修复「搜索结果页」部分元素未适配的问题,修复因安装部分浏览器插件及脚本,在其更改网站元素的情况下,导致的样式冲突问题。

07.13 00:32:修复「专栏」部分页面未全部夜化的问题(其他页面可能也有,找到再修复)。

07.05 19:20:积累的一些问题的修补。

07.02 15:15:积累的一些问题的修补及部分新增内容的夜化。

06.17 21:34:积累的一些问题的修补。

06.08 09:32:修复之前未发现的一些的问题。

06.07 22:43:修复「视频播放页」视频简介字体与背景颜色相同的问题。

05.06 11:49:优化部分页面夜化效果,新增「风纪委员」相关页面夜化。

05.04 13:43:修复「#标签#」相关页面未被正确夜化的问题。

04.16 16:44:修复「历史记录」页面视频封面加载时有白边的问题。

04.15 21:27:继续适配「创作中心」页面及其他页面效果优化。

04.15 19:00:适配新的评论区并优化原先效果。

04.12 11:30:继续适配「创作中心」页面及「个人中心」页面效果优化。

04.11 01:26:继续适配「创作中心」部分页面。

04.10 13:16:适配「创作中心」部分页面,持续施工中。

04.10 10:55:修复「播放页」视频工具条中所有开关均无法正常使用的问题。

04.08 20:53:修复「播放页」视频工具条中「弹幕开关」无法正常使用的问题。

04.08 20:33:优化「历史记录」页面夜化效果。

03.31 09:51:修复并优化「专栏」相关页面夜化效果。

03.26 09:25:修复「主导航收藏列表」视频标题颜色与背景颜色相同的问题。

01.24 14:25:完成「课堂」相关页面夜化,因本人为购买过任何课程,故不知「已购课程」页面是什么样,故无法夜化。

01.20 19:49:修复「会员购」及「全站评论系统」部分元素未夜化的问题,继续优化已完成页面夜化效果。

01.15 21:54:继续优化已完成页面夜化效果。

01.13 17:40:新增「个人中心」、「大会员」、「支付」、「帮助中心」相关页面夜化。继续优化已完成页面夜化效果。

01.12 11:10:新增「漫画」相关页面夜化。继续优化已完成页面夜化效果。

01.08 00:02:新增「会员购」相关页面夜化,由于本人从没从「会员购」购买过东西,所以「订单中心」没有订单,因此只能夜化无订单提示页面,因为看不到有订单的页面是什么样,所以无法夜化。优化了全站评论列表细节及图标。继续优化已完成页面夜化效果。

01.06 22:40:继续调整及优化,页面实在是太多了。

01.06 17:53:新增「主导航栏-游戏中心」、「主导航栏-直播」、「主导航栏-漫画」及「历史记录」页面夜化,增加部分广告及垃圾元素屏蔽。

01.06 11:39:继续「频道及频道详情」页面夜化工作,同时继续优化已完成页面夜化效果,并开始计划屏蔽广告及垃圾元素。

01.04 21:52:完成「消息」页面夜化,可能完成「频道及频道详情」页面夜化,继续优化已完成页面夜化效果。

01.04 17:27:更改导航栏 Bilibil 默认 Logo 为本主题 Logo ,继续优化已完成页面夜化效果。

01.03 00:51:完成「播放页」夜化,「频道及频道详情」页面、「课堂」页面部分元素夜化,继续优化已完成页面夜化效果。

01.01 01:58:完成「个人空间」夜化,优化「首页」及「专栏」页面夜化效果。

2020

12.31 15:58:完成「专栏」页面夜化,并优化「首页」夜化效果。

12.31 01:11:完成「首页」及「动态」页面夜化,不过需做进一步检查。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
	@name           夜间哔哩 NightMode For Bilibili.com
	@namespace      USO Archive
	@author        QIUZAIYOU
	@description   	  ⭐1. 常用页面夜间模式全覆盖 ⭐2. 去除广告 ⭐3. 页面样式优化
	@version        202408150840
	@license        GPL-3.0 License
	@preprocessor   uso
	@advanced dropdown BiliLive "首页直播板块屏蔽" {
		BiliLive_ON  "开" <<<EOT #bili_live,.bili-layout section.bili-grid:nth-child(5),.live-card-list,.live-rank-conent,section.bili-grid:nth-child(6),section.bili-grid:nth-child(3), EOT;
		BiliLive_OFF "关" <<<EOT /*[[BiliLive]]*\/ EOT;
	}
    @advanced dropdown BiliRace "首页电竞赛事板块屏蔽" {
		BiliRace_ON  "开" <<<EOT #reportFirst3,.battle-area,#-\31>.channel-floor,EOT;
		BiliRace_OFF "关" <<<EOT /*[[BiliRace]]*\/ EOT;
	}
    @advanced dropdown LiveFansMedal "直播间粉丝勋章" {
		LiveFansMedal_ON  "开" <<<EOT .chat-history-panel .chat-history-list .chat-item.danmaku-item .fans-medal-item-ctnr,EOT;
		LiveFansMedal_OFF "关" <<<EOT /*[[LiveFansMedal]]*\/ EOT;
	}
	@advanced dropdown LiveRank "直播间粉丝等级" {
		LiveRank_ON  "开" <<<EOT .chat-history-panel .chat-history-list .chat-item .rank-icon,EOT;
		LiveRank_OFF "关" <<<EOT /*[[LiveRank]]*\/ EOT;
	}
	@advanced dropdown ActivityGatherEntry "直播间标题部分活动入口" {
		LiveRank_ON  "开" <<<EOT .activity-gather-entry,EOT;
		LiveRank_OFF "关" <<<EOT /*[[ActivityGatherEntry]]*\/ EOT;
	}
	@advanced dropdown ChatColorfulBubble "直播间右侧聊天背景色特效" {
		ChatColorfulBubble_OFF "关" <<<EOT .chat-history-panel .chat-history-list .chat-item.danmaku-item.chat-colorful-bubble{
			margin: 0!important;
			background: transparent!important;
		},EOT;
		ChatColorfulBubble_ON  "开" <<<EOT /*[[ChatColorfulBubble]]*\/ EOT;
	}
==/UserStyle== */
@-moz-document url-prefix("https://www.bilibili.com/") {
	/*===
	* © 版权信息
	* © 作者:QIUZAIYOU
	* © 最后更新:202408150840
	* © Github项目地址:https://github.com/QIUZAIYOU/Stylish
	* © Gitee项目地址:https://gitee.com/aiideai/Stylish
	* © UserStyles.world项目地址:https://userstyles.world/style/241/nightmode-for-bilibili-com
	===*/
}
@-moz-document domain("bilibili.com") {
	/* ===屏蔽元素=== */
	/* -- 首页 -- */
	/* 导航活动元素及app下载 */
	.nav-link .nav-link-ul .nav-link-item:nth-last-child(1), .nav-link .nav-link-ul .nav-link-item:nth-last-child(2), /* 首页推广板块 */
	#reportFirst2, /* 首页板块中间的Banner广告 */
	.storey-box div[id*="bili_"] > a[data-loc-id], /* 首页直播板块(个人不喜,故添加了屏蔽开关,默认开启) */
	/*[[BiliLive]]*/
	/*[[BiliRace]]*/
	/* 播放页广告 */
	#bannerAd, #slide_ad, .ad-report, .activity-m-v1, .video-page-special-card-small, .video-container-v1 #live_recommand_report, /* 直播页广告 */
	.room-ctnr + div.flip-view, #home_popularize .adpos, #home_popularize .l-con, #reportFirst2 .extension, #slide_ad, .ad-report, .bili-header-m .nav-menu .nav-con .nav-item .text-red, .bilibili-player-promote-wrap, .bypb-window .operate-card, .gg-floor-module, .gg-window .operate-card, .home-app-download, .home-content .ad-panel, .international-home .banner-card, .mascot, .mobile-link-l, .rank-container .cm-module, .recommend-list .rec-list > :not(.video-page-card), .v-wrap .vcd, .video-page-game-card, .video-page-special-card, .blocked.new, .v-wrap #live_recommand_report, .eva-extension-area, .eva-banner, .loc-moveclip, .feed-card:has(.bili-video-card__info--ad) {
		display: none !important;
	}
	.recommended-container .first-paint > div:not([class]) {
		height: 0!important;
		opacity: 0!important;
		visibility: hidden!important;
		overflow: hidden!important;
	}
	.b-img, .bili-album__preview .bili-album__preview__picture {
		background: transparent!important;
	}
}
@-moz-document domain("bilibili.com") {
	/* ===通用属性=== */
	:root {
		/* 以下为自定义变量名 */
		--color-14: #141414 !important;
		--color-1b: #1b1b1b !important;
		--color-21: #212121 !important;
		--color-23: #232323 !important;
		--color-27: #272727 !important;
		--color-2c: #2c2c2c !important;
		--color-2c-95: rgba(44, 44, 44, .95) !important;
		--color-37: #373737 !important;
		--color-42: #424242 !important;
		--color-66: #666 !important;
		--color-77: #777 !important;
		--color-86: #868686 !important;
		--color-af: #afafaf !important;
		--color-ff: #fff !important;
		--bili-blue: #00a1d6 !important;
		--bili-lightblue: #00b5e5 !important;
		--bili-red: #fa5a57 !important;
		--bili-lightblue-50: #00b5e580 !important;
		--bili-red-50: #fa5a5780 !important;
		--bili-lightred: #f25e8e !important;
		--bili-yellow: #f7a920 !important;
		--bili-green: #0dad9e !important;
		--bili-lightgreen: #43ce5b !important;
		--bili-green-50: #0dad9e80 !important;
		--bili-service-green: #09aeb0!important;
		--bili-pink: #fb7299 !important;
		--bili-khaki: #d9a773 !important;
		--bili-golden: #ffbb2f !important;
		--bili-silvery: #aab6c5 !important;
		--bili-coppery: #f89658 !important;
		--bili-manga-blue: #32aaff !important;
		--bili-manga-yellow: #fb9b11 !important;
		--bili-shop-pink: #f25d8e !important;
		--bili-shop-darkpink: #e50e4c !important;
		--bili-comment-notice-yellow: #e78b1f !important;
		--bili-fanhe-pink: #ff778f!important;
		--bodr-42: 1px solid #424242 !important;
		--bili-live-yelllow: #ffd432!important;
		--filter-ff-21: invert(100%) sepia(1%) saturate(2108%) hue-rotate(282deg) brightness(105%) contrast(74%) !important;
		--filter-00-86: invert(50%) sepia(54%) saturate(0%) hue-rotate(258deg) brightness(95%) contrast(80%) !important;
		--filter-ff-86: invert(50%) sepia(12%) saturate(0%) hue-rotate(202deg) brightness(103%) contrast(94%) !important;
		--filter-19-86: invert(47%) sepia(70%) saturate(2%) hue-rotate(340deg) brightness(97%) contrast(84%) !important;
		--filter-20-86: invert(49%) sepia(19%) saturate(4%) hue-rotate(314deg) brightness(103%) contrast(91%) !important;
		--filter-21-86: invert(51%) sepia(3%) saturate(13%) hue-rotate(350deg) brightness(104%) contrast(86%) !important;
		--filter-22-86: invert(54%) sepia(2%) saturate(0%) hue-rotate(136deg) brightness(99%) contrast(94%) !important;
		--filter-99-86: invert(38%) sepia(0%) saturate(537%) hue-rotate(141deg) brightness(101%) contrast(84%) !important;
		--filter-cc-86: invert(50%) sepia(16%) saturate(0%) hue-rotate(243deg) brightness(103%) contrast(81%) !important;
		--filter-bb-86: invert(50%) sepia(0%) saturate(5799%) hue-rotate(152deg) brightness(107%) contrast(72%) !important;
		--filter-c0-86: invert(50%) sepia(0%) saturate(2764%) hue-rotate(157deg) brightness(107%) contrast(70%) !important;
		--filter-df-86: invert(50%) sepia(85%) saturate(0%) hue-rotate(196deg) brightness(89%) contrast(96%) !important;
		--filter-dd-86: invert(50%) sepia(97%) saturate(0%) hue-rotate(158deg) brightness(88%) contrast(84%) !important;
		--filter-e1-86: invert(50%) sepia(66%) saturate(0%) hue-rotate(255deg) brightness(93%) contrast(83%)!important;
		--filter-ccd0d7-86: invert(50%) sepia(5%) saturate(0%) hue-rotate(195deg) brightness(104%) contrast(93%) !important;
		--filter-98a2aa-86: invert(50%) sepia(90%) saturate(1%) hue-rotate(25deg) brightness(89%) contrast(86%) !important;
		--filter-6c727e-86: invert(50%) sepia(0%) saturate(7464%) hue-rotate(114deg) brightness(108%) contrast(65%) !important;
		--filter-bdc7cf-86: invert(50%) sepia(0%) saturate(1258%) hue-rotate(292deg) brightness(106%) contrast(82%) !important;
		--filter-aab2b9-86: invert(50%) sepia(4%) saturate(0%) hue-rotate(237deg) brightness(105%) contrast(89%) !important;
		--filter-99a2aa-86: invert(50%) sepia(0%) saturate(1885%) hue-rotate(260deg) brightness(106%) contrast(81%)!important;
		--filter-9499a0-86: invert(50%) sepia(17%) saturate(0%) hue-rotate(242deg) brightness(102%) contrast(87%)!important;
		--filter-21-66: invert(51%) sepia(0%) saturate(7468%) hue-rotate(315deg) brightness(76%) contrast(89%) !important;
		--filter-99-66: invert(56%) sepia(0%) saturate(2966%) hue-rotate(316deg) brightness(80%) contrast(92%) !important;
		--filter-ff-66: invert(77%) sepia(70%) saturate(0%) hue-rotate(92deg) brightness(91%) contrast(93%) !important;
		--filter-c0-66: invert(82%) sepia(5%) saturate(0%) hue-rotate(64deg) brightness(112%) contrast(86%) !important;
		--filter-d8-66: invert(83%) sepia(0%) saturate(1979%) hue-rotate(347deg) brightness(131%) contrast(68%) !important;
		--filter-ccd0d7-66: invert(70%) sepia(2%) saturate(5%) hue-rotate(326deg) brightness(100%) contrast(81%) !important;
		--filter-97a2ab-66: invert(50%) sepia(0%) saturate(2303%) hue-rotate(162deg) brightness(76%) contrast(82%)!important;
		--filter-99a2aa-66: invert(71%) sepia(0%) saturate(0%) hue-rotate(7deg) brightness(87%) contrast(90%) !important;
		--filter-50-42: invert(0%) sepia(0%) saturate(5340%) hue-rotate(136deg) brightness(68%) contrast(84%)!important;
		--filter-e8-42: invert(83%) sepia(6%) saturate(30%) hue-rotate(11deg) brightness(105%) contrast(94%)!important;
		--filter-bec3cc-42: invert(97%) sepia(0%) saturate(0%) hue-rotate(123deg) brightness(93%) contrast(91%) !important;
		--filter-ccd0d7-42: invert(85%) sepia(1%) saturate(0%) hue-rotate(179deg) brightness(90%) contrast(97%) !important;
		--filter-98a2aa-blue: invert(50%) sepia(91%) saturate(2875%) hue-rotate(163deg) brightness(94%) contrast(101%)!important;
		--filter-98a2aa-shopPink: invert(50%) sepia(81%) saturate(1975%) hue-rotate(308deg) brightness(100%) contrast(90%) !important;
		--filter-99a2aa-blue: invert(50%) sepia(83%) saturate(1625%) hue-rotate(158deg) brightness(87%) contrast(104%)!important;
		--filter-green-blue: invert(50%) sepia(68%) saturate(522%) hue-rotate(125deg) brightness(95%) contrast(95%) !important;
		--filter-626a6e-blue: invert(51%) sepia(96%) saturate(2303%) hue-rotate(161deg) brightness(91%) contrast(101%) !important;
		--filter-008ac5-blue: invert(50%) sepia(88%) saturate(2909%) hue-rotate(163deg) brightness(94%) contrast(101%)!important;
		--filter-20-mangaBlue: invert(50%) sepia(91%) saturate(1050%) hue-rotate(180deg) brightness(101%) contrast(101%) !important;
		--filter-6c727e-mangaBlue: invert(50%) sepia(66%) saturate(1178%) hue-rotate(182deg) brightness(103%) contrast(102%) !important;
		--filter-bdc7cf-mangaBlue: invert(50%) sepia(98%) saturate(1080%) hue-rotate(180deg) brightness(101%) contrast(102%) !important;
	}
	:ro...

Reviews

No reviews yet.