Fix dark theme UI (#161)

* Fix theming

* Cleanup

* Update tldraw.tsx

packages/core/src/hooks/useCanvasEvents.tsx

@@ -1,4 +1,3 @@
-import Vec from '@tldraw/vec'
 import * as React from 'react'
 import { useTLContext } from './useTLContext'
 

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react'
 import { IdProvider } from '@radix-ui/react-id'
 import { Renderer } from '@tldraw/core'
-import css from '~styles'
+import css, { dark } from '~styles'
 import { Data, TLDrawDocument, TLDrawStatus, TLDrawUser } from '~types'
 import { TLDrawState } from '~state'
-import {
-  TLDrawContext,
-  useCustomFonts,
-  useKeyboardShortcuts,
-  useThemeEffect,
-  useTLDrawContext,
-} from '~hooks'
+import { TLDrawContext, useCustomFonts, useKeyboardShortcuts, useTLDrawContext } from '~hooks'
 import { tldrawShapeUtils } from '~shape'
 import { StylePanel } from '~components/style-panel'
 import { ToolsPanel } from '~components/tools-panel'
@@ -151,8 +145,6 @@ function InnerTldraw({
 
   const rWrapper = React.useRef<HTMLDivElement>(null)
 
-  useThemeEffect(rWrapper)
-
   const page = useSelector(pageSelector)
 
   const pageState = useSelector(pageStateSelector)
@@ -217,7 +209,7 @@ function InnerTldraw({
   }, [currentPageId, tlstate])
 
   return (
-    <div ref={rWrapper} tabIndex={0} className={layout()}>
+    <div ref={rWrapper} tabIndex={0} className={[layout(), isDarkMode ? dark : ''].join(' ')}>
       <OneOff focusableRef={rWrapper} autofocus={autofocus} />
       <ContextMenu>
         <Renderer

packages/tldraw/src/hooks/useTheme.ts

@@ -1,27 +1,8 @@
-import React from 'react'
 import type { Data, Theme } from '~types'
 import { useTLDrawContext } from './useTLDrawContext'
-import { dark } from '~styles'
 
 const themeSelector = (data: Data): Theme => (data.settings.isDarkMode ? 'dark' : 'light')
 
-export function useThemeEffect(ref: React.RefObject<HTMLDivElement>) {
-  const { useSelector } = useTLDrawContext()
-
-  const theme = useSelector(themeSelector)
-
-  React.useEffect(() => {
-    const elm = ref.current
-    if (!elm) return
-
-    if (theme === 'dark') {
-      elm.classList.add(dark)
-    } else {
-      elm.classList.remove(dark)
-    }
-  }, [theme])
-}
-
 export function useTheme() {
   const { tlstate, useSelector } = useTLDrawContext()