Greasyfork 夜间模式

为 Greasyfork 打造的时尚现代暗黑主题,旨在提供最佳可读性和视觉吸引力。

目前为 2024-08-14 提交的版本。查看 最新版本

// ==UserScript==
// @name           Greasyfork Night Mode
// @name:en        Greasyfork Night Mode
// @name:vi        Chế độ ban đêm Greasyfork
// @name:zh-CN     Greasyfork 夜间模式
// @name:zh-TW     Greasyfork 夜間模式
// @name:ja        Greasyfork ナイトモード
// @name:ko        Greasyfork 야간 모드
// @name:es        Modo Nocturno Greasyfork
// @name:ru        Ночной режим Greasyfork
// @name:id        Mode Malam Greasyfork
// @name:hi        Greasyfork रात्रि मोड
// @namespace      http://tampermonkey.net/
// @version        1.2.4
// @description    A sleek and modern dark theme for Greasyfork, designed for optimal readability and a visually appealing experience.
// @description:en A sleek and modern dark theme for Greasyfork, designed for optimal readability and a visually appealing experience.
// @description:vi Giao diện tối hiện đại cho Greasyfork, được thiết kế để dễ đọc và trải nghiệm đẹp mắt.
// @description:zh-CN 为 Greasyfork 打造的时尚现代暗黑主题,旨在提供最佳可读性和视觉吸引力。
// @description:zh-TW 為 Greasyfork 打造的時尚現代夜間模式,旨在提供最佳可讀性和視覺吸引力。
// @description:ja Greasyfork の洗練されたモダンなダークテーマ。読みやすさと視覚的な魅力を最適化しました。
// @description:ko Greasyfork를 위한 세련되고 현대적인 다크 테마로, 최적의 가독성과 시각적으로 매력적인 경험을 제공하도록 설계되었습니다.
// @description:es Un tema oscuro elegante y moderno para Greasyfork, diseñado para una legibilidad óptima y una experiencia visualmente atractiva.
// @description:ru Изящная и современная темная тема для Greasyfork, разработанная для оптимальной читаемости и визуально привлекательного восприятия.
// @description:id Tema gelap yang ramping dan modern untuk Greasyfork, dirancang untuk keterbacaan optimal dan pengalaman yang menarik secara visual.
// @description:hi Greasyfork के लिए एक आकर्षक और आधुनिक डार्क थीम, जिसे बेहतरीन पठनीयता और एक आकर्षक दृश्य अनुभव के लिए डिज़ाइन किया गया है।
// @author         Jann
// @license        MIT
// @icon           https://greasyfork.org/vite/assets/blacklogo96-CxYTSM_T.png
// @match          *greasyfork.org/*
// @match          *sleazyfork.org/*
// @grant          GM_addStyle
// ==/UserScript==
GM_addStyle('\n    :root {\n      --dark-1: rgb(29, 32, 37) !important;\n      --dark-2: rgb(40, 44, 52) !important;\n      --dark-3: rgb(37, 41, 49) !important;\n      --dark-4: rgb(33, 36, 43) !important;\n      --blue-1: rgb(82, 139, 255) !important;\n      --blue-2: rgb(97, 175, 239) !important;\n      --blue-pool: rgb(86, 182, 194) !important;\n      --lavender: rgb(198, 120, 221) !important;\n      --green: rgb(152, 195, 121) !important;\n      --pink:  rgb(224, 108, 117) !important;\n      --light-brown: rgb(209, 154, 102) !important;\n      --red: rgb(190, 80, 70) !important;\n      --yellow: rgb(235, 215, 17) !important;\n      --light-yellow: rgb(229, 192, 123) !important;\n      --blue-ice: rgb(171, 178, 191) !important;\n      --light-gray: rgb(204, 204, 204) !important;\n      --light-green: rgba(130, 255, 130, 0.6) !important;\n      --light-red: rgba(255, 130, 130, 0.6) !important;\n      --translucent: rgba(255, 255, 255, .3) !important;\n      --black: rgba(0, 0, 0, 1) !important;\n      --default-border-radius: 5px 0 100px 1px !important;\n    }\n    .bradius {\n      border-radius: var(--default-border-radius);\n    }\n    body {\n      background-color: var(--dark-3) !important;\n      color: var(--light-gray) !important;\n    }\n    #main-header,\n    #main-header a,\n    #main-header a:visited,\n    #main-header a:active {\n      color: var(--light-gray) !important;\n    }\n    nav nav {\n      background-color: var(--dark-3) !important;\n      border: 1px solid var(--dark-2) !important;\n      box-shadow: 0 0 5px var(--dark-2) !important;\n    }\n    a:not(.install-link, .install-help-link) {\n      color: var(--pink) !important;\n    }\n    #main-header {\n      background-image: none !important;\n      background-color: rgb(29, 32, 37) !important;\n    }\n    .script-list,\n    .user-list,\n    .text-content,\n    .discussion-list,\n    .list-option-group ul,\n    #script-info,\n    .discussion-read,\n    #discussion-locale{\n      background-image: unset !important;\n      background-color: var(--dark-1) !important;\n      box-shadow: 0 0 5px var(--dark-2) !important;\n      border: 1px solid var(--dark-2) !important;\n      border-radius: var(--default-border-radius) !important;\n    }\n    .block-button {\n      background-color: var(--dark-2) !important;\n      border: 1px solid var(--dark-3) !important;\n      color: var(--light-gray) !important;\n    }\n    .user-content,\n    #script_version_code {\n      background-image: unset !important;\n      background-color: var(--dark-1) !important;\n      border-color: var(--dark-2) !important;\n    }\n    .code-container {\n      border-color: var(--dark-3) !important;\n      border-style: solid !important;\n    }\n    pre.prettyprint {\n      border: none !important;\n    }\n    #script_version_code {\n      color: var(--light-gray) !important;\n    }\n    .default-input,\n    .sidebar-search input[type="search"],\n    .home-search input[type="search"],\n    .list-option-button,\n    input[type="search"],\n    #language-selector-locale,\n    form.new_user input[type="text"],\n    form.new_user input[type="email"],\n    form.new_user input[type="password"],\n    #favorite-groups {\n      background-color: var(--dark-4) !important;\n      border: 1px solid var(--dark-2) !important;\n      color: var(--blue-ice) !important;\n      border-radius: var(--default-border-radius) !important;\n    }\n    .notice {\n      background-color: var(--dark-1);\n      border-left: 6px solid var(--blue-pool);\n    }\n    form.external-login-form,\n    form.new_user {\n      background-color: var(--dark-3);\n      border: 1px solid var(--dark-2);\n    }\n    form.new_user input[type="submit"] {\n      background-color: var(--blue-pool);\n      color: #fff;\n      background-image: unset;\n    }\n    .list-option-button:hover,\n    .list-option-button:focus {\n      background-image: unset !important;\n      background-color: var(--dark-2) !important;\n    }\n    .sidebar-search input[type="search"]:focus-visible,\n    .home-search input[type="search"]:focus-visible {\n      background-color: var(--dark-3) !important;\n      border: 1px solid var(--blue-pool) !important;\n      outline: none !important;\n    }\n    input[type="submit"] {\n      background-color: var(--dark-3) !important;\n      color: var(--light-gray) !important;\n      border: 1px solid var(--dark-2) !important;\n    }\n    input[type="submit"]:hover {\n      background-color: var(--dark-2) !important;\n    }\n    .sidebar-search input[type="search"] {\n      font-size: 14px !important;\n    }\n    .list-option-group ul {\n      background-color: var(--dark-1) !important;\n    }\n    .list-option-group .list-current,\n    .tabs .current {\n      border-color: var(--red) !important;\n      background-image: unset !important;\n      background-color: var(--dark-2) !important;\n    }\n    .list-option-group a:hover,\n    .list-option-group a:focus {\n      background-image: unset !important;\n      background-color: var(--dark-2) !important;\n      box-shadow: unset !important;\n    }\n    input[type="checkbox"] {\n      accent-color: var(--blue-1) !important;\n    }\n    input[type="radio"] {\n      accent-color: var(--blue-1) !important;\n    }\n    .script-list li:not(.ad-entry) {\n      border: 1px solid var(--dark-3)\n    }\n    .pagination > *,\n    .script-list + .pagination > *,\n    .user-list + .pagination > * {\n      background-color: var(--dark-2) !important;\n    }\n    .pagination .current,\n    .pagination .gap {\n      background-color: transparent !important;\n    }\n    a.next_page,\n    .pagination a:not(.current) {\n      color: var(--red) !important;\n    }\n    .previewable textarea,\n    #discussion_comments_attributes_0_text {\n      background-color: var(--dark-2) !important;\n      border: 1px solid var(--dark-3) !important;\n      color: var(--light-gray) !important;\n    }\n    #discussion_comments_attributes_0_text:focus-visible {\n      outline: none !important;\n      border: 1px solid var(--dark-3) !important;\n    }\n    .rating-icon {\n      background-color: var(--dark-3) !important;\n    }\n    .rating-icon-bad,\n    .bad-rating-count {\n      color: var(--red) !important;\n      border-color: currentColor !important;\n    }\n    .rating-icon-ok,\n    .ok-rating-count {\n      color: var(--yellow) !important;\n      border-color: currentColor !important;\n    }\n    .rating-icon-good,\n    .good-rating-count {\n      color: var(--green) !important;\n      border-color: currentColor !important;\n    }\n    pre:not(pre.prettyprint),\n    code {\n      border: 1px solid var(--dark-2) !important;\n    }\n    code {\n      background-color: var(--dark-1) !important;\n    }\n    li.L1,\n    li.L3,\n    li.L5,\n    li.L7,\n    li.L9 {\n      background-color: var(--dark-3) !important;\n    }\n    .diff li.unchanged:nth-child(odd) {\n      background-color: var(--dark-3) !important;\n    }\n    .diff ul {\n      background-color: var(--dark-1) !important;\n    }\n    .diff li.del {\n      background: var(--light-red) !important;\n      color: rgb(30, 0, 0) !important;\n    }\n    .diff li.ins {\n      background: var(--light-green) !important;\n      color: rgb(0, 30, 5) !important;\n    }\n    .diff li:hover {\n      background: unset;\n    }\n    .com {\n      color: var(--lavender) !important;\n    }\n    .clo,\n    .opn,\n    .pun {\n      color: var(--yellow) !important;\n    }\n    .kwd {\n      color: var(--blue-2) !important;\n    }\n    .str {\n      color: var(--green) !important;\n    }\n    .pln {\n      color: var(--light-yellow) !important;\n    }\n    .lit {\n      color: var(--pink) !important;\n    }\n    .typ {\n      color: var(--blue-pool) !important;\n    }\n    ol.linenums {\n      padding-left: 55px !important\n    }\n    \n      .code-container, select {\n        &::-webkit-scrollbar {\n          width: 8px !important;\n          height: 8px !important;\n        }\n      }\n      ::-webkit-scrollbar-track {\n        background: alpha(black, .2) !important;\n      }\n      ::-webkit-scrollbar-thumb {\n        background: alpha(var(--translucent), .2) !important;\n        border-radius: var(--default-border-radius) !important;\n      }\n      ::-webkit-scrollbar-thumb:hover {\n        background: alpha(var(--translucent), .3) !important;\n      }\n      ::-webkit-scrollbar-corner {\n        background: alpha(black, .2) !important;\n      }\n      ::-webkit-scrollbar-button {\n        display: none !important;\n      }\n    \n    .validation-errors {\n      border-color: var(--light-yellow) !important;\n      background-color: var(--dark-3) !important;\n    }\n    html:has(body#greasyfork-plus) {\n      background: var(--dark-1) !important;\n      body, #greasyfork-plus_wrapper {\n        background: var(--dark-1) !important;\n      }\n      #greasyfork-plus_wrapper {\n        border: none !important;\n      }\n      button[id^="greasyfork-plus"] {\n        background: var(--dark-4) !important;\n        border: 1px solid var(--dark-2) !important;\n        color: var(--blue-ice) !important;\n        border-radius: var(--default-border-radius);\n      }\n      input, textarea {\n        margin-block: 5px !important;\n        background-color: var(--dark-4) !important;\n        border: 1px solid var(--dark-2) !important;\n        color: var(--blue-ice) !important;\n        border-radius: var(--default-border-radius) !important;\n      }\n      .section_header.center {\n        background-image: unset !important;\n        background-color: var(--dark-3) !important;\n        border-radius: var(--default-border-radius);\n      }\n      b {\n        color: var(--lavender) !important;\n      }\n    }\n    .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item {\n      display: inline-block !important;\n      width: 100% !important;\n      min-width: 189px !important;\n      max-width: 189px !important;\n    }\n    .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:before {\n      content: attr(datetime) !important;\n      clip-path: inset(0px 125px 0px 0px) !important;\n      position: absolute !important;\n      display: inline-block !important;\n      height: 100% !important;\n      min-height: 20px !important;\n      max-height: 20px !important;\n      line-height: 20px !important;\n      width: 201px !important;\n      margin: 1px 0 0 2px !important;\n      padding: 0 2px 0 0 !important;\n      letter-spacing: 1.4px !important;\n      font-size: 12px !important;\n      visibility: visible !important;\n      opacity: 1 !important;\n      text-align: left !important;\n      color: red !important;\n      background: #111 !important;\n    }\n    @supports (contain:paint) {\n      .post-discussion .script-discussion-list .discussion-list-container .discussion-meta > .discussion-meta-item:first-of-type > relative-time:before,\n      .post-discussion .script-discussion-list .discussion-list-container .discussion-meta > .discussion-meta-item:last-of-type .discussion-meta-item> relative-time:before,\n      #script-meta dd.script-show-updated-date > span relative-time:before,\n      #script-meta dd.script-show-created-date > span relative-time:before,\n      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item + .comment-meta-item > relative-time:before,\n      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item + .comment-meta-item > relative-time:after,\n      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:before {\n        display: none !important;\n      }\n      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:after {\n        content: attr(datetime)!important;\n        clip-path: inset(0px 98px 0px 114px) !important;\n        display: none !important;\n      }\n    }\n    ');