☰

Webnovel - Dark Theme

A dark theme for Webnovel/Qidian International

  1. /* ==UserStyle==
  2. @name           Webnovel - Dark Theme
  3. @namespace      ew0345
  4. @version        1.0.9
  5. @description    A dark theme for Webnovel/Qidian International
  6. @author         ew0345
  7. ==/UserStyle== */
  8.  
  9. /***
  10.     * CHANGELOG *
  11.  
  12.     Version 1.0.9:
  13.         Book page styled.
  14.  
  15.     Version 1.0.8:
  16.         Library & History pages styled.
  17.  
  18.     Version 1.0.7:
  19.         Settings/Edit profile page styled.
  20.  
  21.     Version 1.0.6:
  22.         Badges page styled.
  23.         Profile page styled.
  24.         "Limited Free For You" section on homepage styled.
  25.  
  26.     Version 1.0.5:
  27.         Rankings page styled.
  28.  
  29.     Version 1.0.4:
  30.         Browse/category page styled.
  31.  
  32.     Version 1.0.3:
  33.         Login pop-up & login w/ email pop-up styled.
  34.  
  35.     Version 1.0.2:
  36.         Header search styled.
  37.  
  38.     Version 1.0.1:
  39.         Header bar styled.
  40.  
  41.     Version 1.0.0:
  42.         Main page/homepage styled.
  43. ***/
  44.  
  45.  
  46. @-moz-document domain("webnovel.com") {
  47.     /* Variables */
  48.     :root {
  49.         --bg: #232323;
  50.         --bg_dark: #1f1f1f;
  51.         --bg_light: #303030;
  52.         --bg_light_hover: rgba(100,100,100,0.5);
  53.         --bg_selected: #3b66f5;
  54.         
  55.         --txt: #eee;
  56.         --txt_dark: #aaa;
  57.         --txt_genre: #83848f;
  58.         --txt_title: lightslategray;
  59.         --txt_lcol1: #eb1551;
  60.         --txt_lcol2: #ff8d29;
  61.         --txt_lcol3: #39cca0;
  62.     }
  63. }
  64.  
  65.  
  66. @-moz-document domain("passport.webnovel.com") {
  67.     /* Sign-in/passport */
  68.     html,
  69.     body div {
  70.         background: var(--bg);
  71.     }
  72.     
  73.     .m-main-hd h3 {
  74.         color: var(--txt_title);
  75.     }
  76.     
  77.     p.m-input input {
  78.         color: var(--txt);
  79.     }
  80. }
  81. @-moz-document regexp("http(s)://(www.)webnovel.com/(#*)"), regexp("http(s)://(www.)webnovel.com/category/.*"), regexp("http(s)://(www.)webnovel.com/ranking/.*"), regexp("http(s)://(www.)webnovel.com/profile/.*"), regexp("http(s)://(www.)webnovel.com/badges"), regexp("http(s)://(www.)webnovel.com/settings"), regexp("http(s)://(www.)webnovel.com/library(.*)"), regexp("http(s)://(www.)webnovel.com/history(.*)"), regexp("http(s)://(www.)webnovel.com/book/.*") {
  82.     /* Header Bar */
  83.     .g_header {
  84.         background-color: var(--bg);
  85.         border-bottom-color: var(--txt_title);
  86.     }
  87.     
  88.     .g_header .g_search svg,
  89.     .g_header .g_search strong {
  90.         color: var(--txt_title);
  91.     }
  92.     
  93.     .g_header .g_hd_link svg,
  94.     .g_header .g_hd_link strong {
  95.         color: var(--txt_title);
  96.     }
  97.     
  98.     /* Header Bar - Search */
  99.     
  100.     .g_search_modal .g_search_header,
  101.     .g_search_modal .g_search_header .g_search_input input {
  102.         background-color: var(--bg_dark);
  103.     }
  104.     
  105.     .g_search_modal .g_search_header .g_search_input input {
  106.         border-color: var(--txt_title);
  107.         color: var(--txt_title);
  108.     }
  109.     
  110.     .g_search_panel,
  111.     .g_search_result_list ul {
  112.         background-color: var(--bg_dark);
  113.     }
  114.     
  115.     .g_search_pop_list a,
  116.     .g_search_result_list a,
  117.     .g_search_result_list svg,
  118.     .j_search_history a {
  119.         color: var(--txt) !important;
  120.     }
  121.     
  122.     .g_search_pop_list a:hover,
  123.     .g_search_result_list a:hover {
  124.         background: var(--bg_light_hover);
  125.     }
  126.     
  127.     .j_search_history .g_search_tags a {
  128.         background-color: var(--bg_light);
  129.     }
  130. }
  131.  
  132.  
  133. @-moz-document regexp("http(s)://(www.)webnovel.com/(#*)") {
  134.     /* Main Page */
  135.     
  136.     /* Page Body */
  137.     html,
  138.     body {
  139.         background: var(--bg_dark);
  140.         color: var(--txt);
  141.     }
  142.     
  143.     /* Weekly Book */
  144.     div[data-report-blocktitle="Weekly Book"] h3 {
  145.         color: var(--txt_title);
  146.     }
  147.     
  148.     /* Recent Activities */
  149.     div[data-report-blocktitle="Recent Activities"] h3 {
  150.         color: var(--txt_title);
  151.     }
  152.     
  153.     div[data-report-blocktitle="Recent Activities"] ul :hover {
  154.         /*background: var(--bg_light_hover);*/
  155.         background: none;
  156.     }
  157.     
  158.     div[data-report-blocktitle="Recent Activities"] ul :hover h4 {
  159.         color: var(--txt_dark) !important;
  160.     }
  161.     
  162.     div[data-report-blocktitle="Recent Activities"] p {
  163.         color: var(--txt_dark) !important;
  164.     }
  165.     
  166.     /* Weekly Featured */
  167.     div[data-report-blocktitle="Weekly Featured"] h3,
  168.     section[data-report-blocktitle="Weekly Featured"] h4, 
  169.     section[data-report-blocktitle="Weekly Featured"] h4 a {
  170.         color: var(--txt_title);
  171.     }
  172.     
  173.     .m-book3 {
  174.         background-color: var(--bg);
  175.     }
  176.     
  177.     /* Limited Free For You */
  178.     div[data-report-blocktitle="Limited Free For You"] h3,
  179.     div[data-report-blocktitle="Limited Free For You"] h3 a {
  180.         color: var(--txt_title);
  181.     }
  182.     
  183.     /* Special For You */
  184.     div[data-report-blocktitle="Special For You"] h3,
  185.     div[data-report-blocktitle="Special For You"] h3 a {
  186.         color: var(--txt_title);
  187.     }
  188.     
  189.     /* Ranking */
  190.     div[data-report-blocktitle="Ranking"] h3,
  191.     div[data-report-blocktitle="Ranking"] h5 a {
  192.         color: var(--txt_title);
  193.     }
  194.     
  195.     div[data-report-blocktitle="Ranking"] p a {
  196.         color: var(--txt_genre);
  197.     }
  198.     
  199.     div[data-report-blocktitle="Ranking"] .c_danger {
  200.         color: #eb1551 !important;
  201.     }
  202.     
  203.     div[data-report-blocktitle="Ranking"] .c_warning {
  204.         color: #ff8d29 !important;
  205.     }
  206.     
  207.     div[data-report-blocktitle="Ranking"] .c_success {
  208.         color: #39cca0 !important;
  209.     }
  210.     
  211.     div[data-report-blocktitle="Ranking"] .ff_number {
  212.         color: var(--txt);
  213.     }
  214.     
  215.     /* New Ongoing Release */
  216.     section[data-report-blocktitle="New Ongoing Release"] {
  217.         background: var(--bg_dark);
  218.     }
  219.     
  220.     section[data-report-blocktitle="New Ongoing Release"] h3,
  221.     section[data-report-blocktitle="New Ongoing Release"] h4 a {
  222.         color: var(--txt_title);
  223.     }
  224.     
  225.     /* Potential Starlet */
  226.     div[data-report-blocktitle="Potential Starlet"] h3,
  227.     div[data-report-blocktitle="Potential Starlet"] h3 a{
  228.         color: var(--txt_title);
  229.     }
  230.     
  231.     div[data-report-blocktitle="Potential Starlet"] .bc_light_default {
  232.         background: var(--bg);
  233.     }
  234.     
  235.     /* New Tropes */
  236.     div[data-report-blocktitle="New Tropes"] h3,
  237.     div[data-report-blocktitle="New Tropes"] h3 a{
  238.         color: var(--txt_title);
  239.     }
  240.     
  241.     div[data-report-blocktitle="New Trops"] p a {
  242.         color: var(--txt_genre);
  243.     }
  244.     
  245.     /* Encouraging Novels */
  246.     section[data-report-blocktitle="Encouraging Novels"] {
  247.         background: var(--bg_dark);
  248.     }
  249.     
  250.     section[data-report-blocktitle="Encouraging Novels"] h3,
  251.     section[data-report-blocktitle="Encouraging Novels"] h4 a {
  252.         color: var(--txt_title);
  253.     }
  254.     
  255.     /* Completed */
  256.     div[data-report-blocktitle="Completed"] h3,
  257.     div[data-report-blocktitle="Completed"] h3 a {
  258.         color: var(--txt_title);
  259.     }
  260.     
  261.     div[data-report-blocktitle="Completed"] .bc_light_default {
  262.         background: var(--bg);
  263.     }
  264.     
  265.     /* Promising Novels */
  266.     div[data-report-blocktitle="Promising Novels"] h3,
  267.     div[data-report-blocktitle="Promising Novels"] h3 a {
  268.         color: var(--txt_title);
  269.     }
  270.     
  271.     div[data-report-blocktitle="Promising Novels"] p a {
  272.         color: var(--txt_genre);
  273.     }
  274.     
  275.     /* Trending Original */
  276.     div[data-report-blocktitle="Trending Original"] h3,
  277.     div[data-report-blocktitle="Trending Original"] h4 a {
  278.         color: var(--txt_title);
  279.     }
  280.     
  281.     /* Potential Entrant */
  282.     section[data-report-blocktitle="Potential Entrant"] h3,
  283.     section[data-report-blocktitle="Potential Entrant"] h4 a {
  284.         color: var(--txt_title);
  285.     }
  286.     
  287.     section[data-report-blocktitle="Potential Entrant"] p a {
  288.         color: var(--txt_genre);
  289.     }
  290.     
  291.     section[data-report-blocktitle="Potential Entrant"] {
  292.         background: var(--bg_dark);
  293.     }
  294. }
  295.  
  296. @-moz-document regexp("http(s)://(www.)webnovel.com/category/.*") {
  297.     /* Browse Page */
  298.     
  299.     /* Page body */
  300.     html,
  301.     body {
  302.         background-color: var(--bg_dark);
  303.         color: var(--txt);
  304.     }
  305.     
  306.     /* Headers */
  307.     h3,
  308.     .j_filter_form h4 {
  309.         color: var(--txt_title);
  310.     }
  311.     
  312.     /* Genre List */
  313.     .m-switch {
  314.         background-color: var(--bg_light);
  315.     }
  316.     .m-switch label {
  317.         color: var(--txt_genre);
  318.     }
  319.     
  320.     .m-switch-0:checked ~ .m-switch label:first-child,
  321.     .m-switch-1:checked ~ .m-switch label:not(:first-child) {
  322.         background-color: var(--bg_selected);
  323.         color: var(--txt);
  324.     }
  325.     
  326.     .m-accordion-bd li a {
  327.         color: var(--txt_genre);
  328.     }
  329.     
  330.     .m-accordion-icon {
  331.         color: var(--txt);
  332.     }
  333.     
  334.     /* Novel List */
  335.     .j_category_wrapper h3 a {
  336.         color: var(--txt_title);
  337.     }
  338.     
  339.     .j_category_wrapper p,
  340.     .j_category_wrapper p strong {
  341.         color: var(--txt_genre)
  342.     }
  343. }
  344.  
  345. @-moz-document regexp("http(s)://(www.)webnovel.com/ranking/.*") {
  346.     /* Rankings Pages */
  347.     
  348.     /* Page body */
  349.     html,
  350.     body {
  351.         background-color: var(--bg_dark);
  352.         color: var(--txt);
  353.     }
  354.     
  355.     /* Headers */
  356.     h3,
  357.     .g_hr h4 {
  358.         color: var(--txt_title);
  359.     }
  360.     
  361.     /* Genre List */
  362.     .m-accordion-bd a {
  363.         color: var(--txt_genre);
  364.     }
  365.     
  366.     .m-accordion-icon {
  367.         color: var(--txt);
  368.     }
  369.     
  370.     /* Ranking List */
  371.     .f1 h5 {
  372.         color: var(--txt_genre);
  373.     }
  374.     
  375.     .m-release-item strong,
  376.     .j_show_filter_sel strong,
  377.     .j_show_filter_sel svg {
  378.         color: var(--txt);
  379.     }
  380.     
  381.     .j_rank_wrapper i.c_danger {
  382.         color: var(--txt_lcol1) !important;
  383.     }
  384.     
  385.     .j_rank_wrapper i.c_warning {
  386.         color: var(--txt_lcol2) !important;
  387.     }
  388.     
  389.     .j_rank_wrapper i.c_success {
  390.         color: var(--txt_lcol3) !important;
  391.     }
  392.     
  393.     .j_rank_wrapper .ff_number.tac {
  394.         color: var(--txt);
  395.     }
  396.     
  397.     .j_rank_wrapper h3 a {
  398.         color: var(--txt_title)
  399.     }
  400.     
  401.     .j_rank_wrapper .vam {
  402.         color: var(--txt_genre);
  403.     }
  404.     
  405.     /* Other Filters dropdown */
  406.     .j_show_filter_container {
  407.         background: var(--bg_light);
  408.     }
  409.     
  410.     .j_show_filter_container legend {
  411.         color: var(--txt_genre);
  412.     }
  413. }
  414.  
  415. @-moz-document regexp("http(s)://(www.)webnovel.com/profile/.*") {
  416.     /* Profile page */
  417.     
  418.     /* Page body */
  419.     html,
  420.     body,
  421.     .header {
  422.         background-color: var(--bg_dark);
  423.         color: var(--txt);
  424.     }
  425.     
  426.     .g_wrap p {
  427.         color: var(--txt);
  428.     }
  429.     
  430.     address svg, 
  431.     address strong {
  432.         color: var(--txt_genre);
  433.     }
  434. }
  435.  
  436. @-moz-document regexp("http(s)://(www.)webnovel.com/badges") {
  437.     /* Badges Page */
  438.     
  439.     /* Page body */
  440.     html,
  441.     body,
  442.     .g_sub_hd {
  443.         background: var(--bg_dark);
  444.         color: var(--txt);
  445.     }
  446. }
  447.  
  448. @-moz-document regexp("http(s)://(www.)webnovel.com/settings") {
  449.     /* Settings/Edit Profile Page */
  450.     
  451.     /* Page body */
  452.     html,
  453.     body,
  454.     .header {
  455.         background: var(--bg_dark);
  456.         color: var(--txt);
  457.     }
  458.     
  459.     #settingForm .g_row label,
  460.     #settingForm .g_row strong {
  461.         color: var(--txt);
  462.     }
  463.     
  464.     .fc_sel strong {
  465.         color: black !important;
  466.     }
  467. }
  468.  
  469. @-moz-document regexp("http(s)://(www.)webnovel.com/library(.*)") {
  470.     /* Library Page */
  471.     
  472.     /* Page body */
  473.     html,
  474.     body,
  475.     .g_sub_hd {
  476.         background: var(--bg_dark);
  477.     }
  478.     
  479.     h2,
  480.     h3 {
  481.         color: var(--txt_title);
  482.     }
  483.     
  484.     a._on[title="Library"] {
  485.         color: var(--txt) !important;
  486.     }
  487.     
  488.     a[title="History"]:hover {
  489.         color: var(--txt_genre) !important;
  490.     }
  491. }
  492.  
  493. @-moz-document regexp("http(s)://(www.)webnovel.com/history(.*)") {
  494.     /* History Page */
  495.     
  496.     /* Page body */
  497.     html,
  498.     body,
  499.     .g_sub_hd {
  500.         background: var(--bg_dark);
  501.     }
  502.     
  503.     h2 {
  504.         color: var(--txt_title);
  505.     }
  506.     
  507.     a._on[title="History"] {
  508.         color: var(--txt) !important;
  509.     }
  510.     
  511.     a[title="Library"] {
  512.         color: var(--txt_genre) !important;
  513.     }
  514.     
  515.     .g_col h3 a {
  516.         color: var(--txt_title);
  517.     }
  518.     
  519.     .g_star_num small {
  520.         color: var(--txt_genre);
  521.     }
  522.     
  523.     .g_tags a,
  524.     ._oprate a {
  525.         color: var(--bg_selected) !important;
  526.     }
  527.     
  528.     .g_col a {
  529.         color: var(--txt_genre);
  530.     }
  531. }
  532.  
  533. @-moz-document regexp("http(s)://(www.)webnovel.com/book/.*") {
  534.     /* Book Page */
  535.     
  536.     /* Page Body */
  537.     body,
  538.     .page div {
  539.         background: var(--bg_dark);
  540.         color: var(--txt);
  541.     }
  542.     
  543.     /* Book Info */
  544.     .det-hd .c_000 {
  545.         color: var(--txt_genre);
  546.     }
  547.     
  548.     .det-info h2 {
  549.         color: var(--txt_title);
  550.     }
  551.     
  552.     .det-hd-detail a,
  553.     .det-hd-detail strong {
  554.         color: var(--txt_genre);
  555.     }
  556.     .det-hd address span {
  557.         color: var(--bg_selected);
  558.     }
  559.     
  560.     /* About | Table of Contents Bar */
  561.     .det-tab-nav ._on span {
  562.         color: var(--bg_selected) !important;
  563.     }
  564.     
  565.     /* About */
  566.     #about p.c_000 {
  567.         color: var(--txt);
  568.     }
  569.     
  570.     /* Table of Contents */
  571.     #contents li {
  572.         background: var(--bg_dark);
  573.     }
  574.     #contents li i {
  575.         color: var(--bg_selected);
  576.     }
  577.     #contents li strong {
  578.         color: var(--txt);
  579.     }
  580.     
  581.     /* You may also like */
  582.     .j_books_you_also_like .m-book-title h3 {
  583.         color: var(--txt_title);
  584.     }
  585.     .j_books_you_also_like .g_star_num small {
  586.         color: var(--txt_dark);
  587.     }
  588.     
  589.     /* Reviews */
  590.     #review .g_star_num small {
  591.         color: var(--txt_dark);
  592.     }
  593.     #review .g_tab_nav ._on {
  594.         color: var(--bg_selected);
  595.     }
  596.     .m-comment-tool {
  597.         color: var(--txt_dark);
  598.     }
  599.     .m-comment-ft strong {
  600.         color: var(--txt_dark);
  601.     }
  602.     #pagination .ui-page-x a,
  603.     #pagination .ui-page-x .ui-page-ellipsis {
  604.         color: var(--txt_dark);
  605.     }
  606.     #pagination .ui-page-x .ui-page-prev,
  607.     #pagination .ui-page-x .ui-page-next {
  608.         color: var(--txt);
  609.     }
  610.     
  611.     /* Leave a review */
  612.     #reviewModal .rev-modal-score-list strong {
  613.         color: var(--bg_selected)
  614.     }
  615.     #reviewModal textarea {
  616.         color: var(--txt);
  617.     }
  618.     #reviewModal .btn_rich_modal {
  619.         color: var(--txt)
  620.     }
  621.     #reviewModal .rich_modal_footer strong {
  622.         color: var(--txt);
  623.     }
  624.     
  625.     /* Review Replies */
  626.     #replyDetailModal div {
  627.         background: var(--bg);
  628.         color: var(--txt);
  629.     }
  630.     #replyDetailModal blockquote {
  631.         background: var(--bg_light);
  632.         color: var(--txt);
  633.     }
  634.     #replyDetailModal .g_mod_chat_ft input {
  635.         background: var(--bg);
  636.         color: var(--txt);
  637.     }
  638.     
  639.     /* Review Replies - Add a Comment */
  640.     .rich_modal .g_mod {
  641.         background: var(--bg);
  642.     }
  643.     .rich_modal .g_mod h4 {
  644.         color: var(--txt)
  645.     }
  646.     .rich_modal .g_mod .modal_quote,
  647.     .rich_modal .g_mod .modal_quote div {
  648.         background: var(--bg_light);
  649.         color: var(--txt);
  650.     }
  651.     .rich_modal .g_mod textarea {
  652.         background: var(--bg_light);
  653.         color: var(--txt) !important;
  654.     }
  655.     .rich_modal .g_mod .btn_rich_modal {
  656.         color: var(--txt);
  657.     }
  658.     
  659.     /* Usernames */
  660.     .fans-list a strong,
  661.     .m-comment-hd h3 a {
  662.         color: var(--txt);
  663.     }
  664. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址