parent
9b072fec95
commit
db62005251
3 changed files with 3 additions and 31 deletions
|
@ -1,4 +1,3 @@
|
|||
import Vec from '@tldraw/vec'
|
||||
import * as React from 'react'
|
||||
import { useTLContext } from './useTLContext'
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
Loading…
Reference in a new issue