Skip to content

ニコニコ(Re)マイページ ダークテーマ by watanuki-azuma

Screenshot of ニコニコ(Re)マイページ ダークテーマ

Details

Authorwatanuki-azuma

LicenseCC0 1.0

Categorynicovideo

Created

Updated

Size40 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

ニコニコ動画の新マイページをダークテーマ風にしてみました。一部ダークテーマ化ができていない箇所があります(作者が利用していない機能等)。

--統合済みの他作者様CSS--

gonbuto様が公開している「ニコニコ(Re)のマイページ(2020年10月版)を詰めるだけ」を本CSSに統合しています。カスタマイズ機能から有効化することが可能です。 ただし、上記CSSにある一部カスタマイズは利用不可能となっています。気になる方は個別に導入してください。

--カスタマイズ機能の解説--

インストール後スタイル管理画面にてスタイル名横にある歯車アイコンからカスタマイズ機能の管理が可能です。
以下に本スタイルで利用可能なカスタマイズ機能の解説を記載します。

・詰めるだけを統合

gonbuto様が公開している「ニコニコ(Re)のマイページ(2020年10月版)を詰めるだけ」を本CSSだけで有効化できます。

[Deny(許可しない)](デフォルト)→使用しない場合はこちらです。
[Allow(許可する)]→有効化され、ダークテーマ化に伴って一部修正が必要な部分も対応済みです。

広告

消えたり出たりします。デフォルトで消してます。

・赤文字部分の色が変えられます

ニコレポの動画投稿とかで直近だと[〇分前]とかが赤文字ですがそれの色を変えられます。

・More Dark Theme(より暗く)

<

なんでmoreなんでしょうね。

[しない](デフォルト)→グレーっぽい感じです。
[する]→暗めになります。

・オレンジテーマ化

もともとリンク文字とかは緑で作ったんですけどいまいち見づらかったんです。

[する](デフォルト)→オレンジ色です。
[しない]→緑色です。

上記カスタマイズは廃止されました。

Notes

2022-01-12 1.1.0 Stylus言語に移植し一部のカスタマイズを不要と判断し廃止。
2021-08-31 1.0.6 ヘッダーメニューの修正および適用範囲の拡大
2021-08-22 1.0.4 シリーズ一覧画面でのデザイン崩れを修正しました。
2021-08-17 1.0.1 ニコニコTOPページのダークテーマ化を行いました。
2021-08-16 1.0.0 移管しました。

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           ニコニコ動画マイページ ダークテーマ Stylus版
@namespace      nicovideo.jp
@version        1.1.0
@description    ニコニコ動画マイページをダークテーマ化
@author         Azuma
@preprocessor	stylus

// var color mypageredcolor "ニコレポの赤文字の色を変える" "#FBBC00"

@var select Ad "広告除去"[
    "Enable",
    "Disable"]



@var select CombinedTsumerudake "詰めるだけCSSを統合"[
    "Deny",
    "Allow"
    ]

==/UserStyle== */

@-moz-document url-prefix("https://www.nicovideo.jp/"){
	/* ヘッダーメニュー */
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > div > a[href*="header_service"],
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > a[href*="header_service"],
    #CommonHeader > div > div > div > div > div > div > div > div > a > div{
		background-color: #666
	}
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > div > a[href*="header_service"]:hover,
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > a[href*="header_service"]:hover,
    #CommonHeader > div > div > div > div > div > div > div > div > a > div:hover{
		background-color: #2b2b2b !important
	}
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > div > a[href*="header_service"] > div,
	div#CommonHeader.CommonHeader .nico-CommonHeaderRoot > div > div > div > div > div > div > a[href*="header_service"],
    #CommonHeader > div > div > div > div > div > div > div > div > a > div > div{
		color: #eee
	}

	#CommonHeader > div > div > div > div > div > div > div > div > div > a:nth-child(n) > div,
	#CommonHeader > div > div > div > div > div > div > div > div > div:nth-child(2) > label > span,
	#CommonHeader > div > div > div > div > div > div > div > div > div > div:nth-child(n) > a > div,
	#CommonHeader > div > div > div > div > div > div > div > div > div {
		color: #eee
	}

	#CommonHeader > div > div > div > div > div > div > div > div > div > a:nth-child(n),
	#CommonHeader > div > div > div > div > div > div > div > div,
	#CommonHeader > div > div > div > div > div > div > div > div > div:nth-child(2) > label,
	#CommonHeader > div > div > div > div > div > div > div,
	#CommonHeader > div > div > div > div > div > div > div > div > div > div:nth-child(n) {
		background-color: #666
	}
	#CommonHeader > div > div > div > div > div > div > div > div > div > a:nth-child(n):hover,
	#CommonHeader > div > div > div > div > div > div > div > div > div:nth-child(2) > label:hover,
	#CommonHeader > div > div > div > div > div > div > div > a:hover {
		background-color: #2b2b2b
	}
}
@-moz-document url-prefix("https://www.nicovideo.jp/my"),
url-prefix("https://www.nicovideo.jp/user"),
url-prefix("https://site.nicovideo.jp/badge"),
url-prefix("https://www.nicovideo.jp/series/") {
	
	:root{
		--ChangeRedColor : mypageredcolor;
		
		if Ad == "Disable"{}
		
		else if Ad == "Enable"{
			.HeaderContainer_Re-ad,.RightSideContainer-adWrap,.FormationFrame.RightSideContainer-formationFrame,.Ads.UserPageFooterContainer-ad,.PremiumBanner,.RightSideContainer,.Ads,.VideoAdContainer-player{
    display: none !important
		}
		}
	}
	
	


	/* ユーザーページヘッダー */
	.UserPage-header,
	.UserPageHeader,
	.UserDetailsHeader,
	.OtherMypageLinks,
	.ThreePointMenu,
	.ShareModal-modal,
	.MainMenuContainer-menu {
		background-color: #555;
	}

	.NiconicoPoint {
		background-color: #757575;
	}

	.MainMenuContainer {
		padding: 2px 0px 0px !important;
		background-color: #757575;
		transform: translateY(-2px) !important;
	}

	.MainMenuContainer-activeBorder {
		background-color: #00b03b;
	}

	.MainMenuContainer-garageLink {
		background: linear-gradient(90deg, #298a26, #046f6f);
	}

	.MainMenuContainer-garageLink:hover {
		background: linear-gradient(90deg, #1e681c, #025151);
	}

	/* 検索バー */
	.CrossSearch_Re-rowSelector,
	.CrossSearch_Re-form {
		background-color: #515151;
		border: 1px solid #646464;
	}

	.CrossSearch_Re-rowService.active,
	.CrossSearch_Re-rowService:hover {
		background-color: #313131;
		color: #ddd;
	}

	.CrossSearch_Re-rowService {
		color: #d7d7d7;
	}

	.CrossSearch_Re-form {
		background: #515151;
		box-shadow: inset 0 0 0 1px #646464;
	}

	.CrossSearch_Re-inputt,
	.CrossSearch_Re-input::placeholder {
		color: #fff;
	}

	.CrossSearch_Re-button {
		background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.4'%3E%3Cpath d='M60.3 74.5a40 40 0 1114.1-14.1l23.3 23.1a8 8 0 010 11.3l-2.9 2.9a8 8 0 01-11.3 0L60.3 74.5zM40 14a26 26 0 110 52 26 26 0 010-52z' fill='%23eee'/%3E%3C/svg%3E") no-repeat;
	}

	/*サブメニュー共通*/
	.SubMenuLink-link_internal:hover {
		background-color: #2b3831;
	}

	.SubMenuLink-link_active {
		background-color: #2f2f2f;
	}

	/* ニコレポ */
	.BaseLayout {
		background-color: #3e3e3e;
		color: #eee;
	}

	.RadioItem > input:checked + label::after {
		background: #5fb752;
	}

	.ModalActionButton,
	.FeedbackLink {
		background-color: #555;
	}

	.NicorepoItem-item {
		background-color: #757575;
		border: 1px solid #666;
	}

	/* ミュート設定 */
	.ModalContent {
		background-color: #555;
	}
	.SubMenuButton {
		color: #e2e2e2 !important;
	}
	.MuteOverlay-text {
		color: #ddd
	}
	.MuteOverlay.Fade {
		background-color: hsla(0, 0%, 25.1%, 0.95)
	}

	/* フォロー */
	.UserItem-content {
		border: 1px solid #888;
		background-color: #5e5e5e;
	}

	.Checkbox-input:checked + .Checkbox-check::before,
	.ContinuousPlayButton,
	.VideoListEditMenuButton,
	.Selectbox-button,
	.Selectbox {
		background-color: #c4c4c4;
		border: 2px solid #aaa;
		color: #373737;
	}

	.Selectbox-label,
	.MylistSelectbox-item {
		color: #373737;
	}

	.CommunityItem-content {
		background-color: #555;
		border: 1px solid #aaa;
	}

	/*フォロー中タグ*/
	.FollowingTagContainer-content {
		background: #555;
		border: 1px solid #aaa;
	}

	.FollowingTagContainer-tagNameLink:visited {
		color: #b3b3b3;
	}

	/* フォロー中チャンネル */
	.ChannelItem-content {
		background: #555;
		border: 1px solid #aaa;
	}

	/* タグレポ */
	.TagrepoItem {
		background-color: #555;
		border: 1px solid #aaa;
	}

	.TagrepoContainer-headerActionBackIcon {
		fill: #bdbdbd;
	}


	/* マイリスト */
	.Selectbox-button_disabled .Selectbox-label {
		color: #777;
	}

	.MylistThumbnails {
		background: #595959;
		border: 1px solid #464646;
	}

	.MylistThumbnails-thumbnail:nth-of-type(3)::before {
		background: linear-gradient(90deg, hsla(0, 0%, 20.8%, 0), #595959);
	}

	.MylistThumbnails-itemCount,
	.NC-MediaObject .NC-MediaObjectTitle {
		color: #ccc;
	}

	.ModalContent_with-footer .ModalContent-body {
		background-color: #555;
		background: none;
	}

	.ModalContent-footer {
		background-color: #333;
	}

	.ModalContent-footerSubmitButton {
		background-color: green;
	}

	.MylistMediaObject-linkArea {
		background-color: #757575;
		border: 1px solid #666;
	}

	/* 履歴 */
	.LikeItemAfter-thanksMessage {
		background-color: #757575;
		border: 1px solid #666;
	}

	.LikeItemAfter-thanksMessage::after {
		border-bottom-color: #646464;
	}

	/* ニコられたコメント */
	.NicoruHistoryPassiveItem {
		background-color: #757575;
	}

	.NicoruHistoryPassiveItem-videoOwner,
	.NicoruHistoryPassiveItem-video {
		background: #333;
	}

	/* バッジ */
	.t-badge-wrapper--list {
		background: #333;
	}

	.m-badge-card {
		background: #757575;
		border: solid 1px #666;
	}
	/* スタンプ */
	.StampCard {
		background: #757575;
	}

	/* 他ユーザーページ */
	.ExpandBoxButton-overlay {
		background: none !important;
	}
	.ExpandBoxButton {
		background-color: #333;
		border-radius: 15px;
		top: 60%;
	}
	.UserDescription {
		margin-bottom: 15px;
	}

	.UserItem-content {
		border: 1px solid #666;
	}

	.FollowButton:hover {
		background-color: green;
	}

	.FollowButton {
		color: #a2e1a2;
		border: 1px solid #558655;
	}

	.FollowButton_following {
		background-color: #00513a;
	}
	
	.OtherMypageLinks-link:hover{
		background-color: #404040;
		color: #ddd;
	}

	/* 文字 */
	.UserDetailsHeader-levelLabel,
	.UserDetailsHeader-account,
	.UserDetailsStatusItem-linkLabel,
	.Dropdown-button,
	.NiconicoPoint,
	.OtherMypageLinks-link,
	.ThreePointMenu > *,
	.ShareModal-modal,
	.UserDetailsHeader-nickname,
	.MainMenuItem,
	.SubMenuLink-label,
	.ModalActionButton,
	.NicorepoItem-senderName,
	.NicorepoItem-item,
	.NicorepoItem-contentDetailTitle,
	.NicorepoItem-activityCreatedAt,
	.NicorepoItem-senderName:visited,
	.FeedbackLink,
	.NicorepoMuteItem-detail,
	.NicorepoMuteSettingContainer-infoHelp,
	.LiveLink,
	.FolloweeContainer-header,
	.SubMenuHeader-title,
	.UserItem-description,
	.UserItem-nickname,
	.WatchLaterHeader-name,
	.WatchLaterHeader-metaValue,
	.WatchLaterHeader-advice,
	.Checkbox-label,
	.MylistItemAddition-addedAt,
	.VideoMediaObject-bodyTitle,
	.VideoMediaObject-bodyDescription,
	.VideoMetaData-videoRegisteredAt,
	.VideoMetaData-count > *,
	.MylistPageSubMenuHeader-counterValue,
	.SortMylistsListItem-name,
	.ModalContent-footerSubmitButton,
	.MylistMediaObject-bodyFollowerCount,
	.MylistMediaObject-bodyDescription,
	.MylistMediaObject-bodyTitle,
	.VideoWatchHistoryContainer-headerTotalCountValue,
	.VideoWatchHistoryContainer-headerAnnounce,
	.LikeItemAfter-thanksMessage > h1,
	.BlankState-title,
	.a-list__title,
	.StampCard-title,
	.StampContainer-stampRanking a,
	.ExpandBoxButton,
	h1,
	.MylistHeader-name,
	.MylistHeader-metaItemValue,
	.CommunityItem-name,
	.CommunityItem-description,
	.FollowingTagContainer-tagNameLink,
	.FollowingTagContainer-nicodicSummary,
	a,
	.ChannelItem-description,
	.ChannelItem-name,
	.TagrepoItem-contentTagsItem,
	.TagrepoContainer-h...

Reviews

No reviews yet.