☰

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.

// ==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);
}

})();