feat: add light theme

src/components/Common/SeerrLogo/index.tsx

@@ -0,0 +1,39 @@
+import Image, { type ImageProps } from 'next/image';
+
+type SeerrLogoVariant = 'full' | 'stacked';
+
+interface SeerrLogoProps extends Omit<ImageProps, 'alt' | 'src'> {
+  alt?: string;
+  variant: SeerrLogoVariant;
+}
+
+const getLogoSrc = (variant: SeerrLogoVariant, light = false) =>
+  `/logo_${variant}${light ? '_light' : ''}.svg`;
+
+const withLogoClass = (className: string | undefined, logoClass: string) =>
+  [className, 'seerr-logo', logoClass].filter(Boolean).join(' ');
+
+const SeerrLogo = ({
+  alt = 'Logo',
+  className,
+  variant,
+  ...props
+}: SeerrLogoProps) => (
+  <>
+    <Image
+      {...props}
+      src={getLogoSrc(variant)}
+      alt={alt}
+      className={withLogoClass(className, 'seerr-logo-dark')}
+    />
+    <Image
+      {...props}
+      src={getLogoSrc(variant, true)}
+      alt=""
+      aria-hidden
+      className={withLogoClass(className, 'seerr-logo-light')}
+    />
+  </>
+);
+
+export default SeerrLogo;

src/components/Layout/Sidebar/index.tsx

@@ -1,4 +1,5 @@
 import Badge from '@app/components/Common/Badge';
+import SeerrLogo from '@app/components/Common/SeerrLogo';
 import VersionStatus from '@app/components/Layout/VersionStatus';
 import useClickOutside from '@app/hooks/useClickOutside';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -15,7 +16,6 @@ import {
   UsersIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useEffect, useRef } from 'react';
@@ -192,7 +192,7 @@ const Sidebar = ({
                     <div className="flex flex-shrink-0 items-center px-2">
                       <span className="w-full px-4 text-xl text-gray-50">
                         <Link href="/" className="relative block h-24 w-64">
-                          <Image src="/logo_full.svg" alt="Logo" fill />
+                          <SeerrLogo variant="full" alt="Logo" fill />
                         </Link>
                       </span>
                     </div>
@@ -255,12 +255,7 @@ const Sidebar = ({
               <div className="flex flex-shrink-0 items-center">
                 <span className="w-full px-4 py-2 text-2xl text-gray-50">
                   <Link href="/" className="relative block h-24">
-                    <Image
-                      src="/logo_full.svg"
-                      alt="Logo"
-                      fill
-                      loading="eager"
-                    />
+                    <SeerrLogo variant="full" alt="Logo" fill loading="eager" />
                   </Link>
                 </span>
               </div>

src/components/Layout/UserDropdown/index.tsx

@@ -1,11 +1,14 @@
 import CachedImage from '@app/components/Common/CachedImage';
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
+import useTheme from '@app/hooks/useTheme';
 import { Permission, useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { Menu, Transition } from '@headlessui/react';
 import {
   ArrowRightOnRectangleIcon,
   ClockIcon,
+  MoonIcon,
+  SunIcon,
 } from '@heroicons/react/24/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
@@ -18,6 +21,8 @@ const messages = defineMessages('components.Layout.UserDropdown', {
   myprofile: 'Profile',
   settings: 'Settings',
   requests: 'Requests',
+  switchtodark: 'Switch to Dark Theme',
+  switchtolight: 'Switch to Light Theme',
   signout: 'Sign Out',
 });
 
@@ -37,6 +42,7 @@ ForwardedLink.displayName = 'ForwardedLink';
 const UserDropdown = () => {
   const intl = useIntl();
   const { user, revalidate, hasPermission } = useUser();
+  const { theme, toggleTheme } = useTheme();
 
   const logout = async () => {
     const response = await axios.post('/api/v1/auth/logout');
@@ -154,6 +160,32 @@ const UserDropdown = () => {
                   </ForwardedLink>
                 )}
               </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <button
+                    type="button"
+                    className={`flex w-full items-center rounded px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out ${
+                      active
+                        ? 'bg-gradient-to-br from-indigo-600 to-purple-600 text-white'
+                        : ''
+                    }`}
+                    onClick={toggleTheme}
+                  >
+                    {theme === 'light' ? (
+                      <MoonIcon className="mr-2 inline h-5 w-5" />
+                    ) : (
+                      <SunIcon className="mr-2 inline h-5 w-5" />
+                    )}
+                    <span>
+                      {intl.formatMessage(
+                        theme === 'light'
+                          ? messages.switchtodark
+                          : messages.switchtolight
+                      )}
+                    </span>
+                  </button>
+                )}
+              </Menu.Item>
               <Menu.Item>
                 {({ active }) => (
                   <a

src/components/Login/index.tsx

@@ -4,6 +4,7 @@ import PlexLogo from '@app/assets/services/plex.svg';
 import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
+import SeerrLogo from '@app/components/Common/SeerrLogo';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import JellyfinLogin from '@app/components/Login/JellyfinLogin';
 import LocalLogin from '@app/components/Login/LocalLogin';
@@ -16,7 +17,6 @@ import { XCircleIcon } from '@heroicons/react/24/solid';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
-import Image from 'next/image';
 import { useEffect, useRef, useState, type JSX } from 'react';
 import { useIntl } from 'react-intl';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
@@ -164,7 +164,7 @@ const Login = () => {
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="relative h-48 w-full max-w-full">
-          <Image src="/logo_stacked.svg" alt="Logo" fill />
+          <SeerrLogo variant="stacked" alt="Logo" fill />
         </div>
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">

src/components/ResetPassword/RequestResetLink.tsx

@@ -1,12 +1,12 @@
 import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
+import SeerrLogo from '@app/components/Common/SeerrLogo';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -57,7 +57,7 @@ const ResetPassword = () => {
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="relative h-48 w-full max-w-full">
-          <Image src="/logo_stacked.svg" alt="Logo" fill />
+          <SeerrLogo variant="stacked" alt="Logo" fill />
         </div>
         <h2 className="mt-12 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}