feat: dark mode

src/pages/home/Categories.tsx

@@ -1,6 +1,6 @@
 import { getToolsByCategory } from '@tools/index';
 import Grid from '@mui/material/Grid';
-import { Box, Card, CardContent, Stack } from '@mui/material';
+import { Box, Card, CardContent, Stack, useTheme } from '@mui/material';
 import { Link, useNavigate } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
@@ -19,6 +19,7 @@ const SingleCategory = function ({
   index: number;
 }) {
   const navigate = useNavigate();
+  const theme = useTheme();
   const [hovered, setHovered] = useState<boolean>(false);
   const toggleHover = () => setHovered((prevState) => !prevState);
   return (
@@ -32,7 +33,7 @@ const SingleCategory = function ({
       <Card
         sx={{
           height: '100%',
-          backgroundColor: hovered ? '#FAFAFD' : 'white'
+          backgroundColor: hovered ? 'background.hover' : 'background.paper'
         }}
       >
         <CardContent sx={{ height: '100%' }}>
@@ -52,7 +53,11 @@ const SingleCategory = function ({
                   color={categoriesColors[index % categoriesColors.length]}
                 />
                 <Link
-                  style={{ fontSize: 20, fontWeight: 700, color: 'black' }}
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 700,
+                    color: theme.palette.mode === 'dark' ? 'white' : 'black'
+                  }}
                   to={'/categories/' + category.type}
                 >
                   {category.title}
@@ -70,7 +75,7 @@ const SingleCategory = function ({
               </Grid>
               <Grid item xs={12} md={6}>
                 <Button
-                  sx={{ backgroundColor: 'white' }}
+                  sx={{ backgroundColor: 'background.default' }}
                   fullWidth
                   onClick={() => navigate(category.example.path)}
                   variant={'outlined'}

src/pages/home/index.tsx

@@ -1,16 +1,23 @@
-import { Box } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
 
 export default function Home() {
+  const theme = useTheme();
   return (
     <Box
       padding={{
         xs: 1,
         md: 3,
-        lg: 5,
-        background: `url(/assets/background.svg)`,
-        backgroundColor: '#F5F5FA'
+        lg: 5
+      }}
+      sx={{
+        background: `url(/assets/${
+          theme.palette.mode === 'dark'
+            ? 'background-dark.png'
+            : 'background.svg'
+        })`,
+        backgroundColor: 'background.default'
       }}
       display={'flex'}
       flexDirection={'column'}

src/pages/tools-by-category/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
   }, []);
 
   return (
-    <Box sx={{ backgroundColor: '#F5F5FA' }}>
+    <Box sx={{ backgroundColor: 'background.default' }}>
       <Box
         padding={{ xs: 1, md: 3, lg: 5 }}
         display={'flex'}
@@ -55,12 +55,14 @@ export default function Home() {
               <Grid item xs={12} md={6} lg={4} key={tool.path}>
                 <Stack
                   sx={{
-                    backgroundColor: 'white',
-                    boxShadow: '5px 4px 2px #E9E9ED',
+                    backgroundColor: 'background.paper',
+                    boxShadow: `5px 4px 2px ${
+                      theme.palette.mode === 'dark' ? 'black' : '#E9E9ED'
+                    }`,
                     cursor: 'pointer',
                     height: '100%',
                     '&:hover': {
-                      backgroundColor: theme.palette.background.default // Change this to your desired hover color
+                      backgroundColor: theme.palette.background.hover
                     }
                   }}
                   onClick={() => navigate('/' + tool.path)}
@@ -77,7 +79,12 @@ export default function Home() {
                     color={categoriesColors[index % categoriesColors.length]}
                   />
                   <Box>
-                    <Link style={{ fontSize: 20 }} to={'/' + tool.path}>
+                    <Link
+                      style={{
+                        fontSize: 20
+                      }}
+                      to={'/' + tool.path}
+                    >
                       {tool.name}
                     </Link>
                     <Typography sx={{ mt: 2 }}>

src/pages/tools/pdf/split-pdf/index.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography } from '@mui/material';
-import React, { useEffect, useRef, useState } from 'react';
-import ToolFileInput from '@components/input/ToolFileInput';
+import React, { useEffect, useState } from 'react';
 import ToolFileResult from '@components/result/ToolFileResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import ToolContent from '@components/ToolContent';
@@ -8,7 +7,6 @@ import { ToolComponentProps } from '@tools/defineTool';
 import { parsePageRanges, splitPdf } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { PDFDocument } from 'pdf-lib';
-import { FormikProps } from 'formik';
 import ToolPdfInput from '@components/input/ToolPdfInput';
 
 type InitialValuesType = {

src/pages/tools/video/compress/service.ts

@@ -15,7 +15,6 @@ export async function compressVideo(
   input: File,
   options: CompressVideoOptions
 ): Promise<File> {
-  console.log('Compressing video...', options);
   if (!ffmpeg.loaded) {
     await ffmpeg.load({
       wasmURL:

src/pages/tools/video/gif/change-speed/index.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '@components/input/ToolFileInput';
 import ToolFileResult from '@components/result/ToolFileResult';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 import Typography from '@mui/material/Typography';
@@ -9,6 +8,8 @@ import { FrameOptions, GifReader, GifWriter } from 'omggif';
 import { gifBinaryToFile } from '@utils/gif';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import ToolImageInput from '@components/input/ToolImageInput';
 
 const initialValues = {
   newSpeed: 200
@@ -108,7 +109,7 @@ export default function ChangeSpeed({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolFileInput
+        <ToolImageInput
           value={input}
           onChange={setInput}
           accept={['image/gif']}