From 02fdd058ece338d936b566027128f6faf1699807 Mon Sep 17 00:00:00 2001 From: M Sarmad Qadeer Date: Mon, 1 May 2023 13:44:15 +0500 Subject: [PATCH] website: add theme switch for code snippets (#2359) --- website/src/_includes/layouts/article.html | 2 +- website/src/_includes/layouts/doc.html | 2 +- website/src/_includes/navbar.html | 13 +++++++++++++ website/src/css/prism-dark.min.css | 4 ++++ .../src/css/{prism.min.css => prism-light.min.css} | 0 5 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 website/src/css/prism-dark.min.css rename website/src/css/{prism.min.css => prism-light.min.css} (100%) diff --git a/website/src/_includes/layouts/article.html b/website/src/_includes/layouts/article.html index a4cf610ae..783b6ece7 100644 --- a/website/src/_includes/layouts/article.html +++ b/website/src/_includes/layouts/article.html @@ -25,7 +25,7 @@ - + diff --git a/website/src/_includes/layouts/doc.html b/website/src/_includes/layouts/doc.html index 04b4b9992..091f98bdc 100644 --- a/website/src/_includes/layouts/doc.html +++ b/website/src/_includes/layouts/doc.html @@ -16,7 +16,7 @@ - + diff --git a/website/src/_includes/navbar.html b/website/src/_includes/navbar.html index 5b4de5a9e..50fca514b 100644 --- a/website/src/_includes/navbar.html +++ b/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(); } } diff --git a/website/src/css/prism-dark.min.css b/website/src/css/prism-dark.min.css new file mode 100644 index 000000000..f5720ca22 --- /dev/null +++ b/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} \ No newline at end of file diff --git a/website/src/css/prism.min.css b/website/src/css/prism-light.min.css similarity index 100% rename from website/src/css/prism.min.css rename to website/src/css/prism-light.min.css