Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a way to change the primary color in the App.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 15:59:51 +02:00
parent d46bca3e39
commit 6b04de8cd8
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/App.jsx
View File

@ -4,19 +4,28 @@ import "@/common/styles/main.sass";
import {BrowserRouter} from "react-router-dom"; import {BrowserRouter} from "react-router-dom";
import Header from "@/common/components/Header"; import Header from "@/common/components/Header";
import Content from "@/common/components/Content"; import Content from "@/common/components/Content";
import {useState} from "react"; import {useEffect, useState} from "react";
import {StatusProvider} from "@/common/contexts/Status"; import {StatusProvider} from "@/common/contexts/Status";
import {ToastNotificationProvider} from "@/common/contexts/ToastNotification";
const App = () => { const App = () => {
const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth >= 1024); const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth >= 1024);
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primary-color") || "#E3703F");
useEffect(() => {
document.documentElement.style.setProperty("--primary", primaryColor);
}, [primaryColor]);
return ( return (
<> <>
<BrowserRouter> <BrowserRouter>
<StatusProvider> <StatusProvider>
<Sidebar open={sidebarOpen} setOpen={setSidebarOpen}/> <ToastNotificationProvider>
<Header open={sidebarOpen} setOpen={setSidebarOpen} /> <Sidebar open={sidebarOpen} setOpen={setSidebarOpen}/>
<Content/> <Header open={sidebarOpen} setOpen={setSidebarOpen} />
<Content/>
</ToastNotificationProvider>
</StatusProvider> </StatusProvider>
</BrowserRouter> </BrowserRouter>
</> </>