Feat: dark mode for independent pages (#17045)

web/app/activate/activateForm.tsx

@@ -50,8 +50,8 @@ const ActivateForm = () => {
       {checkRes && !checkRes.is_valid && (
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
-            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-gray-100 p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
-            <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">🤷‍♂️</div>
+            <h2 className="text-[32px] font-bold text-text-primary">{t('login.invalid')}</h2>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full !text-sm'>

web/app/activate/page.tsx

@@ -7,6 +7,7 @@ import cn from '@/utils/classnames'
 const Activate = () => {
   return (
     <div className={cn(
+      'bg-background-body',
       style.background,
       'flex min-h-screen w-full',
       'sm:p-4 lg:p-8',
@@ -15,13 +16,13 @@ const Activate = () => {
     )}>
       <div className={
         cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-white shadow',
+          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
           'space-between',
         )
       }>
         <Header />
         <ActivateForm />
-        <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+        <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
           © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
         </div>
       </div>

web/app/activate/style.module.css

@@ -1,4 +0,0 @@
-.logo {
-  background: #fff center no-repeat url(./team-28x28.png);
-  background-size: 56px;
-}