Switch the Prism styles to CSS variables

assets/stylesheets/components/_prism.scss

@@ -1,3 +1,20 @@
+html {
+  --prismValue: #905;
+  --prismText: #5e8e01;
+  --prismOperator: #a67f59;
+  --prismKeyword: #0070a3;
+  --prismFunction: #dd4a68;
+  --prismVariable: #e90;
+}
+html.dark {
+  --prismValue: #eb8160;
+  --prismText: #ddcf88;
+  --prismOperator: #b1c676;
+  --prismKeyword: #91b3ed;
+  --prismFunction: #c79e6b;
+  --prismVariable: #e9c062;
+}
+
 .token.comment,
 .token.prolog,
 .token.doctype,
@@ -17,11 +34,7 @@
 .token.constant,
 .token.symbol,
 .token.deleted {
-  @if $style == 'dark' {
+  color: var(--prismValue);
-    color: #eb8160;
-  } @else {
-    color: #905;
-  }
 }
 
 .token.selector,
@@ -30,11 +43,7 @@
 .token.char,
 .token.builtin,
 .token.inserted {
-  @if $style == 'dark' {
+  color: var(--prismText);
-    color: #ddcf88;
-  } @else {
-    color: #5e8e01;
-  }
 }
 
 .token.operator,
@@ -42,39 +51,23 @@
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  @if $style == 'dark' {
+  color: var(--prismOperator);
-    color: #b1c676;
-  } @else {
-    color: #a67f59;
-  }
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  @if $style == 'dark' {
+  color: var(--prismKeyword);
-    color: #91b3ed;
-  } @else {
-    color: #0070a3;
-  }
 }
 
 .token.function {
-  @if $style == 'dark' {
+  color: var(--prismFunction);
-    color: #c79e6b;
-  } @else {
-    color: #dd4a68;
-  }
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-  @if $style == 'dark' {
+  color: var(--prismVariable);
-    color: #e9c062;
-  } @else {
-    color: #e90;
-  }
 }
 
 .token.important,