diff --git a/.gitignore b/.gitignore index 45e876d..d8f62f1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ node_modules/ client/node_modules/ server/node_modules/ +__pycache__/ +*.pyc +*.pyo \ No newline at end of file diff --git a/client/index.html b/client/index.html index 9d50423..04b3411 100644 --- a/client/index.html +++ b/client/index.html @@ -4,6 +4,12 @@ DevStations +
diff --git a/client/src/ThemeContext.jsx b/client/src/ThemeContext.jsx new file mode 100644 index 0000000..0582c9a --- /dev/null +++ b/client/src/ThemeContext.jsx @@ -0,0 +1,24 @@ +import { createContext, useContext, useEffect, useState } from 'react'; + +const ThemeContext = createContext(); + +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState( + () => localStorage.getItem('theme') || 'light' + ); + + useEffect(() => { + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light')); + + return ( + + {children} + + ); +} + +export const useTheme = () => useContext(ThemeContext); diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 22f00d3..0ccd39a 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -1,31 +1,21 @@ -import React from 'react'; import { Link } from 'react-router-dom'; +import { useTheme } from '../ThemeContext'; export default function Navbar() { + const { theme, toggleTheme } = useTheme(); + return ( -