feat: improve dark theme for users with prefers-color-scheme: dark

Found no usages of `.codehilite` css class in built project, so changing to existing `.highlight`

docs/css/dark-mode.css

@@ -66,8 +66,9 @@
   }
   .md-typeset code {
     color: white !important;
-/*  box-shadow: 0.29412em 0 0 hsla(0, 0%, 100%, 0.07),
+    background-color: hsl(0, 0%, 18%) !important;
-    -0.29412em 0 0 hsla(0, 0%, 100%, 0.1);*/
+    box-shadow: 0.29412em 0 0 hsla(0, 0%, 10%, 0.07),
+    -0.29412em 0 0 hsla(0, 0%, 10%, 0.1) !important;
   }
   .md-typeset a code {
     color: #94acff !important;
@@ -79,209 +80,209 @@
     color: #f5f5f5 !important;
     background-color: #313131 !important;
   }
-  .codehilite {
+  .highlight {
     background-color: #44484e !important;
   }
-  .md-typeset .codehilite::-webkit-scrollbar {
+  .md-typeset .highlight::-webkit-scrollbar {
     height: 1rem !important;
   }
-  .codehilite pre {
+  .highlight pre {
     color: #fafafa !important;
     background-color: transparent !important;
   }
-  .codehilite .hll {
+  .highlight .hll {
     background-color: #272822 !important;
   }
-  .codehilite .c {
+  .highlight .c {
     color: #8a8f98 !important;
   }
-  .codehilite .err {
+  .highlight .err {
     color: #960050 !important;
     background-color: #1e0010 !important;
   }
-  .codehilite .k {
+  .highlight .k {
     color: #66d9ef !important;
   }
-  .codehilite .l {
+  .highlight .l {
     color: #ae81ff !important;
   }
-  .codehilite .n {
+  .highlight .n {
     color: #f8f8f2 !important;
   }
-  .codehilite .o {
+  .highlight .o {
     color: #f92672 !important;
   }
-  .codehilite .p {
+  .highlight .p {
     color: #f8f8f2 !important;
   }
-  .codehilite .cm {
+  .highlight .cm {
     color: #8a8f98 !important;
   }
-  .codehilite .cp {
+  .highlight .cp {
     color: #8a8f98 !important;
   }
-  .codehilite .c1 {
+  .highlight .c1 {
     color: #8a8f98 !important;
   }
-  .codehilite .cs {
+  .highlight .cs {
     color: #8a8f98 !important;
   }
-  .codehilite .ge {
+  .highlight .ge {
     font-style: italic !important;
   }
-  .codehilite .gs {
+  .highlight .gs {
     font-weight: bold !important;
   }
-  .codehilite .kc {
+  .highlight .kc {
     color: #66d9ef !important;
   }
-  .codehilite .kd {
+  .highlight .kd {
     color: #66d9ef !important;
   }
-  .codehilite .kn {
+  .highlight .kn {
     color: #f92672 !important;
   }
-  .codehilite .kp {
+  .highlight .kp {
     color: #66d9ef !important;
   }
-  .codehilite .kr {
+  .highlight .kr {
     color: #66d9ef !important;
   }
-  .codehilite .kt {
+  .highlight .kt {
     color: #66d9ef !important;
   }
-  .codehilite .ld {
+  .highlight .ld {
     color: #e6db74 !important;
   }
-  .codehilite .m {
+  .highlight .m {
     color: #ae81ff !important;
   }
-  .codehilite .s {
+  .highlight .s {
     color: #e6db74 !important;
   }
-  .codehilite .na {
+  .highlight .na {
     color: #a6e22e !important;
   }
-  .codehilite .nb {
+  .highlight .nb {
     color: #f8f8f2 !important;
   }
-  .codehilite .nc {
+  .highlight .nc {
     color: #a6e22e !important;
   }
-  .codehilite .no {
+  .highlight .no {
     color: #66d9ef !important;
   }
-  .codehilite .nd {
+  .highlight .nd {
     color: #a6e22e !important;
   }
-  .codehilite .ni {
+  .highlight .ni {
     color: #f8f8f2 !important;
   }
-  .codehilite .ne {
+  .highlight .ne {
     color: #a6e22e !important;
   }
-  .codehilite .nf {
+  .highlight .nf {
     color: #a6e22e !important;
   }
-  .codehilite .nl {
+  .highlight .nl {
     color: #f8f8f2 !important;
   }
-  .codehilite .nn {
+  .highlight .nn {
     color: #f8f8f2 !important;
   }
-  .codehilite .nx {
+  .highlight .nx {
     color: #a6e22e !important;
   }
-  .codehilite .py {
+  .highlight .py {
     color: #f8f8f2 !important;
   }
-  .codehilite .nt {
+  .highlight .nt {
     color: #f92672 !important;
   }
-  .codehilite .nv {
+  .highlight .nv {
     color: #f8f8f2 !important;
   }
-  .codehilite .ow {
+  .highlight .ow {
     color: #f92672 !important;
   }
-  .codehilite .w {
+  .highlight .w {
     color: #f8f8f2 !important;
   }
-  .codehilite .mf {
+  .highlight .mf {
     color: #ae81ff !important;
   }
-  .codehilite .mh {
+  .highlight .mh {
     color: #ae81ff !important;
   }
-  .codehilite .mi {
+  .highlight .mi {
     color: #ae81ff !important;
   }
-  .codehilite .mo {
+  .highlight .mo {
     color: #ae81ff !important;
   }
-  .codehilite .sb {
+  .highlight .sb {
     color: #e6db74 !important;
   }
-  .codehilite .sc {
+  .highlight .sc {
     color: #e6db74 !important;
   }
-  .codehilite .sd {
+  .highlight .sd {
     color: #e6db74 !important;
   }
-  .codehilite .s2 {
+  .highlight .s2 {
     color: #e6db74 !important;
   }
-  .codehilite .se {
+  .highlight .se {
     color: #ae81ff !important;
   }
-  .codehilite .sh {
+  .highlight .sh {
     color: #e6db74 !important;
   }
-  .codehilite .si {
+  .highlight .si {
     color: #e6db74 !important;
   }
-  .codehilite .sx {
+  .highlight .sx {
     color: #e6db74 !important;
   }
-  .codehilite .sr {
+  .highlight .sr {
     color: #e6db74 !important;
   }
-  .codehilite .s1 {
+  .highlight .s1 {
     color: #e6db74 !important;
   }
-  .codehilite .ss {
+  .highlight .ss {
     color: #e6db74 !important;
   }
-  .codehilite .bp {
+  .highlight .bp {
     color: #f8f8f2 !important;
   }
-  .codehilite .vc {
+  .highlight .vc {
     color: #f8f8f2 !important;
   }
-  .codehilite .vg {
+  .highlight .vg {
     color: #f8f8f2 !important;
   }
-  .codehilite .vi {
+  .highlight .vi {
     color: #f8f8f2 !important;
   }
-  .codehilite .il {
+  .highlight .il {
     color: #ae81ff !important;
   }
-  .codehilite .gu {
+  .highlight .gu {
     color: #8a8f98 !important;
   }
-  .codehilite .gd {
+  .highlight .gd {
     color: #9c1042 !important;
     background-color: #eaa;
   }
-  .codehilite .gi {
+  .highlight .gi {
     color: #364c0a !important;
     background-color: #91e891;
   }
   .md-clipboard:before {
     color: rgba(255, 255, 255, 0.31);
   }
-  .codehilite:hover .md-clipboard:before, .md-typeset .highlight:hover .md-clipboard:before, pre:hover .md-clipboard:before {
+  .highlight:hover .md-clipboard:before, .md-typeset .highlight:hover .md-clipboard:before, pre:hover .md-clipboard:before {
     color: rgba(255, 255, 255, 0.6);
   }
   .md-typeset summary:after {