kopia lustrzana https://github.com/Tldraw/Tldraw
36 wiersze
1.0 KiB
TypeScript
36 wiersze
1.0 KiB
TypeScript
import React from 'react'
|
|
import { useValue } from 'signia-react'
|
|
import { debugFlags } from '../utils/debug-flags'
|
|
import { useApp } from './useApp'
|
|
import { useContainer } from './useContainer'
|
|
|
|
export function useDarkMode() {
|
|
const app = useApp()
|
|
const container = useContainer()
|
|
const isDarkMode = useValue('isDarkMode', () => app.isDarkMode, [app])
|
|
const forceSrgb = useValue(debugFlags.forceSrgb)
|
|
|
|
React.useEffect(() => {
|
|
if (isDarkMode) {
|
|
container.setAttribute('data-color-mode', 'dark')
|
|
container.classList.remove('tl-theme__light')
|
|
container.classList.add('tl-theme__dark')
|
|
app.setCursor({
|
|
color: 'white',
|
|
})
|
|
} else {
|
|
container.setAttribute('data-color-mode', 'light')
|
|
container.classList.remove('tl-theme__dark')
|
|
container.classList.add('tl-theme__light')
|
|
app.setCursor({
|
|
color: 'black',
|
|
})
|
|
}
|
|
if (forceSrgb) {
|
|
container.classList.add('tl-theme__force-sRGB')
|
|
} else {
|
|
container.classList.remove('tl-theme__force-sRGB')
|
|
}
|
|
}, [app, container, forceSrgb, isDarkMode])
|
|
}
|