Skip to content

WIP ニコニコ静画ダークテーマ(現在マンガ閲覧ページのみ) by watanuki-azuma

Screenshot of WIP ニコニコ静画ダークテーマ(現在マンガ閲覧ページのみ)

Details

Authorwatanuki-azuma

LicenseCC-BY-NC-SA 4.0

Categoryseiga.nicovideo.jp

Created

Updated

Size9.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

ニコニコ静画のダークテーマ化を目指しているなにかです。だいぶやっつけです。というか途中でデータ飛びました。
ダークテーマ化されているのは共通ヘッダーを除き現在はマンガ閲覧ページのみです。
段階的に対応していく予定です。たぶん。

--使用上の注意--

Stylusエディタの仕様上、編集画面を開くと構文エラーがあるかのように表示されますが無視してください。

2022-01-12追記
モチベがかなり低いので気長に待っていてください…

Notes

2022-01-12-Snapshot Stylus言語に置き換えました。
202108172218-snapshot マンガ閲覧ページだけ機能します。

Source code

/* ==UserStyle==
@name           ニコニコ静画ダークテーマ
@namespace      seiga.nicovideo.jp
@version        2022-01-12-Snapshot
@description    Niconico Seiga Darktheme
@author         Azuma
@preprocessor	stylus
@license	CC-BY-NC-SA 4.0


@var select EnableDarkSeiga "静画ダークテーマ"[
    "Enable",
    "Disable"    
]

==/UserStyle== */

@-moz-document url-prefix("https://seiga.nicovideo.jp/") {

    nicocolor = #252525;
    subbgcolor = #303030;
    barbg = #303030;
    sub2bg = #3c3c3c;
    fontcolor = #ddd;
    bordercolor = #6b6b6b; 
    invert90 = invert(90%);
    invert80 = invert(80%);

    :root{

        if EnableDarkSeiga == "Disable"{
            .none{
                none
            }
        }
        else if EnableDarkSeiga == "Enable"{
            // remove ads 
	        .watch_bottom_ads,div[id^="ads"]{
		        display:none;
	        }
	
	        // 共通ヘッダー
	        #header.header_mode{
		        filter: @invert90;
		        background:#f0f0f0 url(/img/common/navi/bg_global_sub.png?201210171522) repeat-x left bottom;
		        div.sg_global_bar ul.sg_pankuzu li{
			    filter:@invert90;
		        }
	        }
	        .sg_pankuzu li a{
		        color:@fontcolor;
	        }
	        #sg_global_navi li a, #sg_global_navi li span{
		        filter:invert()
	        }
	        #sg_global_navi li a.active:hover{
		        filter:invert(100%);
		        opacity:0.9;
	        }
	
	        // 共通バータイトル
	        .box .bar_title{
		        background: @barbg !important;
	        }
	        .bar_title h2,
	        .favorite_box .favorite_box_inner .manga_item .latest_episode span{
		        color: @fontcolor !important;
	        }
	
	
	        // seiga top



            // author info area
            .watch_head_bar .inner .manga_info{
                background-color:subbgcolor;
            }
            .watch_head_bar .inner .manga_info .manga_info_title h2,
            .watch_head_bar .inner .manga_info dl dd.manga_title a,
            .watch_head_bar .inner .manga_info dl dd.user_name .caption,
            .related_info .manga_info dl dd.user_box .user_name .suffix,
            .related_info .manga_info dl dd.user_box .user_name .caption,
            .related_info .manga_info .favorite_count,
            .related_info .manga_info .favorite_count strong{
                color:fontcolor
            }
            
            .related_info .manga_info dl dd.user_box .user_message,
            .related_info .manga_info .favorite_count{
                background-color:subbgcolor
            }
            .related_info .manga_info .favorite_count{
                border-color:bordercolor
            }
            
            // watch main area
            .watch_head_bar,
            .episode_control_bar,
            .player.vertical,
            .watch_bottom{
                background: nicocolor;
            }
            .episode_control_bar{
                border-color:bordercolor
            }
            
            .watch_head_bar .inner .inner_content .description.open .close_button:hover,.watch_head_bar .inner .inner_content .description .open_button:hover{
                background: subbgcolor !important;
                color: fontcolor;
            }
            
            #footer,
            .pankuzu{
                background-color:#1f1f1f;
            }
            .pankuzu{
                border-color:bordercolor;
            }
            #detail{
                margin-bottom: 0px;
                padding-top: 10px;
                background-color: nicocolor;
            }
            #full_pankuzu > div.pankuzu > div > ul.sg_pankuzu > li > a[itemprop="url"],.sg_pankuzu .active{
                color: fontcolor
            }
            
            // 謎のバー
            .content_list_head_bar{
                background-color: rgba(116, 116, 116, .90)
            }
            .content_list_head_bar .inner .title h1 .manga_title,
            .content_list_head_bar .inner .title h1 .episode_title{
                color: fontcolor;
                font-size:120%;
                font-weight:400;
            }
            .content_list_head_bar .tag_open_button{
                color: fontcolor;
                &:hover{
                    background: rgba(50, 50, 50, .89);
                }
            }
            
            .content_list_head_bar .inner .content_list_head_nav li.manga_page,
            .content_list_head_bar .inner .content_list_head_nav li.manga_page .active{
                color: fontcolor;
            }
            .content_list_head_bar .switch{
                filter:invert90;
                mix-blend-mode:difference;
            }
            .content_list_head_bar .manga_tag .tag a{
                filter:invert();
                color:#fff;
                font-size:93%;
                font-weight:600;
                background-color:#171717;
                border-radius:10px;
                border:1px solid #bbb;
            }
            
            //comment area 
            .controls .inner .spread_hide .comment_list{
                background-color: subbgcolor;
                color: fontcolor;
                border-color:bordercolor
            }
            .controls .inner .spread_hide .comment_list .comment_list_item{
                border-color:bordercolor
            }
        
            
            // tag
            .tag{
                filter:invert80
            }
            .icon_disable_dic{
                filter:invert();
            }
            .illust_tag .tag_edit_link, .manga_tag .tag_edit_link{
                color:fontcolor
            }
            
            // box 
            .box .more_link{
                background-color: sub2bg;
                border-color: bordercolor
            }
            .box{
                background-color: sub2bg;
            }
            
            // feedback area 
            .watch_bottom .related_info .sub_info_side .feedback{
                background-color: sub2bg;
            }
            
            .watch_bottom .related_info .sub_info_side .feedback ul li .btn_feedback{
                background: sub2bg !important;
                border-color: bordercolor;
                color: fontcolor;
                border-radius:10px;
                box-shadow:none !important;
                
                &:hover{
                    background: nicocolor !important;
                    color: fontcolor;
                    box-shadow:none !important;
                }
            }
            .watch_bottom .related_info .sub_info_side .feedback p{
                color:fontcolor;
            }
            
            // episode navi button 
            .content_list > .after_player > .episode_navigation > .episodes > a{
                background: sub2bg !important;
                box-shadow:none !important;
                border-color: bordercolor;
                &:hover{
                    background: nicocolor !important
                }
            }
            .content_list > .after_player > .episode_navigation > .episodes > .next .info_box .next_text,
            .content_list > .after_player > .episode_navigation > .episodes > .prev > .prev_text{
                color: fontcolor;
            }
            .content_list > .after_player > .episode_navigation > .episodes > a .title{
                color:orange;
            }
            
            // shere button 
            .social_block .share{
                background-color:sub2bg;
                border-radius:30px;
            }
            .social_block .share > .social_ui .shorten input{
                background-color:subbgcolor;
                box-shadow:none !important;
                color: fontcolor;
                font-family:Meiryo, sans-serif;
                border-color: bordercolor;
            }
            
            // font color
            body,
            .watch_head_bar .inner .inner_content .title h1 .episode_title,
            .watch_head_bar .inner .inner_content .description,
            .regulations .notice .message,
            .regulations .regulation .block span,
            .watch_head_bar .inner .inner_content .other_info li,
            .episode_control_bar .episode_control_bar_inner .episode_navigator a{
                color: fontcolor
            }
        
            .watch_head_bar .inner .inner_content .description .full .close_schedule_announce {
                color: orange
            }
            //link 
            a{
                color:orange
            }
            a:hover{
                color: darkorange
            }
            a:visited{
                color: #a15900;
            }
        }
    }

}

Reviews

No reviews yet.