Fix dark theme UI (#161)

* Fix theming

* Cleanup

* Update tldraw.tsx
This commit is contained in:
Steve Ruiz 2021-10-17 06:59:10 +01:00 committed by GitHub
parent 9b072fec95
commit db62005251
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 31 deletions

View file

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

View file

@ -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

View file

@ -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()