Fix dark mode in portaled floating liveblocks elements

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -39,7 +39,7 @@ import { canvasPointToWindowPoint } from '../dom-lookup'
 import { useRemixNavigationContext } from '../remix/utopia-remix-root-component'
 import { optionalMap } from '../../../core/shared/optional-utils'
 import { setRightMenuTab } from '../../editor/actions/action-creators'
-import { RightMenuTab, getCurrentTheme } from '../../editor/store/editor-state'
+import { RightMenuTab } from '../../editor/store/editor-state'
 import { when } from '../../../utils/react-conditionals'
 import { CommentRepliesCounter } from './comment-replies-counter'
 
@@ -363,11 +363,6 @@ const HoveredCommentIndicator = React.memo((props: HoveredCommentIndicatorProps)
   const { thread, hidden, cancelHover, draggingCallback } = props
 
   const dispatch = useDispatch()
-  const theme = useEditorState(
-    Substores.userState,
-    (store) => getCurrentTheme(store.userState),
-    'HoveredCommentIndicator theme',
-  )
 
   const { location, scene: commentScene } = useCanvasLocationOfThread(thread)
 
@@ -461,7 +456,6 @@ const HoveredCommentIndicator = React.memo((props: HoveredCommentIndicatorProps)
           overflow: 'auto',
           background: 'transparent',
         }}
-        data-theme={theme}
         user={user}
         comment={comment}
         showActions={false}

editor/src/components/canvas/controls/comment-popup.tsx

@@ -24,16 +24,7 @@ import { create } from '../../../core/shared/property-path'
 import { assertNever } from '../../../core/shared/utils'
 import { CommentWrapper, MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { when } from '../../../utils/react-conditionals'
-import {
-  Button,
-  FlexColumn,
-  FlexRow,
-  Icn,
-  Tooltip,
-  UtopiaStyles,
-  colorTheme,
-  useColorTheme,
-} from '../../../uuiui'
+import { Button, FlexRow, Icn, Tooltip, UtopiaStyles, colorTheme } from '../../../uuiui'
 import {
   setProp_UNSAFE,
   setRightMenuTab,
@@ -47,14 +38,13 @@ import {
   isNewComment,
 } from '../../editor/editor-modes'
 import { useDispatch } from '../../editor/store/dispatch-context'
-import { RightMenuTab, getCurrentTheme } from '../../editor/store/editor-state'
+import { RightMenuTab } from '../../editor/store/editor-state'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
 import { stopPropagation } from '../../inspector/common/inspector-utils'
 import { canvasPointToWindowPoint } from '../dom-lookup'
 import { RemixNavigationAtom } from '../remix/utopia-remix-root-component'
 import { getIdOfScene } from './comment-mode/comment-mode-hooks'
 import { motion, useAnimation } from 'framer-motion'
-import { CSSCursor } from '../canvas-types'
 import type { EditorDispatch } from '../../editor/action-types'
 
 export const ComposerEditorClassName = 'lb-composer-editor'
@@ -147,12 +137,6 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
     }
   }, [])
 
-  const theme = useEditorState(
-    Substores.userState,
-    (store) => getCurrentTheme(store.userState),
-    'CommentThread theme',
-  )
-
   const onCreateThread = React.useCallback(
     ({ body }: ComposerSubmitComment, event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault()
@@ -406,7 +390,6 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
           </div>
           <Composer
             ref={composerRef}
-            data-theme={theme}
             autoFocus
             threadId={thread.id}
             onComposerSubmit={onSubmitComment}
@@ -430,12 +413,6 @@ type NewCommentPopupProps = {
 const NewCommentPopup = React.memo((props: NewCommentPopupProps) => {
   const dispatch = useDispatch()
 
-  const theme = useEditorState(
-    Substores.userState,
-    (store) => getCurrentTheme(store.userState),
-    'NewCommentPopup theme',
-  )
-
   const onNewCommentComposerKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => switchToBasicCommentModeOnEscape(e, dispatch),
     [dispatch],
@@ -525,7 +502,6 @@ const NewCommentPopup = React.memo((props: NewCommentPopupProps) => {
       </div>
       <motion.div animate={newCommentComposerAnimation}>
         <Composer
-          data-theme={theme}
           autoFocus
           onComposerSubmit={props.onComposerSubmit}
           style={ComposerStyle}

editor/src/components/editor/editor-component.tsx

@@ -69,6 +69,7 @@ import { isRoomId, projectIdToRoomId } from '../../core/shared/multiplayer'
 import { useDisplayOwnershipWarning } from './project-owner-hooks'
 import { EditorModes } from './editor-modes'
 import { allowedToEditProject } from './store/collaborative-editing'
+import { useDataThemeAttributeOnBody } from '../../core/commenting/comment-hooks'
 
 const liveModeToastId = 'play-mode-toast'
 
@@ -534,6 +535,8 @@ export function EditorComponent(props: EditorProps) {
 
   const dispatch = useDispatch()
 
+  useDataThemeAttributeOnBody()
+
   const roomId = React.useMemo(
     () => (projectId == null ? generateUUID() : projectIdToRoomId(projectId)),
     [projectId],

editor/src/core/commenting/comment-hooks.tsx

@@ -27,6 +27,7 @@ import { getIdOfScene } from '../../components/canvas/controls/comment-mode/comm
 import type { ElementPath } from '../shared/project-file-types'
 import type { ElementInstanceMetadata } from '../shared/element-template'
 import * as EP from '../shared/element-path'
+import { getCurrentTheme } from '../../components/editor/store/editor-state'
 
 export function useCanvasCommentThreadAndLocation(comment: CommentId): {
   location: CanvasPoint | null
@@ -357,3 +358,14 @@ export function useDeleteThreadReadStatus() {
     }
   }, [])
 }
+
+export function useDataThemeAttributeOnBody() {
+  const theme = useEditorState(
+    Substores.userState,
+    (store) => getCurrentTheme(store.userState),
+    'useDataThemeAttributeOnBody theme',
+  )
+  React.useEffect(() => {
+    document.body.setAttribute('data-theme', theme)
+  }, [theme])
+}

editor/src/utils/multiplayer-wrapper.tsx

@@ -10,8 +10,6 @@ import {
   normalizeMultiplayerName,
 } from '../core/shared/multiplayer'
 import { ErrorBoundary } from './react-error-boundary'
-import { Substores, useEditorState } from '../components/editor/store/store-hook'
-import { getCurrentTheme } from '../components/editor/store/editor-state'
 
 type Fallback = NonNullable<React.ReactNode> | null
 
@@ -30,14 +28,8 @@ MultiplayerWrapper.displayName = 'MultiplayerWrapper'
 
 export const CommentWrapper = React.memo(
   ({ user, ...commentProps }: { user: UserMeta | null } & CommentProps) => {
-    const theme = useEditorState(
-      Substores.userState,
-      (store) => getCurrentTheme(store.userState),
-      'CommentWrapper theme',
-    )
-
     if (user == null) {
-      return <Comment data-theme={theme} {...commentProps} />
+      return <Comment {...commentProps} />
     }
     return (
       <div style={{ position: 'relative' }}>
@@ -54,7 +46,7 @@ export const CommentWrapper = React.memo(
           }}
           picture={user.avatar}
         />
-        <Comment data-theme={theme} {...commentProps} />
+        <Comment {...commentProps} />
       </div>
     )
   },