🌜 Exercism Dark Mode 2022: A potentially buggy but beautifully dark theme

exercism-dark-mode.css

.theme-light {
  --backgroundColorA: var(--c-282339);
  --backgroundColorA-RGB: 40,35,57;
  --backgroundColorB: var(--c-211D2F);
  --backgroundColorC: var(--c-302B42);
  --backgroundColorD: var(--c-3A3557);
  --backgroundColorE: var(--c-4A475F);
  --backgroundColorF: var(--c-191525);
  --backgroundColorG: var(--c-2F2943);
  --borderColor3: var(--c-8480A0);
  --borderColor5: var(--c-433F56);
  --borderColor6: var(--c-433F56);
  --borderColor7: var(--c-533F56);
  --textColor1: var(--c-FFFFFF);
  --textColor2: var(--c-F0F3F9);
  --textColor5: var(--c-CBC9D9);
  --textColor6: var(--c-A9A6BD);
  --textColor7: var(--c-6A6781);
  --textColor9: var(--c-000000);
  --linkColor: var(--c-7097FF);
  --buttonBorderColor1: var(--c-8480A0);
  --buttonBorderColor2: var(--c-6A6781);
  --inputBackgroundColor: var(--c-282339);
  --inputBorderColorFocus: var(--c-8480A0);
  --tabBackgroundColorSelected: var(--c-604FCD);
  --successColor: var(--c-4FCDA7);
  --chartBorderColor: var(--c-6A6781);
  --paginationCurrentBorderColor: var(--c-6A6781);
  --paginationCurrentBackgroundColor: var(--c-403A66);
  --modalBackgroundColor: rgba(40,35,57,.7);
  --box-shadow-sm: 0px 4px 16px 0px rgba(0,0,0,.2);
  --box-shadow-base: 0px 4px 24px 0px rgba(0,0,0,.15);
  --box-shadow-lg: 0px 4px 42px 0px rgba(0,0,0,.6);
  --box-shadow-lgZ1: 0px 4px 42px 0px rgba(0,0,0,.9);
  --orange-filter: invert(100%) sepia(52%) saturate(2878%) hue-rotate(329deg) brightness(106%) contrast(96%);
  --textColor2-filter: invert(93%) sepia(31%) saturate(246%) hue-rotate(177deg) brightness(100%) contrast(96%);
  --textColor6-filter: invert(71%) sepia(18%) saturate(258%) hue-rotate(208deg) brightness(93%) contrast(86%);
  --buttonBorderColor1-filter: invert(52%) sepia(9%) saturate(862%) hue-rotate(208deg) brightness(97%) contrast(95%);
  --primary-reputation-filter: invert(88%) sepia(37%) saturate(870%) hue-rotate(355deg) brightness(90%) contrast(96%);
  --light-gold-filter: invert(79%) sepia(31%) saturate(572%) hue-rotate(340deg) brightness(105%) contrast(101%);
  --linkColor-filter: var(--filter-7097FF);
  --exercise-header-gradient: none;
  background-color: var(--backgroundColorB);
  color: var(--textColor5);
}

.theme-light #page-dashboard {
  background-image: linear-gradient(180deg,hsl(220deg 100% 4%) 70px,hsl(220deg 100% 4% / 0%) 290px);
}

#site-header .announcement-bar,
.bg-white,
.c-concepts-map .track .layer .card.mastered,
.c-concepts-map .track .layer .card,
.c-ed.--available,
#page-dashboard header.dashboard-header .intro p.cta,
#page-track-show article.summary-article,
#page-exercise-show section.mentoring-discussion-nudge,
#page-exercise-show section.mentoring-prompt-nudge,
#page-exercise-show section.mentoring-request-nudge {
  background-color: var(--backgroundColorB);
}
#page-track-about .features-section {
  background: var(--backgroundColorB);
}

#site-footer {
  background-color: var(--backgroundColorC); 
}
#page-track-show article {
  background: var(--backgroundColorC); 
}

.c-header-with-bg,
.c-exercise-widget.--recommended {
  background: var(--backgroundColorF);  
}


#page-track-show article.updates-article section.contributors-section .cta {
  background: rgb(9 13 22 / var(--tw-bg-opacity));
}

#page-track-about .about-section .inner .info .c-textual-content .c-expander.compressed .content:after {
  box-shadow: 0 0 25px 15px hsl(254, 24%, 18%);
}

.theme-light .hljs {
  background: #282c34;
  color: #abb2bf;
}
.c-copy-text-to-clipboard {
  color: var(--textColor1);
}

#page-exercise-show .action-box h4 {
  color: rgb(238 240 245 / var(--tw-text-opacity));
}

.theme-dark .c-icon.--hex {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIxLjI5IDIuMTRhNS45NSA1Ljk1IDAgMCAxIDUuOTUgMGwxNC42NTkgOC40NjNhNS45NSA1Ljk1IDAgMCAxIDIuOTc0IDUuMTUydjE2LjkyN2E1Ljk1IDUuOTUgMCAwIDEtMi45NzQgNS4xNTJsLTE0LjY2IDguNDY0YTUuOTUgNS45NSAwIDAgMS01Ljk0OCAwTDYuNjMgMzcuODM0YTUuOTUgNS45NSAwIDAgMS0yLjk3NC01LjE1MlYxNS43NTVhNS45NSA1Ljk1IDAgMCAxIDIuOTc0LTUuMTUybDE0LjY2LTguNDYzWiIgZmlsbD0iIzE5MTUyNSIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDAuNzgzIDEyLjUzNSAyNi4xMjQgNC4wNzJhMy43MTggMy43MTggMCAwIDAtMy43MTggMGwtMTQuNjYgOC40NjNhMy43MTggMy43MTggMCAwIDAtMS44NTggMy4yMnYxNi45MjdjMCAxLjMyOS43MDggMi41NTYgMS44NTkgMy4yMmwxNC42NTkgOC40NjRhMy43MTggMy43MTggMCAwIDAgMy43MTggMGwxNC42Ni04LjQ2M2EzLjcxOCAzLjcxOCAwIDAgMCAxLjg1OC0zLjIyVjE1Ljc1NGEzLjcxOCAzLjcxOCAwIDAgMC0xLjg1OS0zLjIyWk0yNy4yNCAyLjE0YTUuOTUgNS45NSAwIDAgMC01Ljk1IDBMNi42MzIgMTAuNjAzYTUuOTUgNS45NSAwIDAgMC0yLjk3NCA1LjE1MnYxNi45MjdhNS45NSA1Ljk1IDAgMCAwIDIuOTc0IDUuMTUybDE0LjY2IDguNDY0YTUuOTUgNS45NSAwIDAgMCA1Ljk0OSAwbDE0LjY1OS04LjQ2NGE1Ljk1IDUuOTUgMCAwIDAgMi45NzQtNS4xNTJWMTUuNzU1YTUuOTUgNS45NSAwIDAgMC0yLjk3NC01LjE1MkwyNy4yMzkgMi4xNFoiIGZpbGw9IiMxOTE1MjUiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTM5LjU5NSAxNC4wOCAyNS4zODEgNS44NzNhMi4yMyAyLjIzIDAgMCAwLTIuMjMxIDBMOC45MzUgMTQuMDhhMi4yMzEgMi4yMzEgMCAwIDAtMS4xMTUgMS45MzJ2MTYuNDEzYzAgLjc5OC40MjUgMS41MzQgMS4xMTUgMS45MzNsMTQuMjE1IDguMjA2Yy42OS4zOTkgMS41NC4zOTkgMi4yMyAwbDE0LjIxNS04LjIwNmEyLjIzMSAyLjIzMSAwIDAgMCAxLjExNS0xLjkzMlYxNi4wMTFjMC0uNzk3LS40MjUtMS41MzMtMS4xMTUtMS45MzJabS0xMy4xLTEwLjEzOWE0LjQ2MiA0LjQ2MiAwIDAgMC00LjQ2IDBMNy44MiAxMi4xNDhhNC40NjIgNC40NjIgMCAwIDAtMi4yMzEgMy44NjR2MTYuNDEzYzAgMS41OTUuODUgMy4wNjggMi4yMyAzLjg2NWwxNC4yMTUgOC4yMDZhNC40NjIgNC40NjIgMCAwIDAgNC40NjIgMEw0MC43MSAzNi4yOWE0LjQ2MiA0LjQ2MiAwIDAgMCAyLjIzMS0zLjg2NFYxNi4wMTFjMC0xLjU5NC0uODUtMy4wNjctMi4yMy0zLjg2NEwyNi40OTUgMy45NDFaIiBmaWxsPSIjM0YzQTVBIi8+PC9zdmc+");
}