Duolingo Dark Mode

Dark theme for duolingo.com
目前為 2020-11-03 提交的版本，檢視最新版本。
換行
/* ==UserStyle==
@name           Duolingo Dark Mode
@namespace      Duolingo-Dark-Mode
@version        1.0.1
@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
==/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;
}
//background
body, #root, main, .l-V52, .XO-AE, ._2nLk_, ._3wZWk {
    background: bg ;
    color: t-1;
}

div[data-test="skill-tree"], ._2PVaI,
._17s2H {
    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;
}
//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;
}
//borders
hr, .QdeEB, ._2kTwS, ._8roiG {
    border-top: 2px solid 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;
}

}