light theme support for syntax highlight

Author: rhee876527

public/highlightjs/v11.11.1/stackoverflow-light.min.css

@@ -0,0 +1,13 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: StackOverflow Light
+  Description: Light theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

public/tmpl.html

@@ -7,7 +7,17 @@
     <title>Paste {{.Title}}</title>
     <link rel="stylesheet" href="/output.css">
     <script src="/highlightjs/v11.11.1/highlight.min.js"></script>
-    <link rel="stylesheet" href="/highlightjs/v11.11.1/stackoverflow-dark.min.css">
+    <link
+        rel="stylesheet"
+        href="/highlightjs/v11.11.1/stackoverflow-light.min.css"
+        media="(prefers-color-scheme: light)"
+        >
+
+        <link
+        rel="stylesheet"
+        href="/highlightjs/v11.11.1/stackoverflow-dark.min.css"
+        media="(prefers-color-scheme: dark)"
+        >
     <script src="/marked/v17.0.1/marked.umd.js"></script>
     <script src="/dompurify/v3.3.0/purify.min.js"></script>
 </head>
@@ -402,7 +412,7 @@ <h1 class="text-3xl font-bold text-center mb-4">{{.Title}}</h1>
                 'p': 'mb-3',
                 'ul': 'list-disc ml-7 mb-3',
                 'ol': 'list-decimal ml-7 mb-3',
-                'pre': 'bg-gray-900 p-3 rounded-md mb-3 text-gray-100 whitespace-pre-wrap break-words max-w-full',
+                'pre': '[background-color:#f5f5f5] dark:[background-color:#111827] p-3 rounded-md mb-3 text-gray-100 whitespace-pre-wrap break-words max-w-full',
                 'pre code': 'p-0 m-0 bg-transparent text-inherit whitespace-pre-wrap break-words max-w-full',
                 'code': 'bg-inherit px-1.5 py-0.5 rounded text-slate-400 text-sm',
                 'strong': 'font-bold',