A sleek and modern dark theme for Greasyfork.
اعتبارا من
// ==UserScript==
// @name Greasyfork Dark Theme
// @name:en Greasyfork Dark Theme
// @name:vi Giao diện chủ đề tối Greasyfork
// @name:zh-CN Greasyfork 暗黑主题
// @name:zh-TW Greasyfork 暗黑主題
// @name:ja Greasyfork ダークテーマ
// @name:ko Greasyfork 다크 테마
// @name:es Greasyfork 테마 어두움
// @name:ru Темная тема Greasyfork
// @name:id Tema Gelap Greasyfork
// @name:hi Greasyfork डार्क थीम
// @namespace http://tampermonkey.net/
// @version 1.7.6
// @description A sleek and modern dark theme for Greasyfork.
// @description:en A sleek and modern dark theme for Greasyfork.
// @description:vi Giao diện chủ đề tối cho Greasyfork.
// @description:zh-CN 为 Greasyfork 打造的时尚现代暗黑主题。
// @description:zh-TW 為 Greasyfork 打造的時尚現代暗黑主題。
// @description:ja Greasyfork の洗練されたモダンなダークテーマ。
// @description:ko Greasyfork를 위한 세련되고 현대적인 다크 테마。
// @description:es Un tema oscuro elegante y moderno para Greasyfork.
// @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://greatest.deepsurf.us/vite/assets/blacklogo96-CxYTSM_T.png
// @match https://greatest.deepsurf.us/*
// @match https://sleazyfork.org/*
// @grant GM_addStyle
// ==/UserScript==
(() => {
'use strict';
// Định nghĩa biến màu và cấu hình
const colors = {
header: 'rgb(43, 43, 43)',
dark: {
1: 'rgb(43, 43, 43)',
2: 'rgb(49, 51, 53)',
3: 'rgb(60, 63, 65)',
4: 'rgb(69, 73, 74)'
},
blue: {
1: 'rgb(104, 151, 187)',
2: 'rgb(104, 151, 187)',
pool: 'rgb(104, 151, 187)'
},
accent: {
lavender: 'rgb(204, 120, 250)',
green: 'rgb(106, 135, 89)',
pink: 'rgb(198, 120, 221)',
lightBrown: 'rgb(190, 144, 99)',
red: 'rgb(204, 120, 50)',
yellow: 'rgb(255, 198, 109)',
lightYellow: 'rgb(255, 198, 109)',
blueIce: 'rgb(169, 183, 198)',
orange: 'rgb(204, 120, 50)',
purple: 'rgb(155, 89, 182)'
},
text: {
light: 'rgb(169, 183, 198)',
success: 'rgba(106, 135, 89, 0.6)',
error: 'rgba(204, 120, 50, 0.6)'
},
utils: {
translucent: 'rgba(255, 255, 255, .2)',
black: 'rgba(0, 0, 0, 1)'
}
};
// Cấu hình giao diện
const config = {
borderRadius: '5px',
wrapCode: true,
modHeaders: true,
invertBkgHPP: false,
modScrollbars: true,
};
// Tạo biến CSS root
const createRootVars = () => {
const vars = {
'--dark-1': colors.dark[1],
'--dark-2': colors.dark[2],
'--dark-3': colors.dark[3],
'--dark-4': colors.dark[4],
'--blue-1': colors.blue[1],
'--blue-2': colors.blue[2],
'--blue-pool': colors.blue.pool,
'--lavender': colors.accent.lavender,
'--green': colors.accent.green,
'--pink': colors.accent.pink,
'--light-brown': colors.accent.lightBrown,
'--red': colors.accent.red,
'--yellow': colors.accent.yellow,
'--light-yellow': colors.accent.lightYellow,
'--blue-ice': colors.accent.blueIce,
'--orange': colors.accent.orange,
'--purple': colors.accent.purple,
'--light-gray': colors.text.light,
'--light-green': colors.text.success,
'--light-red': colors.text.error,
'--translucent': colors.utils.translucent,
'--black': colors.utils.black,
'--default-border-radius': config.borderRadius
};
return Object.entries(vars)
.map(([key, value]) => `${key}: ${value} !important;`)
.join('\n');
};
// Tạo CSS styles
const css = `
:root {
${createRootVars()}
}
/* Base styles */
body {
background-color: var(--dark-3) !important;
color: var(--light-gray) !important;
}
/* Header styles */
#main-header {
${config.modHeaders ? 'background-image: none !important;' : ''}
background-color: ${colors.header} !important;
}
#main-header,
#main-header a,
#main-header a:visited,
#main-header a:active {
color: var(--light-gray) !important;
}
/* Navigation styles */
nav nav {
background-color: var(--dark-3) !important;
border: 1px solid var(--dark-2) !important;
box-shadow: 0 0 5px var(--dark-2) !important;
}
/* Link styles */
a:not(.install-link, .install-help-link) {
color: var(--blue-1) !important;
}
a:not(.install-link, .install-help-link):hover {
color: var(--blue-ice) !important;
transition: color 0.3s ease !important;
}
/* Content containers */
.script-list,
.user-list,
.text-content,
.discussion-list,
.list-option-group ul,
#script-info,
.discussion-read,
#discussion-locale,
#about-user,
.form-section,
.script-screenshot-control {
${config.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;
padding: 15px !important;
margin-bottom: 15px !important;
}
/* Hover styles cho nội dung */
.discussion-list li:hover,
.script-list li:hover,
.user-list li:hover {
background-color: var(--dark-2) !important;
transition: background-color 0.3s ease !important;
}
/* Form elements */
.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,
textarea,
input[type="file"] {
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;
padding: 8px !important;
margin: 5px 0 !important;
}
/* Buttons and interactive elements */
.install-link,
.install-help-link,
input[type="submit"] {
background-color: var(--blue-pool) !important;
color: var(--dark-1) !important;
border: none !important;
border-radius: var(--default-border-radius) !important;
transition: all 0.3s ease !important;
padding: 10px 20px !important;
cursor: pointer !important;
}
.install-link:hover,
.install-help-link:hover,
input[type="submit"]:hover {
background-color: var(--blue-2) !important;
transform: translateY(-2px) !important;
box-shadow: 0 2px 5px var(--dark-2) !important;
}
/* User profile sections */
#about-user,
#user-profile,
#control-panel {
padding: 15px !important;
margin-bottom: 20px !important;
}
#user-control-panel {
list-style: none !important;
padding-left: 0 !important;
}
#user-control-panel li {
margin: 10px 0 !important;
}
.report-link-abs {
position: absolute !important;
top: 15px !important;
right: 15px !important;
}
/* Form section styles */
.form-section {
padding: 20px !important;
margin-top: 20px !important;
}
.form-control {
margin-bottom: 15px !important;
}
.label-note {
margin-left: 10px !important;
color: var(--blue-ice) !important;
}
/* Screenshot control styles */
.script-screenshot-control {
background-color: var(--dark-2) !important;
padding: 20px !important;
margin: 15px 0 !important;
}
.script-screenshot-control label {
display: block !important;
margin-bottom: 10px !important;
color: var(--light-gray) !important;
}
.script-screenshot-control input[type="file"] {
width: 100% !important;
padding: 10px !important;
background-color: var(--dark-3) !important;
border: 1px dashed var(--blue-pool) !important;
}
/* List option group styles */
.list-option-group {
background-color: var(--dark-1) !important;
border-radius: var(--default-border-radius) !important;
padding: 15px !important;
margin-bottom: 15px !important;
}
.list-option-group ul {
list-style: none !important;
padding: 0 !important;
margin: 10px 0 !important;
}
.list-option {
padding: 8px !important;
margin: 5px 0 !important;
border-radius: var(--default-border-radius) !important;
}
.list-current {
background-color: var(--dark-2) !important;
color: var(--blue-ice) !important;
}
/* User profile message */
#user-profile p {
background-color: var(--dark-2) !important;
padding: 15px !important;
border-radius: var(--default-border-radius) !important;
border-left: 4px solid var(--blue-pool) !important;
margin: 10px 0 !important;
font-style: italic !important;
}
/* Scrollbar styles */
${config.modScrollbars ? `
* {
scrollbar-width: thin !important;
scrollbar-color: var(--translucent) var(--dark-2) !important;
}
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-track {
background: var(--dark-2) !important;
}
::-webkit-scrollbar-thumb {
background: var(--translucent) !important;
border-radius: var(--default-border-radius) !important;
}
::-webkit-scrollbar-thumb:hover {
background: var(--blue-pool) !important;
}
` : ''}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Responsive design */
@media (max-width: 768px) {
.script-list,
.user-list {
padding: 10px !important;
}
.install-link,
.install-help-link,
input[type="submit"] {
width: 100% !important;
text-align: center !important;
}
.list-option-group {
padding: 10px !important;
}
}
`;
// Áp dụng CSS
GM_addStyle(css);
})();