☰

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.

Per 22-06-2025. Zie de nieuwste versie.

// ==UserScript==
// @name         LeetCode Dark Fix
// @version      1.0.1-beta
// @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;
}
#leetcode-navbar>div>ul>li>a{
  color: var(--text-desc) !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{
  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{
  background: var(--background-front) !important;
}
.ant-dropdown{
  background: var(--background-front) !important;
}
.ant-dropdown>div{
  background: var(--background-front) !important;
}
.ant-dropdown>div>div{
  background: var(--background-front) !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;
}
`;
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);
}

})();