☰

Duolingo Dark Mode

Dark theme for duolingo.com

当前为 2020-11-03 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Duolingo Dark Mode
  3. @namespace      Duolingo-Dark-Mode
  4. @version        1.0.0
  5. @description    Dark theme for duolingo.com
  6. @author         Pabli
  7. @license        CC-BY-SA-4.0
  8. @preprocessor   stylus
  9. ==/UserStyle== */
  10.  
  11. @-moz-document domain("duolingo.com") {
  12.  
  13.  
  14. //var
  15. bg = #141F23; //#fff
  16. bg-2 = #202F36; //#f0f0f0 #f7f7f7 #ddf4ff
  17. border-1 = #38464F; //#e5e5e5
  18. t-1 = #F2F7FB; //#3c3c3c #4b4b4b
  19. t-2 = #DEE7EE;  //#777 
  20. t-3 = #52656C; //#999 #afafaf #38464f
  21. t-red = #EF5F5E; //#ea2b2b  
  22. t-green = #78BB30; //#58a700
  23. t-blue = #49C0F8;   //#1cb0f6
  24. bg-red = #FF4B4C;  //#ff4b4b
  25. bg-green = #93D334; //#58cc02
  26. bg-yellow = #FDD333;
  27.  
  28.  
  29.  
  30.  
  31. //header
  32. #root > div > div,
  33. #root > div > div > div {
  34.     background-color: bg;
  35. }
  36. ._2j1Gc, ._2V4l4 {
  37.     background-color: bg;
  38.     border-bottom: 2px solid border-1;
  39.     color: t-1;
  40. }
  41. [style="z-index: 221;"], ._2NmyP, ._3z2Yo {
  42.     background: rgba(28,97,130,.1) !important;
  43. }
  44. ._-3fIQ ._2NOG7 {
  45.     color: t-blue;
  46. }
  47. ._2FdDp, _21W8z, ._21W8z {
  48.     border-bottom: 2px solid border-1;
  49. }
  50. ._2cDAr, ._37Hi-, ._21hmH, .yGEX2, .GokmT, ._7_au9, ._1ZA9g, ._3xFOm {
  51.     color: t-1;
  52. }
  53. ._3uAwj, ._1q9m2 p {
  54.     color: t-2;
  55. }
  56. ._2FdDp:hover, ._21W8z:hover {
  57.     background-color: bg-2;
  58. }
  59. .ISEeS ._2nIuI, ._168wl ._3ro2R {
  60.     border-bottom: 2px solid border-1;
  61.     color: t-1;
  62. }
  63. .ISEeS .D3QAY, ._168wl ._3hI6u, 
  64. ._28B_R:first-of-type,
  65. ._3b7Vp:first-of-type {
  66.     border-top: 2px solid border-1;
  67. }
  68. ._28B_R, ._3b7Vp {
  69.     border-bottom: 2px solid border-1;
  70. }
  71. .-qpyM, ._1cSqW {
  72.     border-top: 2px solid border-1;
  73.     color: t-blue;
  74. }
  75. ._1ZA9g a {
  76.     color: t-blue;
  77. }
  78. .ISEeS .G_xgk, ._168wl ._2rwos {
  79.     background-color: bg-2;
  80. }
  81. .ISEeS ._2nIuI:hover, .ISEeS .D3QAY:hover, ._168wl ._2rwos:hover, ._168wl ._3ro2R:hover, ._168wl ._3hI6u:hover, .-qpyM:hover, ._1cSqW:hover {
  82.     background-color: bg-2;
  83. }
  84. ._1S8Vz {
  85.     filter: brightness(50%);
  86. }
  87. .brXUB {
  88.     background-color: border-1;
  89.     color: t-3;
  90. }
  91. ._1Q4WV, ._2nhmY, ._2iJ6U, .SaEU8 {
  92.     background-color: bg;
  93.     border: 2px solid border-1;
  94. }
  95. ._3IWeV {
  96.     color: t-3;
  97. }
  98. ._3IWeV::after {
  99.     background-color: bg;
  100.     border-color: border-1;
  101. }
  102. //practice
  103. [style*="color: rgb(75\, 75\, 75)"], .Mr3if {
  104.     color: t-1 !important;
  105. }
  106. ._399cc {
  107.     background: bg;
  108.     border-top: 2px solid border-1;
  109. }
  110. [data-test="challenge-choice-card"]::after,
  111. .fJSw6:active:not(._326cY):not(.IACXk)::after {
  112.     background-color: bg-2;
  113.     border-color: t-blue;
  114. }
  115. ._2Gskp {
  116.     border-top: 2px solid border-1;
  117. }
  118. ._3ANq3 > :not(:last-child) {
  119.     border-right: 2px solid border-1;
  120. }
  121. ._3xnDt {
  122.     border-left: 2px solid border-1;
  123. }
  124. ._1rooe, ._15J0U {
  125.     border-bottom: 2px solid border-1;
  126. }
  127. ._3lUbm, .FrL-W {
  128.     background: bg;
  129. }
  130. .FrL-W {
  131.     border: 2px solid border-1;
  132. }
  133. ._37JAM p {
  134.     color: t-2;
  135. }
  136.  
  137. ._34Jmg, ._1Nmv6 {
  138.     color: t-green;
  139. }
  140. ._3e9O1 {
  141.     background-color: bg-2;
  142.     color: t-green;
  143. }
  144. ._1Ylz- {
  145.     background-color: t-green;
  146.     color: bg;
  147. }
  148. ._1Ylz-::after {
  149.     background-color: bg-green;
  150. }
  151. ._2VrUB {
  152.     background: bg;
  153. }
  154. ._2KQGO::before {
  155.     border: 4px solid bg;
  156. }
  157.  
  158. ._1O290 {
  159.     color: t-1;
  160. }
  161.  
  162. ._1wJYQ::after {
  163.     background-color: bg;
  164.     border-color: border-1;
  165. }
  166. ._2UUiS::after {
  167.     background-color: border-1 !important;
  168. }
  169.  
  170. .Z7UoT {
  171.     border-color: t-blue;
  172.     color: t-blue;
  173. }
  174.  
  175. ._3vF5k {
  176.     background-color: bg-2;
  177.     color: t-red;
  178. }
  179. .o66XQ::after {
  180.     background-color: bg-red;
  181. }
  182. .o66XQ {
  183.     background-color: t-red;
  184.     color: bg;
  185. }
  186. ._1sqiF, ._2tfS2 {
  187.     color: t-red;
  188. }
  189.  
  190. .ccZTP {
  191.     color: t-2;
  192. }
  193.  
  194. .u_Pxl ._34fuQ ._3c96B {
  195.     color: t-3;
  196. }
  197. ._2gwdz {
  198.     border: 2px solid border-1;
  199. }
  200. ._1eBPl:first-child ._1lcy6, ._1HxVp {
  201.     border-top: 2px solid border-1;
  202. }
  203. ._1eBPl ._1lcy6 {
  204.     border-bottom: 2px solid border-1;
  205.     border-right: 2px solid border-1;
  206. }
  207. ._1eBPl ._1lcy6:first-of-type, .SQR8J {
  208.     border-left: 2px solid border-1;
  209. }
  210. ._37c8P {
  211.     background: bg-2;
  212. }
  213. //background
  214. body, #root, main, .l-V52, .XO-AE, ._2nLk_, ._3wZWk {
  215.     background: bg ;
  216.     color: t-1;
  217. }
  218.  
  219. div[data-test="skill-tree"], ._2PVaI,
  220. ._17s2H {
  221.     background: bg;
  222. }
  223. ._3M0r3, .GVcJz, ._3izPU {
  224.     background-color: bg-2;
  225. }
  226. .GVcJz, ._3M0r3, ._3izPU, 
  227. ._1jKFt::before, ._2TPZF::after {
  228.     border: 2px solid border-1;
  229. }
  230.  
  231. ._1JPPG {
  232.     background-image: none;
  233. }
  234. ._1HSlC::after {
  235.     border-color: bg;
  236. }
  237. [data-test="skill-popout"] > div > div:first-child,
  238. [data-test="skill-popout"] > div > div:last-child > div {
  239.     background-color: border-1;
  240.     border: 2px solid bg;
  241. }
  242. button[data-test="start-button"],
  243. .SSzTP .twkSI, .XmFOe .twkSI {
  244.     color: bg;
  245. }
  246.  
  247. [fill="#e5e5e5"] {
  248.     fill: border-1;
  249. }
  250. [data-test="skill-icon"], ._1EyKG, ._1A0LT {
  251.     background-color: border-1;
  252. }
  253. ._1A0LT svg {
  254.     filter:  brightness(80%);
  255. }
  256. img[src="//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg"],
  257. img[src="//d35aaqx5ub95lt.cloudfront.net/images/ac2e0998c42f5d11a1654859511fcccd.svg"] {
  258.     filter: brightness(70%);
  259. }
  260. //right panel
  261. #root > div > div > div > div > div {
  262.     background-color: bg;
  263. }
  264. ._3Gj5_ , ._3ZuGY, ._2VdVL {
  265.     background: bg;
  266.     border: 2px solid border-1;
  267. }
  268. .-AHpg, ._2Inq2:not(:last-child), ._3lKd4 {
  269.     border-bottom: 2px solid border-1;
  270. }
  271. ._2UTWH, .mKH7H ._1_ZCT {
  272.     color: t-green;
  273. }
  274. .jHo0Y, ._1xmOg ._1_ZCT {
  275.     color: t-red;
  276. }
  277. ._3QwaZ {
  278.     background: border-1;
  279. }
  280. .yXp5g:hover {
  281.     background: rgba(255, 255, 255, .1);
  282. }
  283. .YBCQI {
  284.     color: t-1;
  285. }
  286. ._2jQLr, ._3cvJx, ._2QnAf {
  287.     color: t-2;
  288. }
  289. .OhXul, ._3blqO, ._861_w, ._15-md {
  290.     color: t-3;
  291. }
  292. [src="//d35aaqx5ub95lt.cloudfront.net/images/leagues/icon_info.svg"] {
  293.     border-radius: 50%;
  294.     filter: brightness(80%);
  295. }
  296. img[src="//d35aaqx5ub95lt.cloudfront.net/images/leagues/badge_locked.svg"]{
  297.     filter: brightness(70%);
  298. }
  299. ._3QwaZ.mKH7H {
  300.     background: bg;
  301.     color: t-green;
  302. }
  303. ._3QwaZ.mKH7H ._3cvJx {
  304.     color: t-green;
  305. }
  306. //xp progress bar
  307. ._2cmOB {
  308.     background: border-1;
  309. }
  310. //practice button, find friends buttons and socials
  311. ._3iVqs::after {
  312.     background-color: bg;
  313.     border-color: border-1;
  314. }
  315. //try plus button
  316. .kooao {
  317.     background: bg;
  318.     border: 3px solid bg;
  319. }
  320. //text
  321. div[data-test="skill"] > div > div > div, .Mr3if {
  322.     color: t-1 !important;
  323. }
  324. h2 {
  325.     color: t-1 !important;
  326. }
  327. a {
  328.     color: t-blue;
  329. }
  330. //borders
  331. hr, .QdeEB, ._2kTwS, ._8roiG {
  332.     border-top: 2px solid border-1;
  333. }
  334.  
  335. //Achievements
  336. ._1fag1 {
  337.     color: t-1;
  338. }
  339. ._315yA {
  340.     color: t-2;
  341. }
  342. ._3iwbr {
  343.     color: t-3;
  344. }
  345. ._27avI {
  346.     border-bottom: 2px solid border-1;
  347. }
  348.  
  349. //forum discuss
  350. ._1UYQp, ._2Nbkz {
  351.     border-bottom: 2px solid border-1;
  352. }
  353. ._2MyXH {
  354.     border-top: 1px solid border-1;
  355. }
  356. ._3ZcIW, ._2VdVL h2 {
  357.     color: t-1;
  358. }
  359. button[style*="background"] {
  360.     background-color: bg !important;
  361.     border-color: border-1 !important;
  362.     color: t-2 !important;
  363. }
  364. button[style*="background: rgb(28\, 176\, 246)"] {
  365.     background-color: t-blue !important;
  366. }
  367. ._10HmK {
  368.     background-color: bg;
  369.     border: 2px solid border-1;
  370.     color: t-1;
  371.     caret-color: t-blue;
  372. }
  373. ._2povu blockquote {
  374.     border-left: 5px solid bg-2;
  375. }
  376. .K4oWn, .slg8x:hover {
  377.     background-color: border-1;
  378. }
  379. ._2LBIq, ._2I7YD, ._2D8L4 a {
  380.     color: t-3;
  381. }
  382. ._7SUuD {
  383.     color: t-1;
  384. }
  385. ._3ha9t, .TKIPn, .TKIPn:hover {
  386.     background: bg;
  387. }
  388. .TKIPn, .TKIPn:hover {
  389.     border: 2px solid border-1;
  390. }
  391. //twitter fb icon on the bottom
  392. ._1-HHf {
  393.     filter: invert(1);
  394. }
  395. //shop
  396. ._3YYVw.k6MEx:not(._2mG9r), ._3YYVw:disabled:not(._2mG9r) {
  397.     color: t-3;
  398. }
  399. ._3YYVw.k6MEx:not(._2mG9r)::after, ._3YYVw:disabled:not(._2mG9r)::after,
  400. ._3YYVw::after {
  401.     border-color: border-1;
  402. }
  403. ._2QQA_ {
  404.     color: t-2;
  405. }
  406. ._2ztBJ {
  407.     color: t-3;
  408. }
  409. h4 {
  410.     color: #ff9898;
  411. }
  412. //stories
  413. ._2NKLU, ._1qdLM {
  414.     color: t-1;
  415. }
  416. ._1eZU8 {
  417.     color: t-2;
  418. }
  419. ._3XEH9, ._1qdLM._3N2Ph {
  420.     color: t-3;
  421. }
  422. ._1qdLM::after, ._1qdLM::before {
  423.     background: border-1;
  424. }
  425. //settings
  426. input[type="checkbox"] {
  427.     background: bg;
  428.     border: 2px solid border-1;
  429. }
  430. input[type="text"], textarea, #bio, #currentPassword, #password, [placeholder="Classroom code"], input#username, input#email {
  431.     background: bg-2 !important;
  432.     border: 2px solid border-1 !important;
  433.     color: t-1 !important;
  434. }
  435. [for="username"], [for="email"], [for="enableSoundEffects"], [for="coachEnabled"], [for="enableSpeaker"], 
  436. ._1CsoA {
  437.     color: t-1;
  438. }
  439. .XJIrJ{
  440.     background: t-blue;
  441. }
  442. .XJIrJ::before {
  443.     border-color: t-blue;
  444. }
  445. ._2FbA1::before {
  446.     background: bg;
  447. }
  448. ._21Rik {
  449.     background: border-1;
  450. }
  451. ._21Rik::before {
  452.     border-color: border-1;
  453. }
  454. button[data-test="save-button"]:disabled,
  455. .yTpGk.k6MEx:not(._2mG9r), .yTpGk:disabled:not(._2mG9r) {
  456.     color: t-3 !important;
  457. }
  458. .yTpGk.k6MEx:not(._2mG9r)::after, .yTpGk:disabled:not(._2mG9r)::after {
  459.     background: border-1;
  460. }
  461.  
  462. [data-test="image-file"] > label,
  463. ._2k8ad, _2gYJz {
  464.     color: t-3;
  465. }
  466. ._2gYJz {
  467.     color: t-3;
  468. }
  469. ._1bYwN {
  470.     color: t-blue;
  471. }
  472. ._1wy04, ._1oj-F {
  473.     color: t-1;
  474. }
  475. ._1eSrF,
  476. .rmbzf:hover {
  477.     background: border-1;
  478. }
  479.  
  480. ._1vUZG {
  481.     background-color: #1899d6;
  482.     color: bg;
  483. }
  484. ._1vUZG::after {
  485.     background-color: t-blue;
  486. }
  487. ._3oNS9, ._3Ho-0 ._1dUcs {
  488.     color: t-2;
  489. }
  490.  
  491. ._26wPn {
  492.     color: t-1;
  493. }
  494. ._26wPn::after {
  495.     background-color: bg;
  496.     border-color: border-1;
  497. }
  498. ._1HjFK::after {
  499.     background-color: bg-2;
  500.     border-color: t-blue;
  501. }
  502. .fJSw6:hover:not(:active):not(._326cY):not(.IACXk)::after {
  503.     background-color: bg-2;
  504. }
  505.  
  506. //about us info
  507. ._2yr5w {
  508.     color: t-3;
  509. }
  510. ._2t5tt {
  511.     border-bottom: 2px solid border-1;
  512. }
  513. ._3OVD3, ._3OVD3:hover {
  514.     border-bottom: 4px solid t-blue;
  515.     color: t-blue;
  516. }
  517. ._2peQQ, ._1ix9E, ._2a2zw, ._2_SGS, ._3A4Lv {
  518.     color: t-2;
  519. }
  520. .FJh6U {
  521.     color: t-blue;
  522. }
  523. ._1MEMy {
  524.     border: 2px solid border-1;
  525. }
  526. ._2FSvr {
  527.     color: t-1;
  528. }
  529.  
  530. }