Codeblocks: Move color theming to the codeblocks stylesheet

assets/css/050_codeblocks.css

@@ -22,3 +22,222 @@
     margin-inline: var(--gutter-width);
   }
 }
+
+
+
+
+
+/**********************
+ # 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;
+}
+
+
+.codeblock {
+  .err {
+    color: var(--red);
+  }
+
+  /* line link */
+  .lnlinks {
+    outline: none;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .line {
+    display: flex;
+  }
+
+  /* keyword */
+  .k {
+    color: var(--purple);
+  }
+
+  /* keyword: constant */
+  /* keyword: declaration */
+  /* keyword: pseudo */
+  /* keyword: reserved */
+  .kc, .kd, .kp, .kr {
+    color: var(--orange);
+  }
+
+  /* keyword: namespace */
+  .kn {
+    color: var(--yellow);
+  }
+
+  /* keyword: type */
+  .kt {
+    color: var(--yellow);
+    font-weight: bolder;
+  }
+
+  /* line highlight */
+  .hl {
+    background-color: var(--selection);
+  }
+
+  /* line numbers */
+  .ln {
+    white-space: pre;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: var(--text-color-secondary);
+  }
+
+  /* name: attribute */
+  /* name: class */
+  /* name: decorator */
+  .na, .nc, .nd {
+    color: var(--green);
+  }
+
+  /* name: constant */
+  .no {
+    color: var(--cyan);
+  }
+
+  /* name: exception */
+  .ne {
+    color: var(--pink);
+    font-weight: bolder;
+  }
+
+  /* name: function */
+  .nf {
+    color: var(--green);
+  }
+
+  /* name: other */
+  .nx {
+    color: var(--green);
+  }
+
+  /* name: tag */
+  .nt {
+    color: var(--red);
+  }
+
+  /* literal */
+  .l {
+    color: var(--cyan);
+  }
+
+  /* literal: date */
+  .ld {
+    color: var(--yellow);
+  }
+
+  /* literal: string, delimiter */
+  /* literal: string */
+  /* literal: string, backtick */
+  /* literal: string, char */
+  .dl, .s, .sb, .sc {
+    color: var(--yellow);
+  }
+
+  /* literal: number */
+  /* literal: number, bin */
+  /* literal: number, float */
+  /* literal: number, hex */
+  /* literal: number, integer */
+  /* literal: number, integer, long
+  /* literal: number, octal */
+  .il, .m, .mb, .mf, .mh, .mi, .mo {
+    color: var(--yellow);
+    font-weight: bolder;
+  }
+
+  /* name: built-in */
+  .nb {
+    color: var(--green);
+  }
+
+  /* Operator */
+  .o {
+    color: var(--orange);
+  }
+
+  /* operator: word */
+  .ow {
+    color: var(--red);
+  }
+
+  /* literal: string, double */
+  /* literal: string, doc */
+  /* literal: string, heredoc */
+  /* literal: string, interpol */
+  /* literal: string, other */
+  .s2, .sd, .sh, .si, .sx {
+    color: var(--yellow);
+  }
+
+  /* literal: string escape */
+  .se {
+    color: var(--purple);
+  }
+
+  /* literal: string, regex */
+  .sr {
+    color: var(--green);
+  }
+
+  /* literal: string, affix */
+  /* literal: string, single */
+  /* literal: string, symbol */
+  .sa, .s1, .ss {
+    color: var(--yellow);
+  }
+
+  /* comment */
+  /* comment: hashbang */
+  /* comment: multiline */
+  /* comment: single */
+  /* comment: special */
+  /* comment: preproc */
+  /* comment: preproc file */
+  .c, .ch, .cm, .c1, .cs, .cp, .cpf {
+    color: var(--comment);
+  }
+
+  /* generic: deleted */
+  .gd {
+    color: var(--red);
+  }
+
+  /* generic: emphasized */
+  .ge {
+    font-style: italic;
+  }
+
+  /* generic: inserted */
+  .gi {
+    color: var(--green);
+  }
+
+  /* generic: string */
+  .gs {
+    font-weight: bold;
+  }
+
+  /* generic: subheading */
+  .gu {
+    color: var(--text-color-secondary);
+  }
+}