為 Greasyfork 打造的時尚現代暗黑主題，增強了視覺效果和可讀性。
目前為
// ==UserScript==
// @name Greasyfork Dark Theme
// @name:en Greasyfork Dark Theme
// @name:vi Giao diện tối Greasyfork
// @name:zh-CN Greasyfork 暗黑主题
// @name:zh-TW Greasyfork 暗黑主題
// @name:ja Greasyfork ダークテーマ
// @name:ko Greasyfork 다크 테마
// @name:es Tema Oscuro Greasyfork
// @name:ru Темная тема Greasyfork
// @name:id Tema Gelap Greasyfork
// @name:hi Greasyfork डार्क थीम
// @namespace http://tampermonkey.net/
// @version 1.3.0
// @description A sleek and modern dark theme for Greasyfork, with enhanced visuals and readability.
// @description:en A sleek and modern dark theme for Greasyfork, with enhanced visuals and readability.
// @description:vi Giao diện tối hiện đại cho Greasyfork, với hình ảnh và khả năng đọc được cải thiện.
// @description:zh-CN 为 Greasyfork 打造的时尚现代暗黑主题，增强了视觉效果和可读性。
// @description:zh-TW 為 Greasyfork 打造的時尚現代暗黑主題，增強了視覺效果和可讀性。
// @description:ja Greasyfork の洗練されたモダンなダークテーマ。視覚効果と可読性が向上しました。
// @description:ko Greasyfork를 위한 세련되고 현대적인 다크 테마로, 향상된 시각 효과와 가독성을 제공합니다.
// @description:es Un tema oscuro elegante y moderno para Greasyfork, con imágenes y legibilidad mejoradas.
// @description:ru Изящная и современная темная тема для Greasyfork с улучшенными визуальными эффектами и удобочитаемостью.
// @description:id Tema gelap yang ramping dan modern untuk Greasyfork, dengan visual dan keterbacaan yang ditingkatkan.
// @description:hi Greasyfork के लिए एक आकर्षक और आधुनिक डार्क थीम, जिसमें बेहतर विजुअल और पठनीयता है।
// @author RenjiYuusei
// @license GPL-3.0-only
// @icon https://greasyfork.org/vite/assets/blacklogo96-CxYTSM_T.png
// @match *greasyfork.org/*
// @match *sleazyfork.org/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
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;
}
}
/* New styles */
.install-link, .install-link:visited, .install-link:active,
.install-help-link, .install-help-link:visited, .install-help-link:active {
background-color: var(--blue-pool) !important;
color: var(--dark-1) !important;
border: none !important;
border-radius: var(--default-border-radius) !important;
transition: background-color 0.3s ease !important;
}
.install-link:hover, .install-help-link:hover {
background-color: var(--blue-2) !important;
}
.script-author a {
color: var(--light-yellow) !important;
}
.script-list-author {
color: var(--blue-ice) !important;
}
.script-list li:hover {
background-color: var(--dark-2) !important;
transition: background-color 0.3s ease !important;
}
table {
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid var(--dark-2) !important;
border-radius: var(--default-border-radius) !important;
overflow: hidden !important;
}
th, td {
border: 1px solid var(--dark-2) !important;
padding: 8px !important;
}
th {
background-color: var(--dark-2) !important;
color: var(--light-gray) !important;
}
tr:nth-child(even) {
background-color: var(--dark-3) !important;
}
tr:hover {
background-color: var(--dark-4) !important;
}
.script-list-current {
border-left: 3px solid var(--blue-pool) !important;
}
.discussion-header {
background-color: var(--dark-2) !important;
border-bottom: 1px solid var(--dark-3) !important;
}
.discussion-more-link {
background-color: var(--dark-3) !important;
border: 1px solid var(--dark-2) !important;
color: var(--blue-ice) !important;
border-radius: var(--default-border-radius) !important;
transition: background-color 0.3s ease !important;
}
.discussion-more-link:hover {
background-color: var(--dark-2) !important;
}
.select-all-link {
color: var(--blue-pool) !important;
}
.script-list-label {
background-color: var(--dark-3) !important;
color: var(--light-gray) !important;
border: 1px solid var(--dark-2) !important;
border-radius: var(--default-border-radius) !important;
}
#script-content {
border: 1px solid var(--dark-2) !important;
border-radius: var(--default-border-radius) !important;
padding: 15px !important;
}
.script-meta-block {
background-color: var(--dark-2) !important;
border: 1px solid var(--dark-3) !important;
border-radius: var(--default-border-radius) !important;
padding: 10px !important;
margin-bottom: 15px !important;
}
.script-meta-block h3 {
color: var(--blue-pool) !important;
border-bottom: 1px solid var(--dark-3) !important;
padding-bottom: 5px !important;
margin-bottom: 10px !important;
}
.script-meta-block ul {
list-style-type: none !important;
padding-left: 0 !important;
}
.script-meta-block li {
margin-bottom: 5px !important;
}
.form-control textarea, .form-control select {
background-color: var(--dark-4) !important;
color: var(--light-gray) !important;
border: 1px solid var(--dark-2) !important;
border-radius: var(--default-border-radius) !important;
}
.form-control textarea:focus, .form-control select:focus {
border-color: var(--blue-pool) !important;
outline: none !important;
}
.form-submit {
background-color: var(--blue-pool) !important;
color: var(--dark-1) !important;
border: none !important;
border-radius: var(--default-border-radius) !important;
padding: 8px 15px !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
}
.form-submit:hover {
background-color: var(--blue-2) !important;
}
`;
// Apply the CSS
GM_addStyle(css);
})();