fix(theme): 🎨 Change primary color & add theme toggle

BuildTheEarth · Jul 30, 2024 · 3f0094e · 3f0094e
1 parent 3468390
commit 3f0094e
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 23 deletions.
diff --git a/src/components/core/ThemeIcon.tsx b/src/components/core/ThemeIcon.tsx
@@ -0,0 +1,21 @@
+import { ActionIcon, Tooltip, useMantineColorScheme } from "@mantine/core";
+import { IconLock, IconMoon, IconSun } from "@tabler/icons-react";
+
+import { useColorScheme } from "@mantine/hooks";
+
+export default function ThemeIcon() {
+  const colorScheme = useMantineColorScheme();
+  const Icon = colorScheme.colorScheme === "dark" ? IconSun : IconMoon;
+  return (
+    <Tooltip label="Toggle Color Scheme" openDelay={500}>
+      <ActionIcon
+        variant={"default"}
+        size="sm"
+        onClick={colorScheme.toggleColorScheme}
+        color={colorScheme.colorScheme == "light" ? "yellow" : undefined}
+      >
+        <Icon style={{ width: "70%", height: "70%" }} stroke={1.5} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
diff --git a/src/components/layout/admin/navbar.tsx b/src/components/layout/admin/navbar.tsx
@@ -1,12 +1,10 @@
 "use client";
 
-import { ActionIcon, AppShellNavbar, Group, Image, Text } from "@mantine/core";
-import { adminNavLinks, toolsNavLiks } from "@/util/links";
+import { AppShellNavbar, Group, Image, Text } from "@mantine/core";
 
-import { IconLock } from "@tabler/icons-react";
+import ThemeIcon from "@/components/core/ThemeIcon";
 import classes from "@/styles/BuildTeamNavbar.module.css";
-import useAvailableBuildTeam from "@/hooks/useAvailableBuildTeam";
-import { useSession } from "next-auth/react";
+import { adminNavLinks } from "@/util/links";
 
 export interface AdminNavbar {
   currentLink: string;
@@ -38,9 +36,7 @@ export default function AdminNavbar(props: AdminNavbar) {
               Admin
             </Text>
           </Group>
-          <ActionIcon variant="default" size="sm">
-            <IconLock style={{ width: "70%", height: "70%" }} stroke={1.5} />
-          </ActionIcon>
+          <ThemeIcon />
         </Group>
         <div className={classes.navbarLinks}>{links}</div>
       </div>

diff --git a/src/components/layout/buildTeam/navbar.tsx b/src/components/layout/buildTeam/navbar.tsx
@@ -2,6 +2,7 @@
 
 import { ActionIcon, AppShellNavbar, Group, Image, Text } from "@mantine/core";
 
+import ThemeIcon from "@/components/core/ThemeIcon";
 import { UserButton } from "@/components/core/UserButton";
 import useAvailableBuildTeam from "@/hooks/useAvailableBuildTeam";
 import classes from "@/styles/BuildTeamNavbar.module.css";
@@ -44,9 +45,7 @@ export default function BuildTeamNavbar(props: BuildTeamNavbar) {
               BuildTheEarth
             </Text>
           </Group>
-          <ActionIcon variant="default" size="sm">
-            <IconLock style={{ width: "70%", height: "70%" }} stroke={1.5} />
-          </ActionIcon>
+          <ThemeIcon />
         </Group>
         <div className={classes.navbarLinks}>{links}</div>
       </div>

diff --git a/src/components/layout/tools/navbar.tsx b/src/components/layout/tools/navbar.tsx
@@ -2,9 +2,10 @@
 
 import { ActionIcon, AppShellNavbar, Group, Image, Text } from "@mantine/core";
 
-import { IconLock } from "@tabler/icons-react";
+import ThemeIcon from "@/components/core/ThemeIcon";
 import classes from "@/styles/BuildTeamNavbar.module.css";
 import { toolsNavLiks } from "@/util/links";
+import { IconLock } from "@tabler/icons-react";
 
 export interface ToolsNavbar {
   currentLink: string;
@@ -36,9 +37,7 @@ export default function ToolsNavbar(props: ToolsNavbar) {
               Tools
             </Text>
           </Group>
-          <ActionIcon variant="default" size="sm">
-            <IconLock style={{ width: "70%", height: "70%" }} stroke={1.5} />
-          </ActionIcon>
+          <ThemeIcon />
         </Group>
         <div className={classes.navbarLinks}>{links}</div>
       </div>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,20 +7,20 @@ import "@mantine/nprogress/styles.css";
 import "@mantine/spotlight/styles.css";
 import "mantine-datatable/styles.layer.css";
 
-import type { AppProps } from "next/app";
+import SWRSetup from "@/components/core/SWRSetup";
+import { theme } from "@/util/theme";
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import SWRSetup from "@/components/core/SWRSetup";
 import { SessionProvider } from "next-auth/react";
-import { theme } from "@/util/theme";
+import type { AppProps } from "next/app";
 
 export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps) {
   return (
     <SessionProvider session={session}>
-      <MantineProvider theme={theme}>
+      <MantineProvider theme={theme} defaultColorScheme="dark">
         <SWRSetup>
           <Notifications limit={3} />
           <Component {...pageProps} />

diff --git a/src/styles/BuildTeamNavbar.module.css b/src/styles/BuildTeamNavbar.module.css
@@ -38,11 +38,11 @@
   &[data-active="true"] {
     &,
     &:hover {
-      background-color: var(--mantine-color-teal-light);
-      color: var(--mantine-color-teal-light-color);
+      background-color: var(--mantine-color-cyan-light);
+      color: var(--mantine-color-cyan-light-color);
 
       .navbarLinkIcon {
-        color: var(--mantine-color-teal-light-color);
+        color: var(--mantine-color-cyan-light-color);
       }
     }
   }

diff --git a/src/util/theme.ts → src/util/theme/index.ts b/src/util/theme.ts → src/util/theme/index.ts
@@ -4,5 +4,5 @@ import { createTheme } from "@mantine/core";
  * Main Mantine Theme of the Website
  */
 export const theme = createTheme({
-  primaryColor: "teal",
+  primaryColor: "cyan",
 });