Duolingo Dark Consistent by treebit

/* ==UserStyle==
@name         Duolingo Dark Consistent
@version      20230324.12.08
@namespace    treebit
@author       treebit (Discord: Ilia#0333)
@description  Dark mode for Duolingo website completely consistent with the mobile app dark version. With highlight color customization and other settings.
@license      Public Domain
@preprocessor less
@var color highlight-color "Highlight color" #49c0f8
@var checkbox ads "Ads" 0
@var checkbox scrollbars "Scrollbars" 0
@var checkbox leaderboards "Leaderboards" 1
@var checkbox characters "Characters" 1
@var number font-size "Font size" [19, 7, 72, 'px']
==/UserStyle== */

@-moz-document domain("www.duolingo.com"), domain("preview.duolingo.com"), domain("forum.duolingo.com") {

/* Github folder with additional images */
@github: "https://raw.githubusercontent.com/TreebitCode/dark-duolingo/7c5215e913c9111bbc7ea65b0bd0fb0a29f0b296/images/";

/* Duolingo folder that has some dark theme assets */
@kudos: "https://friends.duolingo.com/kudos/assets/kudos_";

._2bIJV {
  background-color: var(--bg-dark);
  border-color: var(--border);
}
._2R0Ah:hover {
  filter: brightness(1.2)
}
.oiAw- {
  color: var(--text-dim)
}
._22J27 {
  color: var(--text-gray);
}
._2VU44 {
  background-color: var(--color-combo-10-orange);
  color: var(--bg-dark);
}

/* Speech bubble text */
.FQpeZ {
  font-size: @font-size;
}
/* Speech bubble tips */
._2Gskp {
  font-size: @font-size - 2;
}
/* Word bank word text */
._6Nozy {
  --web-ui_button-font-size: @font-size;
}
/* Overflown word bank */
[data-test="word-bank"] ._2XgEJ {
  font-size: @font-size - 2;
}
/* Word card text */
._3pn9e {
  font-size: @font-size;
}
/* Pronunciation text */
._47IB1 {
  font-size: @font-size - 5;
}
/* Broken words */
._2CJgg {
  font-size: @font-size !important;
}
/* Options */
._2-OmZ {
  font-size: @font-size;
}
/* Diacritic letters */
._1OCDB button {
  font-size: @font-size - 4;
}
/* Stories */
._6Gll5 {
  font-size: @font-size;
}
._27o_2 { /* Select missing options */
  font-size: @font-size;
}
._31R5G { /* Tips */
  font-size: @font-size;
}
._1Q3F0 { /* Is it true? */
  font-size: @font-size;
}

/* Custom variables */
:root {
  
  /* Basic colors */
  --color-text-blue: @highlight-color; /* --color-macaw-always-dark */
  --color-border-blue: rgb(red(@highlight-color)-10, green(@highlight-color)-59, blue(@highlight-color)-81); /* #3f85a7 */
  --color-shadow-blue: rgb(red(@highlight-color)-49, green(@highlight-color)-39, blue(@highlight-color)-34); /* #1899d6 */
  --color-background-dark: #131f22;
  --color-background-hover: #172529;
  --color-background-light: #202f36; /* --color-polar-always-dark */
  --color-text-white: #f1f7fb; /* --color-eel-always-dark */
  --color-text-white-info: #dce6ec;
  --color-text-gray: #52656d;
  --color-shadow-gray: #37464f; /* --color-swan-always-dark */
  --color-correct-green: #79b933;
  --color-button-green: #93d333; /* --color-owl-always-dark */
  --color-border-green: #5f8428;
  --color-background-green: #203224;
  --color-wrong-red: #d84848;
  --color-button-red: #ee5555;
  --color-border-pink: #f5a4a4;
  
  /* Additional colors */
  --color-junior-blue: #49c0f8;
  --color-text-white-unit: #fffffd;
  --color-text-gray-hint: #a8a8a8;
  --color-text-gray-placeholder: #90979b;
  --color-stat-box-blue: #1cb0f6;
  --color-stat-box-green: #58cc02;
  --color-unanswered-yellow: #e7a601;
  --color-button-yellow: #ffc800;
  --color-shine-yellow: #ffe700;
  --color-combo-5-glare-yellow: #ffd333;
  --color-combo-10-orange: #ffab33;
  --color-combo-10-glare-orange: #ffbc5c;
  --color-background-orange: #2a2d24;
  --color-perfect-week-orange: #655a16;
  --color-perfect-week-shine: #89652a;
  --color-shadow-legendary: #5f57b4;
  --color-progress-bar-text-gray: #9ba3a7;
  --color-progress-bar-text-orange: #d89634;
  --color-underline-hover-gray: #5b7482;
  --color-character-orange: #cd7900;
  
  /* Background */
  --bg-dark: var(--color-background-dark);
  --bg-hover: var(--color-background-hover);
  --bg-light: var(--color-background-light);
  
  /* Borders and separators */
  --border: var(--color-shadow-gray);
  
  /* Text */
  --text: var(--color-text-white);
  --text-dim: var(--color-text-white-info);
  --text-gray: var(--color-text-gray);
    
  /* Highlights */
  --highlight: var(--color-text-blue);
  --hl-border: var(--color-border-blue);
  --hl-shadow: var(--color-shadow-blue);
  
  /* Green */
  --green: var(--color-correct-green);
  --light-green: var(--color-button-green);
  --border-green: var(--color-border-green);
  --bg-green: var(--color-background-green);
  
  /* Red */
  --red: var(--color-wrong-red);
  --light-red: var(--color-button-red);
  --border-red: var(--color-border-pink);

  /* Filters for changing SVG icons */
  /* Generated using this tool: https://codepen.io/sosuke/pen/Pjoqqp */
  --filter-background-dark: brightness(0) saturate(1) invert(.08) sepia(.39) saturate(4.84) hue-rotate(144deg) brightness(1.01) contrast(.94);
  --filter-text-gray: brightness(0) saturate(1) invert(.38) sepia(.08) saturate(10.41) hue-rotate(153deg) brightness(.94) contrast(.87);
  --filter-background-light: brightness(0) saturate(1) invert(.13) sepia(.43) saturate(4.21) hue-rotate(154deg) brightness(.92) contrast(.89);
  --filter-correct-green: brightness(0) saturate(1) invert(.72) sepia(.18) saturate(15.17) hue-rotate(45deg) brightness(.88) contrast(.86);
  --filter-unanswered-yellow: brightness(0) saturate(1) invert(.63) sepia(.34) saturate(17.48) hue-rotate(7deg) brightness(.99) contrast(.99);
  --filter-wrong-red: brightness(0) saturate(1) invert(.45) sepia(.66) saturate(6.63) hue-rotate(314deg) brightness(.82) contrast(1.08); /* IMPROVE */
  --filter-blue: brightness(0) saturate(1) invert(.53) sepia(.84) saturate(15.62) hue-rotate(168deg) brightness(1) contrast(.93);
  --filter-text-blue: brightness(0) saturate(1) invert(.6) sepia(.97) saturate(4.9) hue-rotate(169deg) brightness(.99) contrast(.97);
  --filter-text-white-unit: brightness(0) saturate(1) invert(.89) sepia(.03) saturate(12.26) hue-rotate(334deg) brightness(1.11) contrast(1.08);
  --filter-shadow-gray: brightness(0) saturate(1) invert(.25) sepia(.12) saturate(8.06) hue-rotate(159deg) brightness(.95) contrast(.94);
  
  --filter-text: brightness(0) saturate(1) invert(1) sepia(.82) saturate(5.92) hue-rotate(176deg) brightness(1.02) contrast(.97);

}


/*
   .====================================================================================================================================================================.
   |  GENERAL ELEMENTS                                                                                                                                                  |
   '===================================================================================================================================================================='
    These are elements that are used everywhere throughout the website.
*/

/* == Page ===== */
body {
  background-color: var(--bg-dark);
  color: var(--text);
}

/* == Tags ===== */
h2, h4 {
  color: var(--text);
}

hr {
  border-color: var(--border);
}

a {
  color: var(--highlight);
}

/* == Hiding scrollbars ===== */
/* | This affects the whole page, language dropdown and more. */
* when (@scrollbars = 0) {
  /* Edge, IE, Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Chrome, Safari, Opera */
  &::-webkit-scrollbar {
    display: none;
  }
}

/* == Links ===== */
._34v50 {
  color: var(--web-ui_button-color, var(--highlight));
}

/* == Buttons ===== */
._1O290 {
  --web-ui_button-color: var(--text);
}
._2NolF {
  color: var(--web-ui_button-color, var(--bg-dark));
}
._2NolF:before {
  background-color: var(--web-ui_button-background-color, var(--highlight));
  box-shadow: 0 var(--__internal__lip-width) 0 var(--web-ui_button-border-color, var(--hl-shadow));
}
.WOZnx {
  --__internal__border-color: var(--web-ui_button-border-color, var(--border));
  color: var(--web-ui_button-color, var(--text-gray));
}
.WOZnx:before {
  background-color: var(--web-ui_button-background-color, var(--bg-dark));
}
@media (hover: hover) {
  .WOZnx:hover:not(:disabled):not(.LhRk3):not(._1V-dy):not(.iew1c) {
    filter: brightness(1.2);
  }
}

/* == Text box ===== */
._1QDX9 {
  background-color: var(--bg-light);
  border-color: var(--border);
}
._2ti2i {
  background-color: var(--bg-light);
  border-color: var(--border);
  color: var(--text);
  caret-color: var(--highlight);
}
::placeholder {
  color: var(--color-text-gray-placeholder);
}

/* == Popups ===== */
/* Body, connector */
._1KUxv, ._3p5e9 {
  background-color: var(--bg-dark);
  border-color: var(--border);
}
/* Separator in main page sidebar */
._3LIgy {
  border-color: var(--border);
}

/* == Progress bars ===== */
/* Lesson progress, achievements, daily goals */
._2YmyD {
  background-color: var(--web-ui_progress-bar-background, var(--border));
}
/* Progress bar colors */
/* Second selector only applies to the stories */
/* Third selector only applies to the new user survey */
._2nDUm, ._3pjII, ._1PPqZ {
  /* Changing the local values of the variables. */
  --color-owl: 121, 185, 51; /* 0-5 in a row */
  --color-bee: 255, 200, 0; /* 6-10 in a row */
  --color-fox: 255, 171, 51; /* 11 or more in a row */
}
.KAjTN {
  background: var(--web-ui_progress-bar-color);
  opacity: 1;
  filter: hue-rotate(-3deg) saturate(1.04) brightness(1.14);
}

/* Loading dots animation (main domain, forums) */
._1uYPT ._2Amjo,
._1GNtl ._3FISW {
  background-color: var(--border);
}

/* Show more arrow */
._2jNpf {
  filter: var(--filter-text-gray)
}

/* Disabled buttons */
._2HRY_ {
  --web-ui_button-background-color-disabled: var(--bg-dark);
  --web-ui_button-border-color-disabled: var(--border);
  --web-ui_button-color-disabled: var(--border);
}


/*
   .====================================================================================================================================================================.
   |  M...