Co-Authored-By: Zak Saunders <1936903+thezak48@users.noreply.github.com>pull/7767/head
parent
7d4865dea3
commit
850bfdcf82
@ -1,13 +1,13 @@
|
|||||||
.torrent {
|
.torrent {
|
||||||
composes: label from '~Components/Label.css';
|
composes: label from '~Components/Label.css';
|
||||||
|
|
||||||
border-color: $torrentColor;
|
border-color: var(--torrentColor);
|
||||||
background-color: $torrentColor;
|
background-color: var(--torrentColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.usenet {
|
.usenet {
|
||||||
composes: label from '~Components/Label.css';
|
composes: label from '~Components/Label.css';
|
||||||
|
|
||||||
border-color: $usenetColor;
|
border-color: var(--usenetColor);
|
||||||
background-color: $usenetColor;
|
background-color: var(--usenetColor);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,49 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Fragment, useCallback, 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.Radarr.theme,
|
||||||
|
(
|
||||||
|
theme
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
theme
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ApplyTheme({ theme, children }) {
|
||||||
|
// Update the CSS Variables
|
||||||
|
const updateCSSVariables = useCallback(() => {
|
||||||
|
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]
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
// On Component Mount and Component Update
|
||||||
|
useEffect(() => {
|
||||||
|
updateCSSVariables(theme);
|
||||||
|
}, [updateCSSVariables, theme]);
|
||||||
|
|
||||||
|
return <Fragment>{children}</Fragment>;
|
||||||
|
}
|
||||||
|
|
||||||
|
ApplyTheme.propTypes = {
|
||||||
|
theme: PropTypes.string.isRequired,
|
||||||
|
children: PropTypes.object.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(ApplyTheme);
|
@ -1,5 +1,5 @@
|
|||||||
.movie {
|
.movie {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid $borderColor;
|
border-bottom: 1px solid var(--borderColor);
|
||||||
}
|
}
|
||||||
|
@ -1,29 +1,29 @@
|
|||||||
.queue {
|
.queue {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $queueColor;
|
border-left: 4px solid var(--queueColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.continuing {
|
.continuing {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $primaryColor;
|
border-left: 4px solid var(--primaryColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.availNotMonitored {
|
.availNotMonitored {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $darkGray;
|
border-left: 4px solid var(--darkGray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ended {
|
.ended {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $successColor;
|
border-left: 4px solid var(--successColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.missingMonitored {
|
.missingMonitored {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $dangerColor;
|
border-left: 4px solid var(--dangerColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.missingUnmonitored {
|
.missingUnmonitored {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
border-left: 4px solid $warningColor;
|
border-left: 4px solid var(--warningColor);
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue