You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
990 B
38 lines
990 B
5 months ago
|
import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
|
||
|
import { useSelector } from 'react-redux';
|
||
|
import { createSelector } from 'reselect';
|
||
|
import themes from 'Styles/Themes';
|
||
|
import AppState from './State/AppState';
|
||
|
|
||
|
interface ApplyThemeProps {
|
||
|
children: ReactNode;
|
||
|
}
|
||
|
|
||
|
function createThemeSelector() {
|
||
|
return createSelector(
|
||
|
(state: AppState) => state.settings.ui.item.theme || window.Lidarr.theme,
|
||
|
(theme) => {
|
||
|
return theme;
|
||
|
}
|
||
|
);
|
||
|
}
|
||
|
|
||
|
function ApplyTheme({ children }: ApplyThemeProps) {
|
||
|
const theme = useSelector(createThemeSelector());
|
||
|
|
||
|
const updateCSSVariables = useCallback(() => {
|
||
|
Object.entries(themes[theme]).forEach(([key, value]) => {
|
||
|
document.documentElement.style.setProperty(`--${key}`, value);
|
||
|
});
|
||
|
}, [theme]);
|
||
|
|
||
|
// On Component Mount and Component Update
|
||
|
useEffect(() => {
|
||
|
updateCSSVariables();
|
||
|
}, [updateCSSVariables, theme]);
|
||
|
|
||
|
return <Fragment>{children}</Fragment>;
|
||
|
}
|
||
|
|
||
|
export default ApplyTheme;
|