📢おしらせ!

2023.08.01　ランダム表示していた上部バナーの画像置き場に使っていたサーバーが使えなくなってしまって、現在固定表示に...。（連番で画像ファイルが置ける場所がないか探し中...）
※モバイル用のページが表示されています！！！
モバイル用のページレイアウトはちゃんと確認していないので、もしPC版のページに切り替えたい場合はこちらをクリックしてください( ・ω・)9m.oO(またはURLの「?m=1」の部分を消してください)

2019年10月1日

ニコニコ動画にダークモードを適用する

2024.8.9 追記

公式がようやくダークモードに対応しました。詳細は以下のURLにて...(*˘ω˘)φ_


ってことで、ここからは古い情報...

//修正履歴
20.03.04　ところどころ修正...( ˘ω˘)φ_
20.03.06　タイムシフト予約時のウィンドウカラーの修正方法を追記(+'-')φ_
20.03.07　動画説明文が黒くて読めない不具合の修正方法を追記(+'-')φ_
20.03.09　ニコ生の放送予定の日時が見えない修正方法を追記(+'-')φ_
20.03.15　問題点６＆７、まとめを追記( ´ー`)φ_
20.07.27　いいね機能追加で白くなった部分などの修正(+'-')φ_
20.07.28　まとめのコードに追記...( ˘ω˘)φ_
20.07.29　問題点９を追記( ´Д`)φ_
20.08.04　「ニコる」されたコメントの修正...( ˘ω˘)φ_
20.08.25　問題点１０を追記(+'-')φ_
20.10.14　とぅいったーボタンを押した時のテキストがまた白くなったので修正。
21.02.02　いいねボタンやかんたんボタン回りが白くなったので修正。
21.03.17　ニコ生の仕様が変わってURLが変わったので、オプションのセクション-適用先のところで、URLを「https://live2～」から「https://live～」に修正する必要あり。
21.07.10　「niconico Darkmode」の紹介を追加。
21.10.16　「フルスクリーン時のUIをすこし改良する」追記...(+'-')φ_
22.01.31　「フルスクリーン時のUIをすこし改良する」修正...(+'-')φ_
23.09.01　「Stylus」追記...( ˘ω˘)φ_
23.09.01　「フルスクリーン時のUIをすこし改良する」修正...(+'-')φ_


niconico Darkmode

また微妙な仕様変更により、部分的に白いところが出るようになったので、少し前に見つけた「niconico Darkmode」というアドオンを入れてみましたんですけど、とてもいい感じだったので、もうこれでいいような気がしました！（ようやく修正しなくていいようになった！）

niconico Darkmode


更新停止したみたいです...。
niconico Darkmode の更新対応を終了します | ねころぐ


ニコニコほんとコロコロと仕様を変更するから、対応してられないのはわかりみ...。

Stylus

「Stylus」Webページのデザインをカスタマイズして見やすくできる拡張機能 - 窓の杜

ってことで、これがオススメ？（窓の杜からはなぜかβ版にもリンクされてるので注意）

Stylus - Chrome ウェブストア

これをインストールして、ニコニコ動画を開いている状態で『スタイルを検索』したら、ダークモードのスタイルを作っている人がいるカモしれない。

フルスクリーン時のUIをすこし改良する

別ページに記載することにしました！





※ここから先は古い情報...(*˘ω˘)φ_.oO(読まなくてヨシ!)

Stylish

Stylishは、2022年7月にCSSが編集できなくなる改悪アプデが実行されたみたいで、つまりカスタマイズできなくなりました...。

Website Themes & Skins by Stylish | Userstyles.org

上記ページの下部に、各ブラウザ用のリンクがある。

ニコニコ用テーマ

ニコニコ動画(く) ニコ生 ダークテーマ niconico Dark Theme | Userstyles.org

これがなかなかよい！


ところが・・・

ニコニコの仕様が変わったせいで、あちこち文字が見えなくなったりしている…。

カスタマイズする！


ここから


ここ

まとめ！

修正点がかなり増えてきた＆逐一書くのが面倒になってきた...

ので、纏めておいた( ´ー`)φ_

コード１の最後に

/* タイムシフト予約ウィンドウ Customize */
.___body___36fca { background-color: #333; }
.___program-information___1ehx7 { background-color: #444; }
.___list-view-button___2xsCy { color: #fff; background-color: #0080ff; }

/* タイムシフト予約 - 放送予定の日時 */
.___broadcast_time___39jwt { background-color: hsla(0,0%,100%,.2); }

/* コメント欄のタブ部分（20.07.28 更新） */
.___tab___1OVyJ {    /* タブ（コメント） */
    color: #e0e0e0;
    background-color: #555;
}
.___ng-setting-controller___2aA2S {    /* NG設定アイコン */
    background-color: #777;
    padding-top: 4px;
}
.___tab-area___3ACye { border-bottom: 2px solid #000; }
.___program-statistics-menu___NOQCW { border-bottom: 1px solid #000; }


/* ナビゲーションバーの位置が変になる不具合 
   510行目くらいの「[class^=___page-header-area] { order:-4; } の値を0にすると直る」 */

コード２の最後に

/* Twitter Textarea Customize */
.TwitterForm-textarea { color: #222222; height: 200px; }

/* コメントエリア */
.CommentPanelContainer .CommentPanelDataGrid { color: #aaa; }
.CommentPanelDataGrid .CommentPanelDataGrid-TableRow:hover { color: #fff; background: #0073e6; }    /* マウスオーバー時の色 */

/* 「ニコる」されたコメント */
.CommentPanelContainer [data-row-nicoru-rank="1"] { background: #001a33;  color: #eee; }
.CommentPanelContainer [data-row-nicoru-rank="2"] { background: #003366;  color: #eee; }
.CommentPanelContainer [data-row-nicoru-rank="3"] { background: #004d99;  color: #eee; }
.CommentPanelContainer [data-row-nicoru-rank="4"] { background: #0066cc;  color: #eee; }

/* 動画説明文 Customize */
.VideoDescriptionSeriesContainer-label { color: #abc; }    /* シリーズのフォント */

/* ニコニコ市場 Customize */
.IchibaForWatch { background: transparent; }
.IchibaForWatch_Title_Body { color: #cde; }
.IchibaMainItem_Thumbnail { border: 1px solid #333; }
.IchibaSuggest_Title { color: #cde; }
.IchibaSuggestItem { border: 1px solid #333; }



/* === いいね機能追加に対応（21.2.2 更新） === */

.ControllerBoxCommentAreaContainer { background: #111; }
.EasyCommentContainer { background-color: #111; }
.EasyCommentButton { background-color: #111;  border: 2px solid #333; color: #888; }
.EasyCommentButton:hover { background-color: #222;  border: 2px solid #777; }
.CommentPostContainer-commandInput { border: 2px solid #333; }
.CommentPostContainer-commentInput { border-top: 2px solid #333; border-bottom: 2px solid #333; }
.LikeActionButton {
    background: #222;
    border: 2px solid #333;
    color: #888;
}
.LikeActionButton:hover {
    background: #003366;
    border: 2px solid #0066cc;
}
.ControllerBoxCommentAreaContainer { border: 2px solid #000;}



/* === かんたんコメントのボタンのエリア（2021.2.2追記）=== */

/* かんたんコメントのボタンをマウスオーバーした時に出てくるちっこい丸 */
.EasyCommentButton-icon { fill: #222; }
.EasyCommentButton-iconWrapper { background-color: #888; }

/* 左右の△ボタン部分 */
.EasyCommentContainer-scrollButton:disabled svg { fill: #777; }
.EasyCommentContainer-scrollButton { background: #333; }

/* △の回りの□の線 */
.EasyCommentContainer-prevButton {
    border-top: 1px solid #555;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}

.EasyCommentContainer-nextButton {
    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-bottom: 1px solid #555;
}

/* ぼかし部分（幅狭時にスクロール可能を示す部分） */
.EasyCommentContainer-prevButtonBox { background: linear-gradient(270deg, hsla(0,0%,100%,0),hsla(0,0%,25%,.94), #555); }
.EasyCommentContainer-nextButtonBox { background: linear-gradient( 90deg, hsla(0,0%,100%,0),hsla(0,0%,25%,.94), #555); }



/* === フルスクリーン時の配置カスタマイズ（※幅1920pxのモニタに合わせて数値を決めてるので、合わない場合はカスタマイズを！） === */

/* コントローラ部（再生時間表示回り） */
body.is-fullscreen .ControllerContainer-area:nth-child(2) { left: 180px; position: absolute; }
body.is-fullscreen .ControllerContainer-area { padding-top: 4px; }
.ActionButton:enabled { z-index: 10; }    /* ウィンドウ幅を1920未満にするとボタンが隠れてしまうので仮処理 */

/* コメ入力フォーム */
.ControllerBoxCommentAreaContainer.is-fullscreen .ControllerBoxCommentAreaContainer-inner {
    max-width: 950px;
    margin-left: 460px;
}
.ControllerBoxCommentAreaContainer.is-fullscreen .ControllerBoxCommentAreaContainer-commentPostAndLikeArea {
    max-width: 950px;
    margin-top: -37px;   
}

/* コメントボタン */
.EasyCommentContainer.is-fullscreen {
    max-width: 300px;
    margin-top: -28px;
    margin-left: 950px;
}

/* チェックボックス */
.ControllerBoxCommentAreaContainer .ControllerBoxCommentAreaContainer-fixFullscreenCheckbox {color: #777; margin-top: -9px; }
.Checkbox .Checkbox-check:before { border: 2px solid #555; background: #222; }



/* === 動画情報編集中の部分（投稿者用） === */

.DataGrid-HeaderTable { color: #FFF; }


問題点１

とぅいったーボタンを押した時のテキストが白になってるので見えない...！

カスタマイズめも

コード２の最後に、

/* Twitter Textarea Customize */
.TwitterForm-textarea {
    color: #222222;
    height: 200px;
}

と入れて保存ボタン押せばよい。

「height: 200px」は、テキストエリアが小さすぎて不便と思ってる人は、いれたら良いかと😉

問題点３

タイムシフト予約の画面の文字が真っ白になる（gateのページが無くなって放送ページに直接飛ばされるようになったせいで）。

これは読めん…！

不便なので、そのうちなんとかしたい...。
てか、ダークテーマの更新しないのかなぁ...🙄

追記

コード２の最後に、

/* タイムシフト予約ウィンドウ Customize */
.___body___36fca {
    background-color: #333;
}

.___program-information___1ehx7 {
    background-color: #444;
}

.___list-view-button___2xsCy {
    color: #fff;   
    background-color: #0080ff;
}

と記述すればよい。

こんな感じになる。

問題点４

動画説明文の文字が黒くて読めない部分がある。

コード１の最後に、

/* 動画説明文 Customize */
.VideoDescription-html span {
    color: rgba(255, 255, 255, 0.87) !important; 
}

問題点５

ニコ生の放送予定の日時が見えない（タイムシフト予約画面）

左上んとこ

コード１の最後に、 

/* タイムシフト予約 - 放送予定の日時 */
.___broadcast_time___39jwt {
    background-color: hsla(0,0%,100%,.2);
}

問題点６

「シリーズ」の文字が見えない。

コード２の最後に、

.VideoDescriptionSeriesContainer-label {
    color: #abc;
}

問題点７

ニコニコ市場の背景が白くて眩しい。

コード２の最後に、

/* ニコニコ市場 Customize */
.IchibaForWatch { background: transparent; }
.IchibaForWatch_Title_Body { color: #cde; }
.IchibaMainItem_Thumbnail { border: 1px solid #333; }
.IchibaSuggest_Title { color: #cde; }
.IchibaSuggestItem { border: 1px solid #333; }

問題点８

20.07.27 に「いいね機能」が追加されたけど、その部分が白い...。

...(;´∀`)

こんな感じに(σ'-')σ

問題点９

フルスクリーンで「コントローラーを常に表示」をオンにしているとき、いいねボタンが下にきたせいで動画部分が小さくなってる上に無駄なスペースが気になる...。

せめて２行分に収めて欲しい感...(´Д`)

無理やり格納してみた。

ちなみに、フルＨＤのモニタ用にカスタマイズしたので、それ以外のモニターの人は適当に数値を変更してみたらよいと思います😉

問題点１０

(Re) になった時に、ナビゲーションバーの位置が変になる不具合が発生したけど、510行目くらいの [class^=___page-header-area] { order:-4; } の値を0にするか、行ごと削除すると直る。


カラーコードを調べる






解決したやつ

問題点２

↓スタイルが更新されたからなのか消しても大丈夫になった。
「ニコる」が押されてるコメントが白くなってしまい読めない。

カスタマイズめも

コード２の14行目に

 
.CommentPanelDataGrid .CommentPanelDataGrid-TableRow:hover { background: #252525; }


という記述があるので、これを 


.CommentPanelDataGrid .CommentPanelDataGrid-TableRow { background: #252525; }
.CommentPanelDataGrid .CommentPanelDataGrid-TableRow:hover { background: #555555; }


とすると読めるようになる。


ただ、「ニコる」されてるコメントの色も統一されてしまう。まぁ読めないよりかは良いので、これでいいとした( ´ー`)y-

ヽ(´ー`)ノ