dark hihi

src/App.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import '../src/styles/App.scss';
 import Router from "./config/Router";
+import ThemeContextProvider, {useTheme} from "./utils/contexts/ThemeContext";
 
 function App() {
-  return (
-    <Router/>
-  );
+
+    const {isDarkMode} = useTheme();
+
+    return (
+        <div className={`app ${isDarkMode ? 'dark' : 'light'}`}>
+            <Router/>
+        </div>
+    );
 }
 
 export default App;

src/index.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import ThemeContextProvider from "./utils/contexts/ThemeContext";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+      <ThemeContextProvider>
+          <App />
+      </ThemeContextProvider>
   </React.StrictMode>
 );

src/layout/pages/MainLobby.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
+import {useTheme} from "../../utils/contexts/ThemeContext";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
 
@@ -26,11 +27,11 @@ const MainLobby = () => {
             <div className={"main-lobby__container"}>
                 <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>
-                    <Card cardString={'SPADES ACE'} isClickable />
+                    <Card cardString={'SPADES ACE'} isClickable/>
                 </div>
                 <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
                     <h2 className={"mau"}>Join Game</h2>
-                    <Card cardString={'SPADES ACE'} isHidden isClickable />
+                    <Card cardString={'SPADES ACE'} isHidden isClickable/>
                 </div>
             </div>
         </div>

src/styles/App.scss

@@ -7,6 +7,11 @@
   src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
 }
 
+.app {
+  width: 100vw;
+  height: 100vh;
+}
+
 .mau {
   font-family: "Mau", serif;
 }

src/styles/utils/_utils.scss

@@ -1 +1,2 @@
-@import "pointer";
+@import "pointer";
+@import "theme";

src/styles/utils/theme.scss

@@ -0,0 +1,8 @@
+.dark {
+  background-color: #333;
+  color: #fff;
+}
+.light {
+  background-color: #fff;
+  color: #333;
+}

src/utils/contexts/ThemeContext.tsx

@@ -23,4 +23,6 @@ const ThemeContextProvider = ({children}: any) => {
             {children}
         </ThemeContext.Provider>
     );
-};
+};
+
+export default ThemeContextProvider;