✨Auth Page Dark/Light mode toggle button (#1265)

* ✨ Dark/Light toggle button

* 💄 Moved button to top right

* 💄 Moved button to top right

* ✨ Toggle Button component + integrations

* 💄 Rounding corners + Floating background onboard

src/components/ThemeSchemeToggle/ThemeSchemeToggle.tsx

@@ -0,0 +1,23 @@
+import {
+  ActionIcon,
+  ActionIconProps,
+} from '@mantine/core';
+import { useColorScheme } from '~/hooks/use-colorscheme';
+import { IconMoonStars, IconSun } from '@tabler/icons-react';
+
+export const ThemeSchemeToggle = (props : Partial<ActionIconProps>) => {
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
+
+  return (
+    <ActionIcon
+      size={50}
+      variant="outline"
+      radius="md"
+      onClick={toggleColorScheme}
+      {...props}
+    >
+      <Icon size="66%"/>
+    </ActionIcon>
+  );
+};

src/pages/auth/invite/[inviteId].tsx

@@ -21,6 +21,7 @@ import { useState } from 'react';
 import { z } from 'zod';
 import { PasswordRequirements } from '~/components/Password/password-requirements';
 import { FloatingBackground } from '~/components/layout/Background/FloatingBackground';
+import { ThemeSchemeToggle } from '~/components/ThemeSchemeToggle/ThemeSchemeToggle';
 import { getServerAuthSession } from '~/server/auth';
 import { prisma } from '~/server/db';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -108,6 +109,7 @@ export default function AuthInvitePage() {
 
       <Flex h="100dvh" display="flex" w="100%" direction="column" align="center" justify="center">
         <FloatingBackground />
+        <ThemeSchemeToggle pos="absolute" top={20} right={20} />
         <Card withBorder shadow="md" p="xl" radius="md" w="90%" maw={420}>
           <Title align="center" weight={900}>
             {t('title')}

src/pages/auth/login.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionIcon,
   Alert,
   Button,
   Card,
@@ -24,6 +25,7 @@ import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
 import { signInSchema } from '~/validations/user';
+import { ThemeSchemeToggle } from '~/components/ThemeSchemeToggle/ThemeSchemeToggle';
 
 export default function LoginPage() {
   const { t } = useTranslation('authentication/login');
@@ -66,6 +68,7 @@ export default function LoginPage() {
 
       <Flex h="100dvh" display="flex" w="100%" direction="column" align="center" justify="center">
         <FloatingBackground />
+        <ThemeSchemeToggle pos="absolute" top={20} right={20}/>
         <Stack spacing={40} align="center" w="100%">
           <Stack spacing={0} align="center">
             <Image src="/imgs/logo/logo.svg" width={80} height={80} alt="" />
@@ -114,7 +117,7 @@ export default function LoginPage() {
                   {...form.getInputProps('password')}
                 />
 
-                <Button variant="light" fullWidth type="submit" mt="md" loading={isLoading}>
+                <Button mt="xs" variant="light" fullWidth type="submit" loading={isLoading}>
                   {t('form.buttons.submit')}
                 </Button>
               </Stack>

src/pages/onboard.tsx

@@ -5,6 +5,8 @@ import fs from 'fs';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import Head from 'next/head';
 import { OnboardingSteps } from '~/components/Onboarding/onboarding-steps';
+import { ThemeSchemeToggle } from '~/components/ThemeSchemeToggle/ThemeSchemeToggle';
+import { FloatingBackground } from '~/components/layout/Background/FloatingBackground';
 import { prisma } from '~/server/db';
 import { getConfig } from '~/tools/config/getConfig';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -25,6 +27,10 @@ export default function OnboardPage({
         <title>Onboard • Homarr</title>
       </Head>
 
+      <FloatingBackground />
+
+      <ThemeSchemeToggle pos="absolute" top={20} right={20} variant="default" />
+
       <Stack h="100dvh" bg={background} spacing={0}>
         <Center
           bg={fn.linearGradient(145, colors.red[7], colors.red[5])}