A sleek and modern dark theme for Greasyfork, designed for optimal readability and a visually appealing experience.
Från och med
// ==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://greatest.deepsurf.us/vite/assets/blacklogo96-CxYTSM_T.png
// @match *greatest.deepsurf.us/*
// @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 ');