Dark mode in landing page

fisirc · Nov 30, 2024 · 79033b4 · 79033b4
1 parent e7fd3f9
commit 79033b4
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 24 deletions.
diff --git a/app/src/components/Footer/Footer.module.css b/app/src/components/Footer/Footer.module.css
@@ -4,6 +4,11 @@
   color: #333;
 }
 
+.footer.darkFooter {
+  background-color: #1f1f1f;
+  color: #e5e5e5;
+}
+
 .container {
   max-width: 75rem;
   margin: 0 auto;
@@ -24,17 +29,29 @@
   margin-bottom: 1rem;
 }
 
+.title.darkTitle {
+  color: #e5e5e5;
+}
+
 .description {
   font-size: 0.875rem;
   line-height: 1.5;
 }
 
+.description.darkDescription {
+  color: #bbb;
+}
+
 .subtitle {
   font-size: 1rem;
   font-weight: bold;
   margin-bottom: 1rem;
 }
 
+.subtitle.darkSubtitle {
+  color: #e5e5e5;
+}
+
 .list {
   list-style-type: none;
   padding: 0;
@@ -51,6 +68,10 @@
   color: #000;
 }
 
+.link.darkLink {
+  color: #bbb;
+}
+
 .bottom {
   border-top: 1px solid #ddd;
   padding-top: 2rem;
@@ -63,6 +84,10 @@
   color: #666;
 }
 
+.copyright.darkCopyright {
+  color: #bbb;
+}
+
 @media (max-width: 768px) {
   .container {
     flex-direction: column;
@@ -71,4 +96,4 @@
   .column {
     margin-bottom: 2rem;
   }
-}
+}
diff --git a/app/src/components/Footer/Footer.tsx b/app/src/components/Footer/Footer.tsx
@@ -1,46 +1,49 @@
 import React from 'react';
 import styles from './Footer.module.css';
 import { useTranslation, Trans } from 'react-i18next';
+import { useMantineColorScheme } from '@mantine/core';
 
 export const Footer: React.FC = () => {
   const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
   return (
-    <footer className={styles.footer}>
+    <footer className={`${styles.footer} ${dark ? styles.darkFooter : ''}`}>
       <div className={styles.container}>
         <div className={styles.column}>
-          <h3 className={styles.title}>Metagallery</h3>
-          <p className={styles.description}>
-            {t('footer_description_line1')}<br></br>
-            {t('footer_description_line2')}<br></br>
+          <h3 className={`${styles.title} ${dark ? styles.darkTitle : ''}`}>Metagallery</h3>
+          <p className={`${styles.description} ${dark ? styles.darkDescription : ''}`}>
+            {t('footer_description_line1')}<br />
+            {t('footer_description_line2')}<br />
             {t('footer_description_line3')}
           </p>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>{t('footer_links')}</h4>
+          <h4 className={`${styles.subtitle} ${dark ? styles.darkSubtitle : ''}`}>{t('footer_links')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>{t('footer_link1')}</a></li>
-            <li><a href="#" className={styles.link}>{t('footer_link2')}</a></li>
-            <li><a href="#" className={styles.link}>{t('footer_link3')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_link1')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_link2')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_link3')}</a></li>
           </ul>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>{t('footer_legal')}</h4>
+          <h4 className={`${styles.subtitle} ${dark ? styles.darkSubtitle : ''}`}>{t('footer_legal')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>{t('footer_legal1')}</a></li>
-            <li><a href="#" className={styles.link}>{t('footer_legal2')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_legal1')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_legal2')}</a></li>
           </ul>
         </div>
         <div className={styles.column}>
-          <h4 className={styles.subtitle}>{t('footer_socialmedia')}</h4>
+          <h4 className={`${styles.subtitle} ${dark ? styles.darkSubtitle : ''}`}>{t('footer_socialmedia')}</h4>
           <ul className={styles.list}>
-            <li><a href="#" className={styles.link}>{t('footer_socialmedia1')}</a></li>
-            <li><a href="#" className={styles.link}>{t('footer_socialmedia2')}</a></li>
-            <li><a href="#" className={styles.link}>{t('footer_socialmedia3')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_socialmedia1')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_socialmedia2')}</a></li>
+            <li><a href="#" className={`${styles.link} ${dark ? styles.darkLink : ''}`}>{t('footer_socialmedia3')}</a></li>
           </ul>
         </div>
       </div>
       <div className={styles.bottom}>
-        <p className={styles.copyright}>&copy; {t('footer_finalmessage')}</p>
+        <p className={`${styles.copyright} ${dark ? styles.darkCopyright : ''}`}>&copy; {t('footer_finalmessage')}</p>
       </div>
     </footer>
   );

diff --git a/app/src/pages/Home/components/PricingCard.module.css b/app/src/pages/Home/components/PricingCard.module.css
@@ -12,18 +12,31 @@
   height: 100%;
 }
 
+.card.darkCard {
+  background-color: #333333;
+  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+}
+
 .title {
   font-size: clamp(1.1rem, 2.5vw, 1.25rem);
   font-weight: 600;
   margin: 0;
 }
 
+.title.darkTitle {
+  color: #e5e5e5; /* Light text for dark mode */
+}
+
 .price {
   font-size: clamp(1.5rem, 3vw, 1.8rem);
   font-weight: 700;
   margin: 0.2rem 0;
 }
 
+.price.darkPrice {
+  color: #e5e5e5; /* Light text for dark mode */
+}
+
 .features {
   list-style-type: none;
   padding: 0;
@@ -38,6 +51,10 @@
   line-height: 1.4;
 }
 
+.feature.darkFeature {
+  color: #bbb; /* Light color for dark mode */
+}
+
 .button {
   padding: 0.75rem 1.5rem;
   font-size: clamp(0.875rem, 2vw, 1rem);
@@ -53,6 +70,10 @@
   margin-top: 1rem;
 }
 
+.button.darkButton {
+  background-color: #444; /* Darker background for the button in dark mode */
+}
+
 .button:hover {
   background-color: #333;
 }
@@ -71,4 +92,4 @@
   .card {
     max-width: 100%;
   }
-}
+}
diff --git a/app/src/pages/Home/components/PricingCard.tsx b/app/src/pages/Home/components/PricingCard.tsx
@@ -1,3 +1,4 @@
+import { useMantineColorScheme } from '@mantine/core';
 import Button from './Button';
 import { usePopupContext } from './PopUpContext';
 import styles from './PricingCard.module.css';
@@ -12,21 +13,24 @@ interface PricingCardProps {
 const PricingCard = ({ title, price, features }: PricingCardProps) => {
   const { openRegisterPopup } = usePopupContext();
   const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const dark = colorScheme === 'dark';
 
   return (
-    <div className={styles.card}>
-      <h3 className={styles.title}>{title}</h3>
-      <p className={styles.price}>{price}</p>
+    <div className={`${styles.card} ${dark ? styles.darkCard : ''}`}>
+      <h3 className={`${styles.title} ${dark ? styles.darkTitle : ''}`}>{title}</h3>
+      <p className={`${styles.price} ${dark ? styles.darkPrice : ''}`}>{price}</p>
       <ul className={styles.features}>
         {features.map((feature, index) => (
-          <li key={index} className={styles.feature}>{feature}</li>
+          <li key={index} className={`${styles.feature} ${dark ? styles.darkFeature : ''}`}>{feature}</li>
         ))}
       </ul>
-      <Button variant="primary" className={styles.button} onClick={openRegisterPopup}>
+      <Button variant="primary" className={`${styles.button} ${dark ? styles.darkButton : ''}`} onClick={openRegisterPopup}>
         {t('call_to_action')}
       </Button>
     </div>
   );
 };
 
 export default PricingCard;
+