A dark theme for the Picrew image maker.

picrew_dark.user.css

/* ==UserStyle==
@name           Picrew Dark
@namespace      com.github.enbika.picrew
@version        1.1.0
@description    A dark theme for the Picrew image maker.
@author         Erika
@homepageURL    https://gist.github.com/consoleSkunk/b7851eb1df7e7c9984a7d781a9961658
@updateURL      https://gist.githubusercontent.com/consoleSkunk/b7851eb1df7e7c9984a7d781a9961658/raw/picrew_dark.user.css
@license        CC-BY-SA-4.0
==/UserStyle== */

@-moz-document url-prefix("https://picrew.me/image_maker/"), url-prefix("https://picrew.me/en/image_maker/"), url-prefix("https://picrew.me/ja/image_maker/"), url-prefix("https://picrew.me/share") {
    body {
      background-color: #111;
      color: #FFF;
    }
    
    .st-Related_ImagemakerList ul a .st-Related_ImagemakerList_Title {
        color: #FFF;
    }
    
    .st-Header_Wrapper .st-Header .open .menu__line {
        background-color: #FFF;
    }
    
    .vm--modal .close-dialog {
        color: #FFF;
    }

    .imagemaker_info_wrapper .imagemaker_info_header, .imagemaker_info_footer, .imagemaker_parts_menu {
        background-color: #333;
    }
    
    .imagemaker_itemlist, .imagemaker_info_body, .imagemaker_colorBox, .imagemaker_controller, .imagemaker_random_menu,
    .complete-Main, .complete-Share_Wrapper, .share-Main, .st-Related_Wrapper .st-Related_Body, .st-Related_Tags .st-Related_Tag a,
    .vm--modal, .st-Header_Wrapper .st-Header .open .sp-nav {
        background-color: #222;
    }
    .st-Footer_Wrapper {
        background-color: #222;
    }
    .st-Footer .st-Footer_Links_bottom {
        background-color: #333;
    }
    
    .share-Main_Link a, .complete-Share_Wrapper, .complete-ShareText textarea {
        border-color: #555
    }
        
    .imagemaker_info_show_btn,
    .imagemaker_ctrl_btns .btn_show_colorpalette,
    .imagemaker_ctrl_btns .btn_show_itemlist,
    .imagemaker_ctrl_btns .btn_show_controller,
    .imagemaker_controller_reset,
    .complete-ShareText textarea,
    .c_select select,
    .st-Header_Wrapper .st-Header .sp-nav .sidemenu-Box .c_btn {
        background-color: #444;
        color: #FFF
    }
    
    .imagemaker_info_wrapper .imagemaker_info_use_range li > div {
        background-color: #222;
        color: #FFF;
        border-color: #de4040;
    }
    
    .imagemaker_info_wrapper .imagemaker_info_use_range li > div:before {
        color: #de4040;
    }
    
    .imagemaker_info_wrapper .imagemaker_info_use_range li.is_can > div {
        background-color: #222;
        color: #FFF;
        border-color: #a8de40;
    }
    
    .imagemaker_ctrl_btns .disabled::after {
        background-color: rgba(255,255,255,0.6) !important;
    }

    .imagemaker_controller button,
    .control_position_wrapper .ctrlbtn_position_inner:before,
    .control_position_wrapper .ctrlbtn_position_inner:after {
        background-color: #333;
    }
    
    .imagemaker_parts_menu, .imagemaker_itemlist, .imagemaker_info_body {
       scrollbar-color: rgba(255,202,25,0.5) rgba(0,0,0,0.5);
    }
    
    .view_pc .imagemaker_parts_menu::-webkit-scrollbar-thumb {
       background-color: rgba(0,0,0,0.5)
    }

    .imagemaker_parts_menu ul li.active, .imagemaker_parts_menu ul li.selected {
        background-color: #444;
    }
    .imagemaker_parts_menu ul, .imagemaker_parts_menu ul li {
        height: 100%;
    }
    
    .imagemaker_colorBox ul li {
        border-color: #333
    }
    
    .imagemaker_colorBox ul li.active, .imagemaker_colorBox ul li.selected {
        border-color: #333;
        box-shadow: inset 0 0 0 3px #333,inset 0 0 1px 4px rgba(0,0,0,.2);
    }
    
    .imagemaker_colorBox ul li.emptycolor {
        border-color: #333;
        background-color: #333 !important;
        background-image:
        linear-gradient(-45deg,transparent,transparent 49%,red 0,red 54%,transparent 0,transparent),
        linear-gradient(45deg, #222 25%, transparent 25%,transparent 75%, #222 75%, #222 100%),
        linear-gradient(45deg, #222 25%, transparent 25%,transparent 75%, #222 75%, #222 100%) !important;
        background-size:32px 32px;
        background-position:0 0, 0 0, 16px 16px;
    }

    .imagemaker_itemlist li, .imagemaker_canvas_wrapper, .imagemaker_info_header_wrapper {
        background-color: #333 !important;
        background-image:
        linear-gradient(45deg, #222 25%, transparent 25%,transparent 75%, #222 75%, #222 100%),
        linear-gradient(45deg, #222 25%, transparent 25%,transparent 75%, #222 75%, #222 100%) !important;
        background-size:33px 33px;
        background-position:0 0, 16px 16px;
    }
    
    .image_maker_main .pace.pace-active, .randommaker_main .pace.pace-active {
        background-color: rgba(0,0,0,.5);

    }
    
    .imagemaker_info_wrapper .imagemaker_info_btn_help, .main_footer_wrapper, .complete-Btn_Back {
        color: #333;
    }
}