Replace bespoke codeblock theme with Dracula theme

https://draculatheme.com

assets/css/010_colors.css

@@ -131,24 +131,29 @@ hr {
  # SYNTAX HIGHLIGHTING
  **********************/
 
+.color-theme__dracula {
+  --background: #282A36;
+  --foreground: #f8f8f2;
+  --selection: #44475A;
+  --comment: #6272A4;
+  --red: #ff5555;
+  --orange: #ffB86C;
+  --yellow: #F1FA8C;
+  --green: #50FA7B;
+  --purple: #BD93F9;
+  --cyan: #8BE9FD;
+  --pink: #FF79C6;
+}
+
+
 .content {
   .codeblock {
-    --blue: rgb(28 168 239);
-    --purple: rgb(197 141 244);
-    --orange: rgb(from rgb(255 171 131) calc(r * 0.9) calc(g * 0.9) calc(b * 0.9));
-    --green: #77c881;
-    --yellow: rgb(248 232 93);
-
-    color: var(--gray2);
-
-    --background-color-factor: 0.95;
-    background-color: #edeff4;
-
+    color: var(--foreground);
+    background-color: var(--background);
     border: 1px solid var(--gray6);
 
     .err {
-      color: #960050;
-      background-color: #1e0010
+      color: var(--red);
     }
 
     /* line link */
@@ -164,43 +169,31 @@ hr {
 
     /* keyword */
     .k {
-      color: var(--blue);
+      color: var(--purple);
     }
 
     /* keyword: constant */
-    .kc {
-      color: #66d9ef;
-    }
-
     /* keyword: declaration */
-    .kd {
-      color: #66d9ef
+    /* keyword: pseudo */
+    /* keyword: reserved */
+    .kc, .kd, .kp, .kr {
+      color: var(--orange);
     }
 
     /* keyword: namespace */
     .kn {
-      color: #f92672
-    }
-
-    /* keyword: pseudo */
-    .kp {
-      color: #66d9ef
-    }
-
-    /* keyword: reserved */
-    .kr {
-      color: #66d9ef
+      color: var(--yellow);
     }
 
     /* keyword: type */
     .kt {
-      color: var(--blue);
+      color: var(--yellow);
       font-weight: bolder;
     }
 
     /* line highlight */
     .hl {
-      background-color: #3c3d38
+      background-color: var(--selection);
     }
 
     /* line numbers */

layouts/_default/_markup/render-codeblock.html

@@ -1,4 +1,4 @@
 {{- $highlighted := transform.HighlightCodeBlock . -}}
-<pre class="codeblock">
+<pre class="codeblock  color-theme__dracula">
 {{- $highlighted.Inner -}}
 </pre>