diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 4bb2b81ee..f72ebd178 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -37,6 +37,7 @@ import {Composer} from './Composer.web'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
+  const t = useTheme()
   const navigator = useNavigation<NavigationProp>()
   const closeAllActiveElements = useCloseAllActiveElements()
   const {state: policyUpdateState} = usePolicyUpdateContext()
@@ -45,6 +46,39 @@ function ShellInner() {
   useComposerKeyboardShortcut()
   useIntentHandler()
 
+  useLayoutEffect(() => {
+    const rootElement = document.documentElement
+    rootElement.className = `html`
+    rootElement.style.setProperty(
+      'background',
+      `${t.atoms.bg.backgroundColor}`,
+      'important',
+    )
+  }, [t.atoms.bg.backgroundColor, t.name])
+
+  useLayoutEffect(() => {
+    const color = t.palette.primary_500
+
+    const styleId = 'prosemirror-mention-color'
+    let style = document.getElementById(styleId) as HTMLStyleElement | null
+
+    if (!style) {
+      style = document.createElement('style')
+      style.id = styleId
+      document.head.appendChild(style)
+    }
+
+    style.innerHTML = `
+      .ProseMirror .mention {
+        color: ${color} !important;
+      }
+      .ProseMirror a,
+      .ProseMirror .autolink {
+        color: ${color} !important;
+      }
+    `
+  }, [t.palette.primary_500])
+
   useEffect(() => {
     const unsubscribe = navigator.addListener('state', () => {
       closeAllActiveElements()