mirror of https://github.com/lidarr/Lidarr
50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
|
import PropTypes from 'prop-types';
|
||
|
import React, { Fragment, useEffect } from 'react';
|
||
|
import { connect } from 'react-redux';
|
||
|
import { createSelector } from 'reselect';
|
||
|
import themes from 'Styles/Themes';
|
||
|
|
||
|
function createMapStateToProps() {
|
||
|
return createSelector(
|
||
|
(state) => state.settings.ui.item.theme || window.Lidarr.theme,
|
||
|
(
|
||
|
theme
|
||
|
) => {
|
||
|
return {
|
||
|
theme
|
||
|
};
|
||
|
}
|
||
|
);
|
||
|
}
|
||
|
|
||
|
function ApplyTheme({ theme, children }) {
|
||
|
// Update the CSS Variables
|
||
|
function updateCSSVariables() {
|
||
|
const arrayOfVariableKeys = Object.keys(themes[theme]);
|
||
|
const arrayOfVariableValues = Object.values(themes[theme]);
|
||
|
|
||
|
// Loop through each array key and set the CSS Variables
|
||
|
arrayOfVariableKeys.forEach((cssVariableKey, index) => {
|
||
|
// Based on our snippet from MDN
|
||
|
document.documentElement.style.setProperty(
|
||
|
`--${cssVariableKey}`,
|
||
|
arrayOfVariableValues[index]
|
||
|
);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// On Component Mount and Component Update
|
||
|
useEffect(() => {
|
||
|
updateCSSVariables(theme);
|
||
|
}, [theme]);
|
||
|
|
||
|
return <Fragment>{children}</Fragment>;
|
||
|
}
|
||
|
|
||
|
ApplyTheme.propTypes = {
|
||
|
theme: PropTypes.string.isRequired,
|
||
|
children: PropTypes.object.isRequired
|
||
|
};
|
||
|
|
||
|
export default connect(createMapStateToProps)(ApplyTheme);
|