Dark theme for duolingo.com
/* ==UserStyle==
@name Duolingo Dark Mode
@namespace Duolingo-Dark-Mode
@version 1.0.4
@description Dark theme for duolingo.com
@author Pabli
@license CC-BY-SA-4.0
@homepageURL https://greasyfork.org/en/scripts/415378-duolingo-dark-mode
@supportURL https://greasyfork.org/en/scripts/415378-duolingo-dark-mode/feedback
@preprocessor stylus
@var color bg "Background" #141F23
@var color bg-2 "Background 2" #202F36
@var color border-1 "Border" #38464F
@var color t-1 "Text 1" #F2F7FB
@var color t-2 "Text 2" #DEE7EE
@var color t-3 "Text 3" #52656C
@var color t-red "Text red" #EF5F5E
@var color t-green "Text green" #78BB30
@var color t-blue "Text blue" #49C0F8
@var color bg-red "Background red" #FF4B4C
@var color bg-green "Background green" #93D334
==/UserStyle== */
@-moz-document domain("duolingo.com") {
/*
//var
bg = #141F23; //#fff
bg-2 = #202F36; //#f0f0f0 #f7f7f7 #ddf4ff
border-1 = #38464F; //#e5e5e5
t-1 = #F2F7FB; //#3c3c3c #4b4b4b
t-2 = #DEE7EE; //#777
t-3 = #52656C; //#999 #afafaf #38464f
t-red = #EF5F5E; //#ea2b2b
t-green = #78BB30; //#58a700
t-blue = #49C0F8; //#1cb0f6
bg-red = #FF4B4C; //#ff4b4b
bg-green = #93D334; //#58cc02
bg-yellow = #FDD333;
*/
//header
#root > div > div,
#root > div > div > div {
background-color: bg;
}
._2j1Gc, ._2V4l4 {
background-color: bg;
border-bottom: 2px solid border-1;
color: t-1;
}
[style="z-index: 221;"], ._2NmyP, ._3z2Yo {
background: rgba(28,97,130,.1) !important;
}
._-3fIQ ._2NOG7 {
color: t-blue;
}
._2FdDp, _21W8z, ._21W8z {
border-bottom: 2px solid border-1;
}
._2cDAr, ._37Hi-, ._21hmH, .yGEX2, .GokmT, ._7_au9, ._1ZA9g, ._3xFOm {
color: t-1;
}
._3uAwj, ._1q9m2 p {
color: t-2;
}
._2FdDp:hover, ._21W8z:hover {
background-color: bg-2;
}
.ISEeS ._2nIuI, ._168wl ._3ro2R {
border-bottom: 2px solid border-1;
color: t-1;
}
.ISEeS .D3QAY, ._168wl ._3hI6u,
._28B_R:first-of-type,
._3b7Vp:first-of-type,
._3GdnM {
border-top: 2px solid border-1;
}
._28B_R, ._3b7Vp {
border-bottom: 2px solid border-1;
}
.-qpyM, ._1cSqW {
border-top: 2px solid border-1;
color: t-blue;
}
._1ZA9g a {
color: t-blue;
}
.ISEeS .G_xgk, ._168wl ._2rwos {
background-color: bg-2;
}
.ISEeS ._2nIuI:hover, .ISEeS .D3QAY:hover, ._168wl ._2rwos:hover, ._168wl ._3ro2R:hover, ._168wl ._3hI6u:hover, .-qpyM:hover, ._1cSqW:hover {
background-color: bg-2;
}
._1S8Vz {
filter: brightness(50%);
}
.brXUB {
background-color: border-1;
color: t-3;
}
._1Q4WV, ._2nhmY, ._2iJ6U, .SaEU8 {
background-color: bg;
border: 2px solid border-1;
}
._3IWeV {
color: t-3;
}
._3IWeV::after {
background-color: bg;
border-color: border-1;
}
//practice
[style*="color: rgb(75\, 75\, 75)"], .Mr3if {
color: t-1 !important;
}
._399cc {
background: bg;
border-top: 2px solid border-1;
}
[data-test="challenge-choice-card"]::after,
.fJSw6:active:not(._326cY):not(.IACXk)::after {
background-color: bg-2;
border-color: t-blue;
}
._2Gskp {
border-top: 2px solid border-1;
}
._3ANq3 > :not(:last-child) {
border-right: 2px solid border-1;
}
._3xnDt {
border-left: 2px solid border-1;
}
._1rooe, ._15J0U {
border-bottom: 2px solid border-1;
}
._3lUbm, .FrL-W {
background: bg;
}
.FrL-W {
border: 2px solid border-1;
}
._37JAM p {
color: t-2;
}
._34Jmg, ._1Nmv6 {
color: t-green;
}
._3e9O1 {
background-color: bg-2;
color: t-green;
}
._1Ylz- {
background-color: t-green;
color: bg;
}
._1Ylz-::after {
background-color: bg-green;
}
._2VrUB {
background: bg;
}
._2KQGO::before {
border: 4px solid bg;
}
._1O290 {
color: t-1;
}
._1wJYQ::after {
background-color: bg;
border-color: border-1;
}
._2UUiS::after {
background-color: border-1 !important;
}
.Z7UoT {
border-color: t-blue;
color: t-blue;
}
._3vF5k {
background-color: bg-2;
color: t-red;
}
.o66XQ::after {
background-color: bg-red;
}
.o66XQ {
background-color: t-red;
color: bg;
}
._1sqiF, ._2tfS2 {
color: t-red;
}
.ccZTP {
color: t-2;
}
.u_Pxl ._34fuQ ._3c96B {
color: t-3;
}
._2gwdz {
border: 2px solid border-1;
}
._1eBPl:first-child ._1lcy6, ._1HxVp {
border-top: 2px solid border-1;
}
._1eBPl ._1lcy6 {
border-bottom: 2px solid border-1;
border-right: 2px solid border-1;
}
._1eBPl ._1lcy6:first-of-type, .SQR8J {
border-left: 2px solid border-1;
}
._37c8P {
background: bg-2;
}
._2FKqf {
background-color: bg-2;
border-color: border-1;
}
._2ti2i {
background: bg;
border: 2px solid border-1;
color: t-1;
}
._3PZWo {
background: hsla(0, 0%, 0%, .7);
}
//background
body, #root, main, .l-V52, .XO-AE, ._2nLk_, ._3wZWk {
background: bg ;
color: t-1;
}
div[data-test="skill-tree"], ._2PVaI,
._17s2H, ._3f1oK {
background: bg;
}
._3M0r3, .GVcJz, ._3izPU {
background-color: bg-2;
}
.GVcJz, ._3M0r3, ._3izPU,
._1jKFt::before, ._2TPZF::after {
border: 2px solid border-1;
}
._1JPPG {
background-image: none;
}
._1HSlC::after {
border-color: bg;
}
[data-test="skill-popout"] > div > div:first-child,
[data-test="skill-popout"] > div > div:last-child > div {
background-color: border-1;
border: 2px solid bg;
}
button[data-test="start-button"],
.SSzTP .twkSI, .XmFOe .twkSI {
color: bg;
}
[fill="#e5e5e5"] {
fill: border-1;
}
[data-test="skill-icon"], ._1EyKG, ._1A0LT {
background-color: border-1;
}
._1A0LT svg {
filter: brightness(80%);
}
img[src="//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg"],
img[src="//d35aaqx5ub95lt.cloudfront.net/images/ac2e0998c42f5d11a1654859511fcccd.svg"] {
filter: brightness(70%);
}
//right panel
#root > div > div > div > div > div {
background-color: bg;
}
._3Gj5_ , ._3ZuGY, ._2VdVL {
background: bg;
border: 2px solid border-1;
}
.-AHpg, ._2Inq2:not(:last-child), ._3lKd4 {
border-bottom: 2px solid border-1;
}
._2UTWH, .mKH7H ._1_ZCT {
color: t-green;
}
.jHo0Y, ._1xmOg ._1_ZCT {
color: t-red;
}
._3QwaZ {
background: border-1;
}
.yXp5g:hover {
background: rgba(255, 255, 255, .1);
}
.YBCQI {
color: t-1;
}
._2jQLr, ._3cvJx, ._2QnAf {
color: t-2;
}
.OhXul, ._3blqO, ._861_w, ._15-md {
color: t-3;
}
[src="//d35aaqx5ub95lt.cloudfront.net/images/leagues/icon_info.svg"] {
border-radius: 50%;
filter: brightness(80%);
}
img[src="//d35aaqx5ub95lt.cloudfront.net/images/leagues/badge_locked.svg"]{
filter: brightness(70%);
}
._3QwaZ.mKH7H {
background: bg;
color: t-green;
}
._3QwaZ.mKH7H ._3cvJx {
color: t-green;
}
._3QwaZ._1xmOg ._3cvJx {
color: t-red;
}
._3QwaZ._1xmOg {
background: border-1;//
color: t-red;
}
//xp progress bar
._2cmOB {
background: border-1;
}
//practice button, find friends buttons and socials
._3iVqs::after {
background-color: bg;
border-color: border-1;
}
//try plus button
.kooao {
background: bg;
border: 3px solid bg;
}
//text
div[data-test="skill"] > div > div > div, .Mr3if {
color: t-1 !important;
}
h2 {
color: t-1 !important;
}
a {
color: t-blue;
}
._3WjRu {
color: t-2;
}
//borders
hr, .QdeEB, ._2kTwS, ._8roiG {
border-top: 2px solid border-1;
}
//streak freeze used
._33x5b {
border: 2px solid border-1;
}
.RYa1p {
color: t-2;
}
.FrL-W:hover {
background: border-1;
}
//Achievements
._1fag1 {
color: t-1;
}
._315yA {
color: t-2;
}
._3iwbr {
color: t-3;
}
._27avI {
border-bottom: 2px solid border-1;
}
//forum discuss
._1UYQp, ._2Nbkz {
border-bottom: 2px solid border-1;
}
._2MyXH {
border-top: 1px solid border-1;
}
._3ZcIW, ._2VdVL h2 {
color: t-1;
}
button[style*="background"] {
background-color: bg !important;
border-color: border-1 !important;
color: t-2 !important;
}
button[style*="background: rgb(28\, 176\, 246)"] {
background-color: t-blue !important;
}
._10HmK {
background-color: bg;
border: 2px solid border-1;
color: t-1;
caret-color: t-blue;
}
._2povu blockquote {
border-left: 5px solid bg-2;
}
.K4oWn, .slg8x:hover {
background-color: border-1;
}
._2LBIq, ._2I7YD, ._2D8L4 a {
color: t-3;
}
._7SUuD {
color: t-1;
}
._3ha9t, .TKIPn, .TKIPn:hover {
background: bg;
}
.TKIPn, .TKIPn:hover {
border: 2px solid border-1;
}
//twitter fb icon on the bottom
._1-HHf {
filter: invert(1);
}
//shop
._3YYVw.k6MEx:not(._2mG9r), ._3YYVw:disabled:not(._2mG9r) {
color: t-3;
}
._3YYVw.k6MEx:not(._2mG9r)::after, ._3YYVw:disabled:not(._2mG9r)::after,
._3YYVw::after {
border-color: border-1;
}
._2QQA_ {
color: t-2;
}
._2ztBJ {
color: t-3;
}
h4 {
color: #ff9898;
}
//stories
._2NKLU, ._1qdLM {
color: t-1;
}
._1eZU8 {
color: t-2;
}
._3XEH9, ._1qdLM._3N2Ph {
color: t-3;
}
._1qdLM::after, ._1qdLM::before {
background: border-1;
}
//settings
input[type="checkbox"] {
background: bg;
border: 2px solid border-1;
}
input[type="text"], textarea, #bio, #currentPassword, #password, [placeholder="Classroom code"], input#username, input#email {
background: bg-2 !important;
border: 2px solid border-1 !important;
color: t-1 !important;
}
[for="username"], [for="email"], [for="enableSoundEffects"], [for="coachEnabled"], [for="enableSpeaker"],
._1CsoA {
color: t-1;
}
.XJIrJ{
background: t-blue;
}
.XJIrJ::before {
border-color: t-blue;
}
._2FbA1::before {
background: bg;
}
._21Rik {
background: border-1;
}
._21Rik::before {
border-color: border-1;
}
button[data-test="save-button"]:disabled,
.yTpGk.k6MEx:not(._2mG9r), .yTpGk:disabled:not(._2mG9r) {
color: t-3 !important;
}
.yTpGk.k6MEx:not(._2mG9r)::after, .yTpGk:disabled:not(._2mG9r)::after {
background: border-1;
}
[data-test="image-file"] > label,
._2k8ad, _2gYJz {
color: t-3;
}
._2gYJz {
color: t-3;
}
._1bYwN {
color: t-blue;
}
._1wy04, ._1oj-F {
color: t-1;
}
._1eSrF,
.rmbzf:hover {
background: border-1;
}
._1vUZG {
background-color: #1899d6;
color: bg;
}
._1vUZG::after {
background-color: t-blue;
}
._3oNS9, ._3Ho-0 ._1dUcs {
color: t-2;
}
._26wPn {
color: t-1;
}
._26wPn::after {
background-color: bg;
border-color: border-1;
}
._1HjFK::after {
background-color: bg-2;
border-color: t-blue;
}
.fJSw6:hover:not(:active):not(._326cY):not(.IACXk)::after {
background-color: bg-2;
}
//about us info
._2yr5w {
color: t-3;
}
._2t5tt {
border-bottom: 2px solid border-1;
}
._3OVD3, ._3OVD3:hover {
border-bottom: 4px solid t-blue;
color: t-blue;
}
._2peQQ, ._1ix9E, ._2a2zw, ._2_SGS, ._3A4Lv {
color: t-2;
}
.FJh6U {
color: t-blue;
}
._1MEMy {
border: 2px solid border-1;
}
._2FSvr {
color: t-1;
}
}