feat: add customizable gradient

src/components/Accent.tsx

@@ -9,7 +9,7 @@ export default function Accent({ children, className }: AccentType) {
     <span
       className={clsxm(
         'transition-colors',
-        'bg-gradient-to-tr from-emerald-400 to-amber-400 bg-clip-text text-transparent',
+        'accent-gradient bg-gradient-to-tr bg-clip-text text-transparent',
         className
       )}
     >

src/components/layout/Layout.tsx

@@ -2,5 +2,5 @@ import * as React from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   // Put Header or Footer Here
-  return <>{children}</>;
+  return <div className='default'>{children}</div>;
 }

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import '@/styles/globals.css';
 import axiosClient from '@/lib/axios';
 
 import DismissableToast from '@/components/DismissableToast';
+import Layout from '@/components/layout/Layout';
 
 const defaultQueryFn = async ({ queryKey }: QueryOptions) => {
   const { data } = await axiosClient.get(`${queryKey?.[0]}`);
@@ -25,7 +26,9 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <DismissableToast />
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
       <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
     </QueryClientProvider>
   );

src/pages/index.tsx

@@ -31,7 +31,7 @@ export default function IndexPage({
                     className={clsx(
                       'opacity-0 group-hover:opacity-100',
                       'absolute -inset-0.5 z-0 animate-tilt rounded blur',
-                      'bg-gradient-to-r from-emerald-400 to-amber-400',
+                      'accent-gradient bg-gradient-to-r',
                       'transition duration-300 group-hover:duration-200',
                       'pointer-events-none'
                     )}

src/styles/globals.css

@@ -112,3 +112,9 @@
     background-size: 0 2px, 100% 2px;
   }
 }
+
+/* #region  /**=========== Default Theme =========== */
+.default .accent-gradient {
+  @apply from-emerald-400 to-amber-400;
+}
+/* #endregion  /**======== Default Theme =========== */