From 7cdbe5543aa89521aa8b650f87d51a86532c3ccb Mon Sep 17 00:00:00 2001 From: YeonV Date: Tue, 12 Nov 2024 03:27:45 +0100 Subject: [PATCH] Optimize Theme-handling --- src/App.tsx | 27 +++++++------------ src/components/Bars/BarTop.tsx | 3 ++- .../Dialogs/FrontendPixelsTooSmall.tsx | 5 ---- src/components/Dialogs/IntroDialog.tsx | 19 +++++++++++++ src/components/Dialogs/SmartBar.tsx | 3 ++- src/pages/User/AvatarPicker/AvatarPicker.tsx | 1 - src/pages/User/User.tsx | 10 +++---- src/store/ui/storeUI.tsx | 9 +++++++ 8 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index abfa33c3..9d029458 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,27 +34,18 @@ export default function App() { // const darkMode = useStore((state) => state.ui.darkMode) const setCoreParams = useStore((state) => state.setCoreParams) const setCoreStatus = useStore((state) => state.setCoreStatus) + const changeTheme = useStore((state) => state.ui.changeTheme) + const reloadTheme = useStore((state) => state.ui.reloadTheme) const theme = useMemo( - () => - createTheme({ - ...ledfxThemes[ledfxTheme], + () => createTheme({ + ...ledfxThemes[window.localStorage.getItem('ledfx-theme') ?? ledfxTheme], ...common, palette: { - ...ledfxThemes[ledfxTheme].palette - // mode: darkMode ? 'dark' : 'light', - // background: darkMode - // ? { - // default: '#030303', - // paper: '#151515', - // } - // : { - // default: '#bbb', - // paper: '#fefefe', - // }, + ...ledfxThemes[window.localStorage.getItem('ledfx-theme') ?? ledfxTheme].palette } }), - [] + [changeTheme] ) useEffect(() => { @@ -154,15 +145,15 @@ export default function App() { if (proto[2] === 'theme') { if (proto[3] === 'light') { window.localStorage.setItem('ledfx-theme', 'LightBlack') - window.location.reload() + reloadTheme() } if (proto[3] === 'dark') { window.localStorage.setItem('ledfx-theme', 'DarkWhite') - window.location.reload() + reloadTheme() } if (proto[3] === 'reset') { window.localStorage.setItem('ledfx-theme', 'DarkOrange') - window.location.reload() + reloadTheme() } } } else if (proto[1] === 'song') { diff --git a/src/components/Bars/BarTop.tsx b/src/components/Bars/BarTop.tsx index 9825d8b2..e0f492ef 100644 --- a/src/components/Bars/BarTop.tsx +++ b/src/components/Bars/BarTop.tsx @@ -215,6 +215,7 @@ const TopBar = () => { const { pathname } = useLocation() const history = useNavigate() const clearSnackbar = useStore((state) => state.ui.clearSnackbar) + const reloadTheme = useStore((state) => state.ui.reloadTheme) const features = useStore((state) => state.features) const platform = useStore((state) => state.platform) const [anchorEl, setAnchorEl] = useState(null) @@ -626,7 +627,7 @@ const TopBar = () => { value={currentTheme} onChange={(e) => { setCurrentTheme(e.target.value) window.localStorage.setItem('ledfx-theme', e.target.value) - window.location.reload() + reloadTheme() }} > {Object.keys(ledfxThemes).map((t) => ( diff --git a/src/components/Dialogs/FrontendPixelsTooSmall.tsx b/src/components/Dialogs/FrontendPixelsTooSmall.tsx index d6e90ca4..86d49732 100644 --- a/src/components/Dialogs/FrontendPixelsTooSmall.tsx +++ b/src/components/Dialogs/FrontendPixelsTooSmall.tsx @@ -39,11 +39,6 @@ export default function FrontendPixelsTooSmall() { ) const setSystemSetting = (setting: string, value: any) => { setSystemConfig({ [setting]: value }).then(() => getSystemConfig()) - // .then(() => { - // setTimeout(() => { - // window.location.reload() - // }, 3000) - // }) } const handleClose = () => setDialogOpenLessPixels(false) diff --git a/src/components/Dialogs/IntroDialog.tsx b/src/components/Dialogs/IntroDialog.tsx index 05e1b37a..ab64096f 100644 --- a/src/components/Dialogs/IntroDialog.tsx +++ b/src/components/Dialogs/IntroDialog.tsx @@ -46,6 +46,7 @@ export default function IntroDialog({ const setIntro = useStore((state) => state.setIntro) const setTour = useStore((state) => state.setTour) const setTourOpen = useStore((state) => state.setTourOpen) + const reloadTheme = useStore((state) => state.ui.reloadTheme) const small = useMediaQuery('(max-width: 720px)') const xsmall = useMediaQuery('(max-width: 600px)') @@ -64,6 +65,8 @@ export default function IntroDialog({ const graphsMulti = useStore((state) => state.graphsMulti) const assistant = useStore((state) => state.assistant) + const coreParams = useStore((state) => state.coreParams) + const isCC = coreParams && Object.keys(coreParams).length > 0 const setAssistant = useStore((state) => state.setAssistant) const toggleGraphsMulti = useStore((state) => state.toggleGraphsMulti) const getSystemConfig = useStore((state) => state.getSystemConfig) @@ -158,6 +161,22 @@ export default function IntroDialog({ }, action_right: handleNext }, + isCC ?? ({ + key: 'theme', + title: 'Choose your Theme', + label_left: 'Lightmode', + label_right: 'Darkmode', + action_left: () => { + window.localStorage.setItem('ledfx-theme', 'LightBlack') + reloadTheme() + handleNext() + }, + action_right: () => { + window.localStorage.setItem('ledfx-theme', 'DarkWhite') + reloadTheme() + handleNext() + } + }), { key: 'gotWled', title: 'Scan for devices?', diff --git a/src/components/Dialogs/SmartBar.tsx b/src/components/Dialogs/SmartBar.tsx index f085ea01..a0f76d55 100644 --- a/src/components/Dialogs/SmartBar.tsx +++ b/src/components/Dialogs/SmartBar.tsx @@ -20,6 +20,7 @@ const Bar = ({ handleClose, direct, maxWidth = 500, inputRef }: any) => { const setShowFeatures = useStore((state) => state.setShowFeatures) const features = useStore((state) => state.features) const setViewMode = useStore((state) => state.setViewMode) + const reloadTheme = useStore((state) => state.ui.reloadTheme) const filterOptions = createFilterOptions({ stringify: (option: any) => Object.keys(option).indexOf('is_device') > -1 @@ -148,7 +149,7 @@ const Bar = ({ handleClose, direct, maxWidth = 500, inputRef }: any) => { 'ledfx-theme', value.replace('theme:', '') ) - window.location.reload() + reloadTheme() } } if (value === 'BladeIsYeon') { diff --git a/src/pages/User/AvatarPicker/AvatarPicker.tsx b/src/pages/User/AvatarPicker/AvatarPicker.tsx index eb7852ba..9864b986 100644 --- a/src/pages/User/AvatarPicker/AvatarPicker.tsx +++ b/src/pages/User/AvatarPicker/AvatarPicker.tsx @@ -222,7 +222,6 @@ const AvatarPicker = ({ console.error(e) } setOpen(false) - // window.location.reload() } const onFileChange = async (e: any) => { diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx index b093ffd3..3b99f454 100644 --- a/src/pages/User/User.tsx +++ b/src/pages/User/User.tsx @@ -70,7 +70,7 @@ const User = () => { const setSystemConfig = useStore((state) => state.setSystemConfig) const scenePL = useStore((state) => state.scenePL) const setScenePL = useStore((state) => state.setScenePL) - + const reloadTheme = useStore((state) => state.ui.reloadTheme) const userName = localStorage.getItem('username') const filteredCloudEffects = {} as any @@ -1049,16 +1049,16 @@ const User = () => { onChange={(e) => { if (e.target.value === 'DarkBlue') { window.localStorage.setItem('ledfx-theme', 'DarkBlue') - window.location.reload() + reloadTheme() } else if (e.target.value === 'DarkOrange') { window.localStorage.setItem('ledfx-theme', 'DarkOrange') - window.location.reload() + reloadTheme() } else if (e.target.value === 'DarkGreen') { window.localStorage.setItem('ledfx-theme', 'DarkGreen') - window.location.reload() + reloadTheme() } else if (e.target.value === 'DarkRed') { window.localStorage.setItem('ledfx-theme', 'DarkRed') - window.location.reload() + reloadTheme() } }} > diff --git a/src/store/ui/storeUI.tsx b/src/store/ui/storeUI.tsx index 23696d4a..e6476430 100644 --- a/src/store/ui/storeUI.tsx +++ b/src/store/ui/storeUI.tsx @@ -112,6 +112,15 @@ const storeUI = (set: any) => ({ false, 'ui/keybinding' ), + changeTheme: false, + reloadTheme: (): void => + set( + produce((state: IStore) => { + state.ui.changeTheme = !state.ui.changeTheme + }), + false, + 'ui/changeTheme' + ), latestTag: pkg.version as string, setLatestTag: (tag: string): void => set(