☰

LeetCode Dark Fix

LeetCode Dark Fix is a userscript that brings dark mode to LeetCode’s home, explore, and settings pages since the official dark mode doesn’t cover these pages yet.

Come installare

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Come installare

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!) 

// ==UserScript==
// @name         LeetCode Dark Fix
// @version      1.0
// @author       udontur
// @homepage	   https://github.com/udontur/leetcode-dark-fix
// @namespace    http://tampermonkey.net/
// @run-at       document-start
// @include      https://leetcode.com/
// @include      https://leetcode.com/explore*
// @include      https://leetcode.com/profile*
// @description  LeetCode Dark Fix is a userscript that brings dark mode to LeetCode’s home, explore, and settings pages since the official dark mode doesn’t cover these pages yet.
// @license      MIT
// ==/UserScript==

(function() {
let css = `
/* Colors */
:root {
  --background-back: var(--dark-gray-10) !important;
  --background-front: var(--dark-gray-20) !important;
  --link: var(--dark-blue-50) !important;
  --text: var(--dark-gray-80) !important;
  --text-desc: var(--dark-gray-70) !important;
  --text-alt: var(--dark-gray-60) !important;
  --button: var(--dark-gray-40) !important;
}



/* General */
body {
  color: var(--text) !important;
  background-color: var(--background-back) !important;
}

p {
  color: var(--text-desc) !important;
}

a {
  color: var(--text) !important;
}

span {
  color: var(--text-desc) !important;
}

#leetcode-navbar {
  background-color: var(--background-front) !important;
}

.block {
  border-radius: 8px !important;
}

.rounded {
  border-radius: 9px !important;
}

#leetcode-navbar>div>ul>li>a {
  color: var(--text-desc) !important;
}

rect {
  fill: var(--button) !important;
}

.text-text-secondary {
  color: var(--text) !important;
}

.link {
  color: #1890ff !important;
}

footer {
  background-color: var(--background-back) !important;
}

footer>div {
  border-top: 1px solid var(--button) !important;
}

svg {
  color: var(--text) !important;
}

svg>path:nth-child(3) {
  fill: var(--text) !important;
}

#leetcode-navbar>div>ul>li>a:hover {
  color: var(--text) !important;
}

#subscribe>a>span>span {
  background-color: #423726 !important;
  color: #FFA116 !important;
}

.text-brand-orange {
  color: #FFA116 !important;
}

#web-user-menu {
  color: var(--text) !important;
  background-color: var(--background-front) !important;
}

#web-user-menu>div>div {
  border-radius: 8px !important;
}

.popover {
  background-color: var(--background-front) !important;
}

.icon {
  text-shadow: none !important;
}

.flex {
  background-color: var(--background-front) !important;
}

.ant-dropdown-menu-item>div>div {
  border-bottom: 1px solid var(--button) !important;
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>div {
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>li {
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>a {
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>li:hover {
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>a:hover {
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item-active {
  background: none !important;
}

.ant-dropdown-menu {
  background: var(--background-front) !important;
}

.ant-dropdown {
  background: var(--background-front) !important;
}

.ant-dropdown>div {
  background: var(--background-front) !important;
}

.ant-dropdown>div>div {
  border-top: 1px solid var(--button) !important;
  background: var(--background-front) !important;
}

.ant-dropdown-menu-item>div>div>div {
  color: var(--text) !important;
}

.ant-dropdown-menu-item>div>div>div>a {
  color: var(--link) !important;
}



/* Home Page */
.media-heading {
  color: var(--text) !important;
}

.description {
  color: var(--text-desc) !important;
}

.side-block {
  border-bottom: 1px solid var(--button) !important;
}

.storyboard>div {
  border-top: 0px solid !important;
}

.storyboard>:not(.msg) {
  margin-top: 16px !important;
}

hr,
.side-bar {
  border-top: 1px solid var(--button) !important;
}

.side-block-btn {
  background-color: var(--background-front) !important;
  color: var(--text) !important;
  border-color: var(--button) !important;
}

.storyboard {
  border-right: 1px solid var(--button) !important;
}

.problem-category .problem-category-info a {
  color: var(--text) !important;
}

.problem-category .problem-category-info a:hover {
  background-color: var(--button) !important;
}



/* Explore Page */
.showcase-row::before {
  background: transparent !important;
}

.bot-base {
  background-color: var(--background-front) !important;
  border-radius: 0px 0px 14px 14px !important;
}

.explore-card {
  border-radius: 16px !important;
}

.big-number {
  color: var(--text) !important;
}

#explore-app {
  background-color: var(--background-back) !important;
}

.explore-heading>.description {
  color: var(--text) !important
}

.doughnut-chart-base {
  border-radius: 50% !important;
  background-color: var(--dark-gray-30) !important;
}

.explore-home-showcase .explore-index-showcase-base .showcase-row::after {
  background: none !important;
}

.scroll-btn:hover {
  opacity: 0.5 !important;
}

.scroll-btn {
  opacity: 0.3 !important;
}



/* Settings Page */
body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div>div:nth-child(1) {
  font-size: 20px !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div>div:not(:nth-child(1))>div>div>div>div:nth-child(1) {
  color: var(--text) !important;
  font-weight: bold !important;
}

.previous>a {
  background-color: var(--background-front) !important;
  border-color: var(--button) !important;
}

.next>a {
  background-color: var(--background-front) !important;
  border-color: var(--button) !important;
}

.previous>span {
  background-color: var(--background-front) !important;
  border-color: var(--button) !important;
}

.next>span {
  background-color: var(--background-front) !important;
  border-color: var(--button) !important;
}

.more-btn {
  background-color: var(--background-front) !important;
  border-color: var(--button) !important;
}

.fa-circle {
  background: var(--button) !important;
  color: var(--button) !important;
  border-radius: 50% !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div {
  background-color: var(--background-front) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(odd) {
  background: none !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div>div>div>div>div:nth-child(2) {
  color: var(--text-desc) !important;
}

.Select-value>span {
  color: var(--button) !important;
}

.Select-placeholder {
  color: var(--dark-gray-50) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div>div>div>div>div:nth-child(3) {
  color: var(--link) !important;
  background-color: transparent !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div>div>div>div>div:nth-child(3)>span {
  color: var(--link) !important;
  background-color: transparent !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div>div {
  border-bottom: 1px solid var(--button) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div {
  color: var(--text-desc) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div>div>div>div:nth-child(3)>span>a {
  background: none !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div>div>div>div:nth-child(3)>span>span {
  background: none !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div>div>div>div:nth-child(3)>span>a {
  color: var(--link) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div {
  background-color: var(--background-front) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div>div>div>div>div>div>button:nth-child(1) {
  background-color: var(--link) !important;
}

body>div:nth-child(11)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div {
  border-bottom: 1px solid var(--button) !important;
}

.bg-success {
  background-color: #a4df8b !important;
}

.text-success {
  color: #1a6f1a !important
}

nav>ul>li:not(:last-child)::after {
  border-right: 1px solid var(--dark-gray-50) !important;
}

#profile-app>div>div>div:nth-child(2)>div>div>div>div>div:not(:last-child){
  border-bottom: 1px solid var(--button) !important;
}
`;

if (typeof GM_addStyle !== "undefined") {
  GM_addStyle(css);
} else {
  let styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("body") || document.documentElement).appendChild(styleNode);
}

})();