☰

掘金小册暗黑主题 (coderQ)

自己用的油猴脚本，如果也感兴趣这个暗黑主题

  1. // ==UserScript==
  2. // @name         掘金小册暗黑主题 (coderQ)
  3. // @namespace    http://tampermonkey.net/
  4. // @description  自己用的油猴脚本，如果也感兴趣这个暗黑主题
  5. // @author       PlayGuitar_Coder_Q
  6. // @match        https://juejin.cn/book/*
  7. // @icon         https://www.google.com/s2/favicons?sz=64&domain=greatest.deepsurf.us
  8. // @license      MIT
  9. // @grant        none
  10. // @grant        GM_addStyle
  11. // @version      2.0.1
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.  
  16.   const THEME_COLOR = {
  17.     font: '#fff !important',
  18.     main: '#007FFF !important',
  19.     dark: '#121212 !important',
  20.     tagDone: 'rgba(5,109,232,.1) !important',
  21.     tagFont: '#056dse8 !important',
  22.     tagUnfinished: '#558eff !important',
  23.     border: '#2e2e2e !important'
  24.   }
  25.  
  26.   const CSS_KEY = {
  27.     bg: 'background',
  28.     co: 'color',
  29.     fi: 'fill',
  30.     bo: 'border'
  31.   }
  32.  
  33.   // css 侵入
  34.   let css = `
  35.     .book-summary__header {
  36.       ${CSS_KEY.bg}: ${THEME_COLOR.dark};
  37.       ${CSS_KEY.bo}: 1px solid ${THEME_COLOR.dark};
  38.     }
  39.     .book-summary__header a path {
  40.       ${CSS_KEY.fi}: ${THEME_COLOR.main};
  41.     }
  42.  
  43.     .book-content__header {
  44.       ${CSS_KEY.bg}: ${THEME_COLOR.dark};
  45.       ${CSS_KEY.bo}: 1px solid ${THEME_COLOR.dark};
  46.     }
  47.     .book-content__header .title a {
  48.       ${CSS_KEY.co}: ${THEME_COLOR.font}
  49.     }
  50.     .book-body {
  51.       ${CSS_KEY.bg}: ${THEME_COLOR.dark}
  52.     }
  53.     .section-page {
  54.       ${CSS_KEY.bg}: ${THEME_COLOR.dark};
  55.     }
  56.     .markdown-body {
  57.       ${CSS_KEY.co}: ${THEME_COLOR.font}
  58.     }
  59.  
  60.     .book-directory-comp {
  61.       ${CSS_KEY.bg}: ${THEME_COLOR.dark}
  62.     }
  63.     .book-directory-comp .section-list .route-active .center .title .title-text {
  64.       ${CSS_KEY.co}: ${THEME_COLOR.main}
  65.     }
  66.     .book-directory-comp .section-list .section .title{
  67.       ${CSS_KEY.co}: ${THEME_COLOR.font}
  68.     }
  69.     .book-directory-comp .section-list .section .center .sub-line .label {
  70.       ${CSS_KEY.bg}: ${THEME_COLOR.tagDone};
  71.       ${CSS_KEY.co}: ${THEME_COLOR.tagFont};
  72.     }
  73.  
  74.     .book-summary {
  75.       border-right: 1px solid ${THEME_COLOR.border};
  76.     }
  77.     .book-summary__footer {
  78.       ${CSS_KEY.bg}: ${THEME_COLOR.dark}
  79.     }
  80.     .book-summary__footer .qr-icon path {
  81.       ${CSS_KEY.fi}: ${THEME_COLOR.main}
  82.     }
  83.  
  84.     .logo path {
  85.       fill: ${THEME_COLOR.main} !important;
  86.     }
  87.  
  88.     .qr-icon path {
  89.       fill: ${THEME_COLOR.main} !important;
  90.     }
  91.  
  92.     .auth-card .input-box {
  93.       ${CSS_KEY.bo}: 1px solid ${THEME_COLOR.border};
  94.     }
  95.     .auth-card .input-box .rich-input {
  96.       ${CSS_KEY.bg}: ${THEME_COLOR.dark};
  97.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  98.     }
  99.    .book-comments .form-box .action-box .submit .submit-btn {
  100.       ${CSS_KEY.bg}: ${THEME_COLOR.main};
  101.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  102.     }
  103.     .book-comments .container .comment-list-wrapper .title {
  104.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  105.     }
  106.     .content-box .subcomment-wrapper .sub-comment-list {
  107.       ${CSS_KEY.bg}: ${THEME_COLOR.dark};
  108.     }
  109.     .content-box .subcomment-wrapper .sub-comment-list .username .name {
  110.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  111.     }
  112.     .content-box .comment-main .user-box .popover-box .username .name {
  113.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  114.     }
  115.     .sub-comment-list .subcomment .content-box .content-wrapper .content {
  116.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  117.     }
  118.  
  119.     .content-box .comment-main .content {
  120.       ${CSS_KEY.co}: ${THEME_COLOR.font};
  121.     }
  122.   `;
  123.  
  124.   if (typeof GM_addStyle !== "undefined") {
  125.     GM_addStyle(css);
  126.   } else {
  127.     let styleNode = document.createElement("style");
  128.     styleNode.appendChild(document.createTextNode(css));
  129.     (document.querySelector("head") || document.documentElement).appendChild(
  130.       styleNode
  131.     );
  132.   }
  133. })();
  134.