// ==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://greasyfork.org/vite/assets/blacklogo96-CxYTSM_T.png
// @match *greasyfork.org/*
// @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);
})();
