Override highlight theme with custom CSS

1 files changed, 60 insertions, 0 deletions

diff --git a/static/style.css b/static/style.css
index 843d040..45999ed 100644
--- a/static/style.css
+++ b/static/style.css
@@ -23,6 +23,10 @@ body {
     --dark--blockquote-bg-color: #60606020;
     --dark--code-bg-color: #353535;
     --dark--h2-bg-color: #fd501bb0;
+    --dark--syntax-0: #eee;
+    --dark--syntax-1: #ffb29a;
+    --dark--syntax-2: #bbf;
+    --dark--syntax-3: #92d392;
 
     --light--header-color: #1a1a1a;
     --light--p-color: #101010;
@@ -32,6 +36,10 @@ body {
     --light--blockquote-bg-color: #c8c8c820;
     --light--code-bg-color: #eee;
     --light--h2-bg-color: #f73e0030;
+    --light--syntax-0: #101010;
+    --light--syntax-1: #f73e00;
+    --light--syntax-2: #007973;
+    --light--syntax-3: #1038d8;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -44,6 +52,11 @@ body {
         --blockquote-bg-color: var(--dark--blockquote-bg-color);
         --code-bg-color: var(--dark--code-bg-color);
 	--h2-bg-color: var(--dark--h2-bg-color);
+
+	--syntax-0: var(--dark--syntax-0);
+	--syntax-1: var(--dark--syntax-1);
+	--syntax-2: var(--dark--syntax-2);
+	--syntax-3: var(--dark--syntax-3);
     }
 }
 @media (prefers-color-scheme: light) {
@@ -56,6 +69,11 @@ body {
         --blockquote-bg-color: var(--light--blockquote-bg-color);
         --code-bg-color: var(--light--code-bg-color);
 	--h2-bg-color: var(--light--h2-bg-color);
+
+	--syntax-0: var(--light--syntax-0);
+	--syntax-1: var(--light--syntax-1);
+	--syntax-2: var(--light--syntax-2);
+	--syntax-3: var(--light--syntax-3);
     }
 }
 
@@ -68,6 +86,11 @@ html.dark {
     --blockquote-bg-color: var(--dark--blockquote-bg-color);
     --code-bg-color: var(--dark--code-bg-color);
     --h2-bg-color: var(--dark--h2-bg-color);
+
+    --syntax-0: var(--dark--syntax-0);
+    --syntax-1: var(--dark--syntax-1);
+    --syntax-2: var(--dark--syntax-2);
+    --syntax-3: var(--dark--syntax-3);
 }
 
 html.light {
@@ -79,6 +102,11 @@ html.light {
     --blockquote-bg-color: var(--light--blockquote-bg-color);
     --code-bg-color: var(--light--code-bg-color);
     --h2-bg-color: var(--light--h2-bg-color);
+
+    --syntax-0: var(--light--syntax-0);
+    --syntax-1: var(--light--syntax-1);
+    --syntax-2: var(--light--syntax-2);
+    --syntax-3: var(--light--syntax-3);
 }
 
 html {
@@ -261,3 +289,35 @@ table .odd {
 table {
     margin: 20px 0 30px;
 }
+
+/* Syntax highlighting, overrides Pandoc generated styles */
+code.sourceCode span { color: var(--syntax-0); }
+code span.al { color: var(--syntax-1); font-weight: bold; } /* Alert */
+code span.an { color: var(--syntax-0); font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: var(--syntax-3); } /* Attribute */
+code span.bn { color: var(--syntax-3); } /* BaseN */
+code span.bu { color: var(--syntax-3); } /* BuiltIn */
+code span.cf { color: var(--syntax-3); font-weight: bold; } /* ControlFlow */
+code span.ch { color: var(--syntax-2); } /* Char */
+code span.cn { color: var(--syntax-3); } /* Constant */
+code span.co { color: var(--syntax-0); font-style: italic; opacity: 0.7; } /* Comment */
+code span.cv { color: var(--syntax-2); font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: var(--syntax-0); font-style: italic; } /* Documentation */
+code span.dt { color: var(--syntax-1); } /* DataType */
+code span.dv { color: var(--syntax-3); } /* DecVal */
+code span.er { color: var(--syntax-1); font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: var(--syntax-3); } /* Float */
+code span.fu { color: var(--syntax-1); } /* Function */
+code span.im { color: var(--syntax-3); font-weight: bold; } /* Import */
+code span.in { color: var(--syntax-3); font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: var(--syntax-3); font-weight: bold; } /* Keyword */
+code span.op { color: var(--syntax-2); } /* Operator */
+code span.ot { color: var(--syntax-0); } /* Other */
+code span.pp { color: var(--syntax-1); } /* Preprocessor */
+code span.sc { color: var(--syntax-2); } /* SpecialChar */
+code span.ss { color: var(--syntax-2); } /* SpecialString */
+code span.st { color: var(--syntax-2); } /* String */
+code span.va { color: var(--syntax-1); } /* Variable */
+code span.vs { color: var(--syntax-2); } /* VerbatimString */
+code span.wa { color: var(--syntax-3); font-weight: bold; font-style: italic; }