website: add theme switch for code snippets (#2359)

website/src/_includes/layouts/article.html

@@ -25,7 +25,7 @@
     <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
     <link href="/css/tailwind.css" rel="stylesheet" />
     <link rel="stylesheet" href="/css/blog.css" />
-    <link rel="stylesheet" href="/css/prism.min.css"/>
+    <link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css"/>
     <link href="/css/style.css" rel="stylesheet" />
     <script async defer src="https://buttons.github.io/buttons.js"></script>
   </head>

website/src/_includes/layouts/doc.html

@@ -16,7 +16,7 @@
 
         <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
         <link href="/css/tailwind.css" rel="stylesheet"/>
-        <link rel="stylesheet" href="/css/prism.min.css"/>
+        <link id="prism-theme" rel="stylesheet" href="/css/prism-light.min.css"/>
         <link href="/css/style.css" rel="stylesheet"/>
         <link rel="stylesheet" href="/css/doc.css"/>
         <script async defer src="https://buttons.github.io/buttons.js"></script>

website/src/_includes/navbar.html

@@ -209,6 +209,7 @@ const moonIcon = document.querySelector('.moon');
 
 const userTheme = localStorage.getItem('theme');
 const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const prismThemeLink = document.getElementById('prism-theme')
 
 const iconToggle = () => {
     sunIcon.classList.toggle('hidden');
@@ -219,9 +220,15 @@ const themeCheck = () => {
     if(userTheme === 'dark' || (!userTheme && systemTheme)){
         document.documentElement.classList.add('dark');
         moonIcon.classList.add('hidden');
+        if(prismThemeLink){
+            prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+        }
     }
     else{
         sunIcon.classList.add('hidden');
+        if(prismThemeLink){
+            prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+        }
     }
 }
 
@@ -229,11 +236,17 @@ const themeSwitch = () => {
     if(document.documentElement.classList.contains('dark')){
         document.documentElement.classList.remove('dark');
         localStorage.setItem('theme','light');
+        if(prismThemeLink){
+            prismThemeLink.setAttribute('href','/css/prism-light.min.css')
+        }
         iconToggle();
     }
     else{
         document.documentElement.classList.add('dark');
         localStorage.setItem('theme','dark');
+        if(prismThemeLink){
+            prismThemeLink.setAttribute('href','/css/prism-dark.min.css')
+        }
         iconToggle();
     }
 }

website/src/css/prism-dark.min.css

@@ -0,0 +1,4 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+bash+batch+cmake+dart+docker+git+gradle+haskell+http+java+kotlin+makefile+markdown+markup-templating+nginx+php+plsql+powerquery+powershell+pug+python+jsx+regex+sass+scss+sql+typescript+xml-doc+yaml&plugins=toolbar+copy-to-clipboard */
+code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}
+div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}