diff --git a/web/default/src/components/html-content.tsx b/web/default/src/components/html-content.tsx
index e31bf820..c9f9f294 100644
--- a/web/default/src/components/html-content.tsx
+++ b/web/default/src/components/html-content.tsx
@@ -134,6 +134,11 @@ function sanitizeHtmlContent(
   return DOMPurify.sanitize(content)
 }
 
+function syncDarkClass(wrapper: HTMLElement): void {
+  const isDark = document.documentElement.classList.contains('dark')
+  wrapper.classList.toggle('dark', isDark)
+}
+
 function IsolatedHtmlContent(props: {
   className?: string
   html: string
@@ -153,13 +158,27 @@ function IsolatedHtmlContent(props: {
         'style, link[rel="stylesheet"]'
       ),
     ].map((node) => node.cloneNode(true))
+
+    const wrapper = document.createElement('div')
+    syncDarkClass(wrapper)
+    wrapper.innerHTML = props.html
+
     const contentTemplate = document.createElement('template')
-    contentTemplate.innerHTML = `${isolatedContentBaseStyles}${props.html}`
+    contentTemplate.innerHTML = isolatedContentBaseStyles
 
     shadowRoot.replaceChildren(
       ...applicationStyleNodes,
-      contentTemplate.content
+      contentTemplate.content,
+      wrapper
     )
+
+    const observer = new MutationObserver(() => syncDarkClass(wrapper))
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    return () => observer.disconnect()
   }, [props.html])
 
   return (