Add theme switcher button

src/components/FloatingThemeToggleButton.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { Colors } from '@/src/constants';
+import ThemeToggleButton from './ThemeToggleButton';
+import { useMantineColorScheme } from '@mantine/core';
+
+interface FloatingButtonProps {
+  dark: boolean;
+  children: React.ReactNode;
+}
+
+const FloatingButton = styled.div<FloatingButtonProps>`
+  position: fixed;
+  bottom: 120px;
+  right: 20px;
+  z-index: 10;
+  border-radius: 50%;
+  padding: 10px;
+  background-color: ${props => Colors.colorSecondary};
+
+  @media (min-width: 768px) {
+    display: none; /* Hide on larger screens */
+  }
+`;
+
+const FloatingThemeToggleButton = () => {
+  const { colorScheme } = useMantineColorScheme();
+  const isDarkTheme = colorScheme === 'dark';
+
+  return (
+    <FloatingButton dark={isDarkTheme}>
+      <ThemeToggleButton />
+    </FloatingButton>
+  );
+};
+
+export default FloatingThemeToggleButton;

src/components/Layout.tsx

@@ -3,6 +3,8 @@ import Image from 'next/image';
 import styled from 'styled-components';
 import { Colors } from '@/src/constants';
 import Link from 'next/link';
+import ThemeToggleButton from './ThemeToggleButton';
+import FloatingThemeToggleButton from './FloatingThemeToggleButton';
 
 type Props = {
   children?: React.ReactNode;
@@ -26,9 +28,19 @@ const Main = styled.main`
 const Header = styled.div`
   padding: 24px;
   background: ${Colors.headerBg};
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
   align-items: center;
-  justify-content: space-between;
+  grid-gap: 1rem;
+`;
+
+const StyledThemeToggleButton = styled(ThemeToggleButton)`
+  grid-column: 3;
+  display: none; /* Hide by default */
+
+  @media (min-width: 769px) {
+    display: block; /* Show on larger screens */
+  }
 `;
 
 const Title = styled.span`
@@ -38,6 +50,7 @@ const Title = styled.span`
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
+  grid-column: 4;
 `;
 
 const Footer = styled.div`
@@ -69,11 +82,16 @@ const Layout = ({ children }: Props) => {
         <Link href="/">
           <Image src="/devstaff-logo.webp" alt="Devstaff logo" width={153} height={61} priority />
         </Link>
+
+        <StyledThemeToggleButton />
+
         <Title>DevStaff Draw</Title>
       </Header>
-
+      
       <Main>{children}</Main>
 
+      <FloatingThemeToggleButton />
+
       <Footer>
         <Social>
           <a href="https://github.com/devstaff-crete/DevStaff-Heraklion" target="_blank" rel="noreferrer">

src/components/ShareDrawModal.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Anchor, Modal, Stack, Text } from '@mantine/core';
+import { Anchor, Modal, Stack, Text, useMantineColorScheme } from '@mantine/core';
 import Image from 'next/image';
 
 type Props = {
@@ -10,13 +10,16 @@ type Props = {
 const DrawUrlText = styled.text`
   font-weight: bold;
   font-size: 2rem;
-  margin-top: 2rem
+  margin-top: 2rem;
 `;
 
 const ShareDrawModal = ({ open, onClose }: Props) => {
   const drawUrlFull = 'https://devstaff.gr/draw';
   const drawUrl = 'devstaff.gr/draw';
 
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const qrCodeFile = colorScheme === 'dark' ? '/qrcode-white.webp' : '/qrcode.webp';
+
   return (
     <>
       <Modal
@@ -31,7 +34,7 @@ const ShareDrawModal = ({ open, onClose }: Props) => {
       >
         <Stack align="center" spacing={16}>
           <Image
-            src="/qrcode.webp"
+            src={qrCodeFile}
             alt="QR code for sharing the DevStaff Draw website"
             width={370}
             height={370}

src/components/SvgComponent.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+interface SvgProps {
+  size?: number;
+  fill?: string;
+}
+
+const StyledSvg = styled.svg<SvgProps>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  fill: ${({ fill }) => fill};
+`;
+
+const SvgComponent = ({ children, size, fill }: SvgProps & { children: React.ReactNode }) => {
+  return (
+    <StyledSvg size={size} fill={fill}>
+      {children}
+    </StyledSvg>
+  );
+};
+
+export default SvgComponent;

src/components/ThemeToggleButton.tsx

@@ -0,0 +1,73 @@
+import { ActionIcon, Tooltip, useMantineColorScheme } from '@mantine/core';
+import React from 'react';
+import { useMediaQuery } from '@mantine/hooks';
+import SvgComponent from './SvgComponent';
+import { ColorScheme } from '@mantine/core';
+
+type TooltipTextFormat = `Enable ${ColorScheme} theme`;
+
+const ThemeToggleButton = ({ className }: { className?: string }) => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const isDarkTheme = colorScheme === 'dark';
+
+  const tooltipText: TooltipTextFormat = `Enable ${isDarkTheme ? 'light' : 'dark'} theme`;
+
+  const isLargeScreen = useMediaQuery('(min-width: 768px)');
+  const iconConfig = {
+    ...(isDarkTheme
+      ? {
+          file: '/sun.svg',
+          altText: 'Sun icon',
+          color: '#F4AB52FF'
+        }
+      : {
+          file: '/moon.svg',
+          altText: 'Moon icon',
+          color: '#546bab'
+        }),
+    size: isLargeScreen ? 28 : 32
+  };
+  const actionIconSize = iconConfig.size + 2; // 2px for padding
+
+  const icons = {
+    dark: (
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18 2.75C17.586 2.75 17.25 2.414 17.25 2c0-.414.336-.75.75-.75h4c.304 0 .578.183.693.463.116.28.052.603-.163.817l-2.72 2.72H22c.414 0 .75.336.75.75s-.336.75-.75.75h-4c-.303 0-.577-.183-.693-.463-.116-.28-.052-.603.163-.817l2.72-2.72h-1.19zm-4.5 6c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h3c.304 0 .578.183.693.463.116.28.052.603-.163.817l-1.72 1.72h1.19c.414 0 .75.336.75.75s-.336.75-.75.75h-3c-.303 0-.577-.183-.693-.463-.116-.28-.052-.603.163-.817l1.72-1.72h-1.19z"
+        />
+        <path d="M12 22c5.523 0 10-4.477 10-10 0-.463-.693-.539-.933-.143-1.138 1.884-3.205 3.143-5.567 3.143C11.91 15 9 12.09 9 8.5c0-2.362 1.26-4.429 3.143-5.567.396-.24.32-.933-.143-.933-5.523 0-10 4.477-10 10s4.477 10 10 10z" />
+      </svg>
+    ),
+    light: (
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M18 12c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6z" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 1.25c.414 0 .75.336.75.75V3c0 .414-.336.75-.75.75S11.25 3.414 11.25 3V2c0-.414.336-.75.75-.75zM4.399 4.399a.75.75 0 0 1 1.06 0l.393.393a.75.75 0 1 1-1.06 1.06L4.4 5.459a.75.75 0 0 1 0-1.06zm15.202 0a.75.75 0 0 1 0 1.06l-.392.393a.75.75 0 1 1-1.06-1.06l.393-.393a.75.75 0 0 1 1.06 0zM1.25 12c0-.414.336-.75.75-.75h1c.414 0 .75.336.75.75s-.336.75-.75.75h-1a.75.75 0 0 1-.75-.75zm19 0c0-.414.336-.75.75-.75h1c.414 0 .75.336.75.75s-.336.75-.75.75h-1a.75.75 0 0 1-.75-.75zm-1.853 6.147a.75.75 0 0 1 1.06 0l.393.393a.75.75 0 1 1-1.06 1.06l-.393-.393a.75.75 0 0 1 0-1.06zM5.852 18.148a.75.75 0 0 1 1.06 0l.393.393a.75.75 0 1 1-1.06 1.06l-.393-.393a.75.75 0 0 1 0-1.06zm6.148 2.102c.414 0 .75.336.75.75v1c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-1c0-.414.336-.75.75-.75z"
+        />
+      </svg>
+    )
+  };
+
+  const selectedIcon = isDarkTheme ? icons.light : icons.dark;
+
+  return (
+    <Tooltip label={tooltipText}>
+      <ActionIcon
+        variant="transparent"
+        className={className}
+        size={actionIconSize}
+        onClick={() => toggleColorScheme()}
+      >
+        <SvgComponent size={iconConfig.size} fill={iconConfig.color}>
+          {selectedIcon}
+        </SvgComponent>
+      </ActionIcon>
+    </Tooltip>
+  );
+};
+
+export default ThemeToggleButton;

src/pages/_app.tsx

@@ -3,7 +3,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AppProps } from 'next/app';
 import { Cabin } from '@next/font/google';
-import { MantineProvider, PasswordInput } from '@mantine/core';
+import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
+import { useState } from 'react';
 
 const cabin = Cabin({
   subsets: ['latin']
@@ -12,33 +13,40 @@ const cabin = Cabin({
 export default function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
 
+  const [colorScheme, setColorScheme] = useState<ColorScheme>('light');
+  const toggleColorScheme = (value?: ColorScheme) => {
+    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
+  };
+
   return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{
-        /** Put your mantine theme override here */
-        colorScheme: 'light',
-        components: {
-          TextInput: {
-            styles: {
-              input: { fontSize: "16px" },
-            },
-          },
-          PasswordInput: {
-            styles: {
-              innerInput: { fontSize: "16px" },
+    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+      <MantineProvider
+        withGlobalStyles
+        withNormalizeCSS
+        theme={{
+          /** Put your mantine theme override here */
+          colorScheme,
+          components: {
+            TextInput: {
+              styles: {
+                input: { fontSize: '16px' }
+              }
             },
-          },
-        },
-      }}
-    >
-      <QueryClientProvider client={queryClient}>
-        <div className={cabin.className}>
-          <Component {...pageProps} />
-        </div>
-        <ReactQueryDevtools />
-      </QueryClientProvider>
-    </MantineProvider>
+            PasswordInput: {
+              styles: {
+                innerInput: { fontSize: '16px' }
+              }
+            }
+          }
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <div className={cabin.className}>
+            <Component {...pageProps} />
+          </div>
+          <ReactQueryDevtools />
+        </QueryClientProvider>
+      </MantineProvider>
+    </ColorSchemeProvider>
   );
 }