diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js index e8761a3..607b8ab 100644 --- a/code/frontend/src/App.js +++ b/code/frontend/src/App.js @@ -10,50 +10,11 @@ import PageRepositories from "./routes/PageRepositories" import PageAlerts from "./routes/PageAlerts" import PageSettings from "./routes/PageSettings" import PageSandbox from "./routes/PageSandbox" +import useSavedTheme from "./hooks/useSavedTheme" export default function App() { - const loadTheme = () => { - if(localStorage) { - console.debug(`Loading theme from localStorage...`) - let value = localStorage.getItem("theme") - - if(value) { - console.debug(`Loaded theme ${value}!`) - return value - } - else { - console.debug(`There is no theme stored in the localStorage; setting to "ThemeDark"...`) - return "ThemeDark" - } - } - else { - console.warn(`Can't load theme; localStorage doesn't seem to be available; setting to "ThemeDark"...`) - return "ThemeDark" - } - } - - const [theme, _setTheme] = useState(loadTheme()); - - const setTheme = (value) => { - console.debug(`Changing theme to ${value}...`) - _setTheme(value) - } - - const saveTheme = (value) => { - if(localStorage) { - console.debug(`Saving theme ${value} to localStorage...`) - localStorage.setItem("theme", value) - } - else { - console.warn(`Can't save theme; localStorage doesn't seem to be available...`) - } - } - - const setAndSaveTheme = (value) => { - setTheme(value) - saveTheme(value) - } + const [theme, setAndSaveTheme] = useSavedTheme(); return ( diff --git a/code/frontend/src/hooks/useSavedTheme.js b/code/frontend/src/hooks/useSavedTheme.js new file mode 100644 index 0000000..aa67f00 --- /dev/null +++ b/code/frontend/src/hooks/useSavedTheme.js @@ -0,0 +1,48 @@ +import { useState } from "react" + + +export default function useSavedTheme() { + const loadTheme = () => { + if(localStorage) { + console.debug(`Loading theme from localStorage...`) + let value = localStorage.getItem("theme") + + if(value) { + console.debug(`Loaded theme ${value}!`) + return value + } + else { + console.debug(`There is no theme stored in the localStorage; setting to "ThemeDark"...`) + return "ThemeDark" + } + } + else { + console.warn(`Can't load theme; localStorage doesn't seem to be available; setting to "ThemeDark"...`) + return "ThemeDark" + } + } + + const [theme, _setTheme] = useState(loadTheme()); + + const setTheme = (value) => { + console.debug(`Changing theme to ${value}...`) + _setTheme(value) + } + + const saveTheme = (value) => { + if(localStorage) { + console.debug(`Saving theme ${value} to localStorage...`) + localStorage.setItem("theme", value) + } + else { + console.warn(`Can't save theme; localStorage doesn't seem to be available...`) + } + } + + const setAndSaveTheme = (value) => { + setTheme(value) + saveTheme(value) + } + + return [theme, setAndSaveTheme] +} \ No newline at end of file