fix(assets): apply correct json-viewer theme after content decryption

apps/test/content/posts/encryption-test/index.md

@@ -26,6 +26,17 @@ $$ \ce{CO2 + C -> 2 CO} $$
 
 $$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
 
+## JSON
+
+```json
+{
+  "name": "fixit",
+  "version": "1.0.0",
+  "description": "A Hugo theme for creating encrypted content.",
+  "author": "Lruihao"
+}
+```
+
 ## style
 
 {{< style "text-align:right; strong{color:#00b1ff;}" >}}

assets/js/lib/json-viewer.ts

@@ -8,8 +8,8 @@
 import { eventBus } from '../core/event-bus'
 import { isDarkMode } from '../utils'
 
-function applyJsonViewerTheme(isDark: boolean) {
-  document.querySelectorAll('json-viewer').forEach(($el: Element) => {
+function applyJsonViewerTheme(isDark: boolean, scope: Element | Document = document) {
+  scope.querySelectorAll('json-viewer').forEach(($el: Element) => {
     $el.setAttribute('theme', isDark ? 'dark' : 'light')
   })
 }
@@ -25,4 +25,8 @@ document.addEventListener('DOMContentLoaded', () => {
       return
     applyJsonViewerTheme(detail.isDark)
   })
+
+  eventBus.on('fixit:content-decrypted', ({ detail }) => {
+    applyJsonViewerTheme(isDarkMode(), detail.target)
+  })
 }, false)