Dynamic dark theme for prism and mermaid

build/prism/prism.js

@@ -65,7 +65,13 @@ var css = () => {
 
   fs.writeFileSync(
     path.resolve(__dirname, 'tmp/prism.min.css'),
-    csso.minify(source).css,
+    csso.minify(source).css
+      .replace('background:0 0;', '')
+      .replace('background:#f5f2f0', '')
+      .replace('border-radius:.3em', '')
+      .replace('padding:1em;', '')
+      .replace('margin:.5em 0;', '')
+      .replace('background:rgba(255,255,255,.5)', ''),
     'utf8'
   )
 
@@ -76,7 +82,12 @@ var css = () => {
 
   fs.writeFileSync(
     path.resolve(__dirname, 'tmp/prism-okaidia.min.css'),
-    csso.minify(source).css,
+    csso.minify(source).css
+      .replace('background:0 0;', '')
+      .replace('background:#272822', '')
+      .replace('border-radius:.3em', '')
+      .replace('padding:1em;', '')
+      .replace('margin:.5em 0;', ''),
     'utf8'
   )
 }

build/prism/prism.json

@@ -52,7 +52,6 @@
     "markup",
     "markup-templating",
     "matlab",
-    "mermaid",
     "nginx",
     "objectivec",
     "ocaml",
@@ -205,6 +204,7 @@
     "mata",
     "maxscript",
     "mel",
+    "mermaid",
     "metafont",
     "mizar",
     "mongodb",

content/index.css

@@ -473,13 +473,6 @@ body._toc-right { padding-right: 300px !important; }
 /*---------------------------------------------------------------------------*/
 /*theme fixes*/
 
-/*code block*/
-._theme-retro pre,
-._theme-sakura-vader pre,
-._theme-water-dark pre {
-  background-color: #161b22 !important;
-}
-
 /*github-dark*/
 ._theme-github-dark {
   background-color:#0d1117;

content/index.js

@@ -12,6 +12,40 @@ var state = {
   toc: '',
   interval: null,
   ms: 1000,
+  _themes: {
+    'github': 'auto',
+    'github-dark': 'dark',
+    'almond': 'light',
+    'air': 'auto',
+    'awsm': 'light',
+    'axist': 'light',
+    'bamboo': 'auto',
+    'bullframe': 'light',
+    'holiday': 'auto',
+    'kacit': 'light',
+    'latex': 'light',
+    'marx': 'auto',
+    'mini': 'light',
+    'modest': 'auto',
+    'new': 'auto',
+    'no-class': 'auto',
+    'pico': 'auto',
+    'retro': 'dark',
+    'sakura': 'light',
+    'sakura-vader': 'dark',
+    'semantic': 'auto',
+    'simple': 'auto',
+    'splendor': 'auto',
+    'style-sans': 'light',
+    'style-serif': 'light',
+    'stylize': 'auto',
+    'superstylin': 'auto',
+    'tacit': 'light',
+    'vanilla': 'auto',
+    'water': 'light',
+    'water-dark': 'dark',
+    'writ': 'auto',
+  }
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
@@ -94,13 +128,18 @@ function mount () {
           $('body').classList.add(`_theme-${state.theme}`)
 
           if (state.content.syntax) {
-            var prism = ['github-dark', 'markdown-retro', 'sakura-vader', 'water-dark']
-              .includes(state.theme) ? 'prism-okaidia' : 'prism'
+            var prism =
+              state._themes[state.theme] === 'dark' ||
+              (state._themes[state.theme] === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? 'prism-okaidia' : 'prism'
             dom.push(m('link#_prism', {
               rel: 'stylesheet', type: 'text/css',
               href: chrome.runtime.getURL(`/vendor/${prism}.min.css`),
             }))
           }
+          if (state.content.mermaid) {
+            mmd.refresh()
+          }
         }
         if (state.html) {
           dom.push(m('#_html', {oncreate: oncreate.html,

content/mermaid.js

@@ -1,9 +1,40 @@
 
+var mmd = {
+  loaded: false,
+  refresh: () => {
+    if (!mmd.loaded) {
+      return
+    }
+
+    var walk = (regex, string, result = [], match = regex.exec(string)) =>
+      !match ? result : walk(regex, string, result.concat(match[1]))
+
+    var definitions = walk(/<pre><code class="language-(?:mermaid|mmd)">([\s\S]+?)<\/code><\/pre>/gi, state.html)
+
+    Array.from(document.querySelectorAll('pre code.language-mermaid, pre code.language-mmd')).forEach((diagram, index) => {
+      diagram.removeAttribute('data-processed')
+      diagram.innerHTML = definitions[index]
+    })
+
+    mmd.render()
+  },
+  render: () => {
+    mermaid.initialize({
+      theme:
+        state._themes[state.theme] === 'dark' ||
+        (state._themes[state.theme] === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ? 'dark' : 'default'
+    })
+    mermaid.init({}, 'code.language-mmd, code.language-mermaid')
+    mmd.loaded = true
+  }
+}
+
 ;(() => {
   var timeout = setInterval(() => {
     if (!!(window.mermaid && mermaid.init)) {
       clearInterval(timeout)
-      mermaid.init({}, 'code.language-mmd, code.language-mermaid')
+      mmd.render()
     }
-  }, 50)
+  }, 100)
 })()