51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import { useSelector } from 'react-redux'
|
|
import useMediaQuery from '@material-ui/core/useMediaQuery'
|
|
import themes from './index'
|
|
import { AUTO_THEME_ID } from '../consts'
|
|
import config from '../config'
|
|
import { useEffect } from 'react'
|
|
|
|
const useCurrentTheme = () => {
|
|
const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)')
|
|
const theme = useSelector((state) => {
|
|
if (state.theme === AUTO_THEME_ID) {
|
|
return prefersLightMode ? themes.LightTheme : themes.DarkTheme
|
|
}
|
|
const themeName =
|
|
Object.keys(themes).find((t) => t === state.theme) ||
|
|
Object.keys(themes).find(
|
|
(t) => themes[t].themeName === config.defaultTheme
|
|
) ||
|
|
'DarkTheme'
|
|
return themes[themeName]
|
|
})
|
|
|
|
useEffect(() => {
|
|
const styles = document.getElementsByTagName('style')
|
|
let style
|
|
for (let i = 0; i < styles.length; i++) {
|
|
if (styles[i].id === 'nd-player-style-override') {
|
|
style = styles[i]
|
|
}
|
|
}
|
|
if (theme.player.stylesheet) {
|
|
if (style === undefined) {
|
|
style = document.createElement('style')
|
|
style.id = 'nd-player-style-override'
|
|
style.innerHTML = theme.player.stylesheet
|
|
document.head.appendChild(style)
|
|
} else {
|
|
style.innerHTML = theme.player.stylesheet
|
|
}
|
|
} else {
|
|
if (style !== undefined) {
|
|
document.head.removeChild(style)
|
|
}
|
|
}
|
|
}, [theme])
|
|
|
|
return theme
|
|
}
|
|
|
|
export default useCurrentTheme
|