1
0
mirror of https://github.com/Radarr/Radarr.git synced 2026-04-24 22:35:49 -04:00

New: Dark theme for login screen

(cherry picked from commit cae134ec7b331d1c906343716472f3d043614b2c)

Closes #9998
This commit is contained in:
Mark McDowall
2024-05-03 20:53:03 -07:00
committed by Bogdan
parent cd4552ce6f
commit 8b79b5afbf
8 changed files with 131 additions and 76 deletions
+37
View File
@@ -0,0 +1,37 @@
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.Radarr.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;