fix: get theme on inital load

Author: stonith404

frontend/package-lock.json

@@ -22,6 +22,7 @@
     "jose": "^4.8.1",
     "moment": "^2.29.3",
     "next": "^12.3.1",
+    "next-cookies": "^2.0.3",
     "next-http-proxy-middleware": "^1.2.4",
     "next-pwa": "^5.5.2",
     "react": "18.0.0",

frontend/package.json

@@ -8,8 +8,9 @@ import {
 import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
-import { getCookie, setCookies } from "cookies-next";
+import { setCookies } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
+import cookies from "next-cookies";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
 import Footer from "../components/Footer";
@@ -22,9 +23,7 @@ import globalStyle from "../styles/mantine.style";
 import { CurrentUser } from "../types/user.type";
 import { GlobalLoadingContext } from "../utils/loading.util";
 
-function App(
-  props: AppProps & { colorScheme: ColorScheme; environmentVariables: any }
-) {
+function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
 
   const systemTheme = useColorScheme();
@@ -91,6 +90,6 @@ export default App;
 
 App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
   return {
-    colorScheme: getCookie("color-schema") || "light",
+    colorScheme: cookies(ctx)["color-schema"] || "light",
   };
 };