☰

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.5
// @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://gf.qytechs.cn/vite/assets/blacklogo96-CxYTSM_T.png
// @match          *gf.qytechs.cn/*
// @match          *sleazyfork.org/*
// @grant          GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Variables (you can customize these)
    const headerBkg = 'rgb(29, 32, 37)';
    const dark1 = 'rgb(29, 32, 37)';
    const dark2 = 'rgb(40, 44, 52)';
    const dark3 = 'rgb(37, 41, 49)';
    const dark4 = 'rgb(33, 36, 43)';
    const blue1 = 'rgb(82, 139, 255)';
    const blue2 = 'rgb(97, 175, 239)';
    const bluePool = 'rgb(86, 182, 194)';
    const lavender = 'rgb(198, 120, 221)';
    const green = 'rgb(152, 195, 121)';
    const pink = 'rgb(224, 108, 117)';
    const lightBrown = 'rgb(209, 154, 102)';
    const red = 'rgb(190, 80, 70)';
    const yellow = 'rgb(235, 215, 17)';
    const lightYellow = 'rgb(229, 192, 123)';
    const blueIce = 'rgb(171, 178, 191)';
    const lightGray = 'rgb(204, 204, 204)';
    const lightGreen = 'rgba(130, 255, 130, 0.6)';
    const lightRed = 'rgba(255, 130, 130, 0.6)';
    const translucent = 'rgba(255, 255, 255, .3)';
    const black = 'rgba(0, 0, 0, 1)';
    const dBorderRadius = '5px 0 100px 1px';
    const wrapCode = false; // Set to true to wrap code in container
    const modHeaders = true; // Set to true to apply to headers
    const invertBkgHPP = false; // Set to true to invert background color for Greasyfork++ header
    const modScrollbars = true; // Set to true to apply to scrollbars

    // CSS styles
    const css = `
    :root {
      --dark-1: ${dark1} !important;
      --dark-2: ${dark2} !important;
      --dark-3: ${dark3} !important;
      --dark-4: ${dark4} !important;
      --blue-1: ${blue1} !important;
      --blue-2: ${blue2} !important;
      --blue-pool: ${bluePool} !important;
      --lavender: ${lavender} !important;
      --green: ${green} !important;
      --pink:  ${pink} !important;
      --light-brown: ${lightBrown} !important;
      --red: ${red} !important;
      --yellow: ${yellow} !important;
      --light-yellow: ${lightYellow} !important;
      --blue-ice: ${blueIce} !important;
      --light-gray: ${lightGray} !important;
      --light-green: ${lightGreen} !important;
      --light-red: ${lightRed} !important;
      --translucent: ${translucent} !important;
      --black: ${black} !important;
      --default-border-radius: ${dBorderRadius} !important;
    }
    .bradius {
      border-radius: var(--default-border-radius);
    }
    body {
      background-color: var(--dark-3) !important;
      color: var(--light-gray) !important;
    }
    #main-header,
    #main-header a,
    #main-header a:visited,
    #main-header a:active {
      color: var(--light-gray) !important;
    }
    nav nav {
      background-color: var(--dark-3) !important;
      border: 1px solid var(--dark-2) !important;
      box-shadow: 0 0 5px var(--dark-2) !important;
    }
    a:not(.install-link, .install-help-link) {
      color: var(--pink) !important;
    }
    #main-header {
      ${modHeaders ? 'background-image: none !important;' : ''}
      background-color: ${headerBkg} !important;
    }
    .script-list,
    .user-list,
    .text-content,
    .discussion-list,
    .list-option-group ul,
    #script-info,
    .discussion-read,
    #discussion-locale{
      ${modHeaders ? 'background-image: unset !important;' : ''}
      background-color: var(--dark-1) !important;
      box-shadow: 0 0 5px var(--dark-2) !important;
      border: 1px solid var(--dark-2) !important;
      border-radius: var(--default-border-radius) !important;
    }
    .block-button {
      background-color: var(--dark-2) !important;
      border: 1px solid var(--dark-3) !important;
      color: var(--light-gray) !important;
    }
    .user-content,
    #script_version_code {
      background-image: unset !important;
      background-color: var(--dark-1) !important;
      border-color: var(--dark-2) !important;
    }
    .code-container {
      border-color: var(--dark-3) !important;
      border-style: solid !important;
    }
    pre.prettyprint {
      border: none !important;
    }
    #script_version_code {
      color: var(--light-gray) !important;
    }
    .default-input,
    .sidebar-search input[type="search"],
    .home-search input[type="search"],
    .list-option-button,
    input[type="search"],
    #language-selector-locale,
    form.new_user input[type="text"],
    form.new_user input[type="email"],
    form.new_user input[type="password"],
    #favorite-groups {
      background-color: var(--dark-4) !important;
      border: 1px solid var(--dark-2) !important;
      color: var(--blue-ice) !important;
      border-radius: var(--default-border-radius) !important;
    }
    .notice {
      background-color: var(--dark-1);
      border-left: 6px solid var(--blue-pool);
    }
    form.external-login-form,
    form.new_user {
      background-color: var(--dark-3);
      border: 1px solid var(--dark-2);
    }
    form.new_user input[type="submit"] {
      background-color: var(--blue-pool);
      color: #fff;
      background-image: unset;
    }
    .list-option-button:hover,
    .list-option-button:focus {
      background-image: unset !important;
      background-color: var(--dark-2) !important;
    }
    .sidebar-search input[type="search"]:focus-visible,
    .home-search input[type="search"]:focus-visible {
      background-color: var(--dark-3) !important;
      border: 1px solid var(--blue-pool) !important;
      outline: none !important;
    }
    input[type="submit"] {
      background-color: var(--dark-3) !important;
      color: var(--light-gray) !important;
      border: 1px solid var(--dark-2) !important;
    }
    input[type="submit"]:hover {
      background-color: var(--dark-2) !important;
    }
    .sidebar-search input[type="search"] {
      font-size: 14px !important;
    }
    .list-option-group ul {
      background-color: var(--dark-1) !important;
    }
    .list-option-group .list-current,
    .tabs .current {
      border-color: var(--red) !important;
      background-image: unset !important;
      background-color: var(--dark-2) !important;
    }
    .list-option-group a:hover,
    .list-option-group a:focus {
      background-image: unset !important;
      background-color: var(--dark-2) !important;
      box-shadow: unset !important;
    }
    input[type="checkbox"] {
      accent-color: var(--blue-1) !important;
    }
    input[type="radio"] {
      accent-color: var(--blue-1) !important;
    }
    .script-list li:not(.ad-entry) {
      border: 1px solid var(--dark-3)
    }
    .pagination > *,
    .script-list + .pagination > *,
    .user-list + .pagination > * {
      background-color: var(--dark-2) !important;
    }
    .pagination .current,
    .pagination .gap {
      background-color: transparent !important;
    }
    a.next_page,
    .pagination a:not(.current) {
      color: var(--red) !important;
    }
    .previewable textarea,
    #discussion_comments_attributes_0_text {
      background-color: var(--dark-2) !important;
      border: 1px solid var(--dark-3) !important;
      color: var(--light-gray) !important;
    }
    #discussion_comments_attributes_0_text:focus-visible {
      outline: none !important;
      border: 1px solid var(--dark-3) !important;
    }
    .rating-icon {
      background-color: var(--dark-3) !important;
    }
    .rating-icon-bad,
    .bad-rating-count {
      color: var(--red) !important;
      border-color: currentColor !important;
    }
    .rating-icon-ok,
    .ok-rating-count {
      color: var(--yellow) !important;
      border-color: currentColor !important;
    }
    .rating-icon-good,
    .good-rating-count {
      color: var(--green) !important;
      border-color: currentColor !important;
    }
    pre:not(pre.prettyprint),
    code {
      border: 1px solid var(--dark-2) !important;
    }
    code {
      background-color: var(--dark-1) !important;
    }
    li.L1,
    li.L3,
    li.L5,
    li.L7,
    li.L9 {
      background-color: var(--dark-3) !important;
    }
    .diff li.unchanged:nth-child(odd) {
      background-color: var(--dark-3) !important;
    }
    .diff ul {
      background-color: var(--dark-1) !important;
    }
    .diff li.del {
      background: var(--light-red) !important;
      color: rgb(30, 0, 0) !important;
    }
    .diff li.ins {
      background: var(--light-green) !important;
      color: rgb(0, 30, 5) !important;
    }
    .diff li:hover {
      background: unset;
    }
    .com {
      color: var(--lavender) !important;
    }
    .clo,
    .opn,
    .pun {
      color: var(--yellow) !important;
    }
    .kwd {
      color: var(--blue-2) !important;
    }
    .str {
      color: var(--green) !important;
    }
    .pln {
      color: var(--light-yellow) !important;
    }
    .lit {
      color: var(--pink) !important;
    }
    .typ {
      color: var(--blue-pool) !important;
    }
    ol.linenums {
      padding-left: 55px !important
    }
    ${modScrollbars ? `
      .code-container, select {
        &::-webkit-scrollbar {
          width: 8px !important;
          height: 8px !important;
        }
      }
      ::-webkit-scrollbar-track {
        background: alpha(black, .2) !important;
      }
      ::-webkit-scrollbar-thumb {
        background: alpha(var(--translucent), .2) !important;
        border-radius: var(--default-border-radius) !important;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: alpha(var(--translucent), .3) !important;
      }
      ::-webkit-scrollbar-corner {
        background: alpha(black, .2) !important;
      }
      ::-webkit-scrollbar-button {
        display: none !important;
      }
    ` : ''}
    .validation-errors {
      border-color: var(--light-yellow) !important;
      background-color: var(--dark-3) !important;
    }
    html:has(body#greasyfork-plus) {
      background: var(--dark-1) !important;
      body, #greasyfork-plus_wrapper {
        background: var(--dark-1) !important;
      }
      #greasyfork-plus_wrapper {
        border: none !important;
      }
      button[id^="greasyfork-plus"] {
        background: var(--dark-4) !important;
        border: 1px solid var(--dark-2) !important;
        color: var(--blue-ice) !important;
        border-radius: var(--default-border-radius);
      }
      input, textarea {
        margin-block: 5px !important;
        background-color: var(--dark-4) !important;
        border: 1px solid var(--dark-2) !important;
        color: var(--blue-ice) !important;
        border-radius: var(--default-border-radius) !important;
      }
      .section_header.center {
        background-image: unset !important;
        background-color: var(--dark-3) !important;
        border-radius: var(--default-border-radius);
      }
      b {
        color: var(--lavender) !important;
      }
    }
    .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item {
      display: inline-block !important;
      width: 100% !important;
      min-width: 189px !important;
      max-width: 189px !important;
    }
    .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:before {
      content: attr(datetime) !important;
      clip-path: inset(0px 125px 0px 0px) !important;
      position: absolute !important;
      display: inline-block !important;
      height: 100% !important;
      min-height: 20px !important;
      max-height: 20px !important;
      line-height: 20px !important;
      width: 201px !important;
      margin: 1px 0 0 2px !important;
      padding: 0 2px 0 0 !important;
      letter-spacing: 1.4px !important;
      font-size: 12px !important;
      visibility: visible !important;
      opacity: 1 !important;
      text-align: left !important;
      color: red !important;
      background: #111 !important;
    }
    @supports (contain:paint) {
      .post-discussion .script-discussion-list .discussion-list-container .discussion-meta > .discussion-meta-item:first-of-type > relative-time:before,
      .post-discussion .script-discussion-list .discussion-list-container .discussion-meta > .discussion-meta-item:last-of-type .discussion-meta-item> relative-time:before,
      #script-meta dd.script-show-updated-date > span relative-time:before,
      #script-meta dd.script-show-created-date > span relative-time:before,
      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item + .comment-meta-item > relative-time:before,
      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item + .comment-meta-item > relative-time:after,
      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:before {
        display: none !important;
      }
      .comment-meta-item.comment-meta-item-main + .comment-meta-item + .comment-meta-item > relative-time:after {
        content: attr(datetime)!important;
        clip-path: inset(0px 98px 0px 114px) !important;
        display: none !important;
      }
    }
    `;

    // Apply the CSS
    GM_addStyle(css);
   })();

QingJ © 2025

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