PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Adds dark mode

Browse source
This commit is contained in:
Steve Ruiz 2021-07-10 21:39:29 +01:00
parent 8807aaf1b9
commit 1965c97f68
27 changed files with 428 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/style-panel/color-content.tsx
View file

@ -6,6 +6,7 @@ import { Square } from 'react-feather'
import { DropdownContent } from '../shared'
import { memo } from 'react'
import state from 'state'
import useTheme from 'hooks/useTheme'
function handleColorChange(
e: Event & { currentTarget: { value: ColorStyle } }
@ -14,9 +15,11 @@ function handleColorChange(
}
function ColorContent(): JSX.Element {
const { theme } = useTheme()
return (
<DropdownContent sideOffset={8} side="bottom">
{Object.keys(strokes).map((color: ColorStyle) => (
{Object.keys(strokes[theme]).map((color: ColorStyle) => (
<DropdownMenu.DropdownMenuItem
as={IconButton}
key={color}
@ -24,7 +27,7 @@ function ColorContent(): JSX.Element {
value={color}
onSelect={handleColorChange}
>
<Square fill={strokes[color]} stroke="none" size="22" />
<Square fill={strokes[theme][color]} stroke="none" size="22" />
</DropdownMenu.DropdownMenuItem>
))}
</DropdownContent>

6
components/style-panel/quick-color-select.tsx
View file

@ -1,19 +1,21 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { breakpoints, IconButton } from 'components/shared'
import Tooltip from 'components/tooltip'
import { strokes } from 'state/shape-styles'
import { fills, strokes } from 'state/shape-styles'
import { useSelector } from 'state'
import ColorContent from './color-content'
import { BoxIcon } from '../shared'
import useTheme from 'hooks/useTheme'
export default function QuickColorSelect(): JSX.Element {
const color = useSelector((s) => s.values.selectedStyle.color)
const { theme } = useTheme()
return (
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
<Tooltip label="Color">
<BoxIcon fill={strokes[color]} stroke={strokes[color]} />
<BoxIcon fill={fills[theme][color]} stroke={strokes[theme][color]} />
</Tooltip>
</DropdownMenu.Trigger>
<ColorContent />