Work on light mode (#75)

* Work on light mode

package.json

@@ -38,6 +38,7 @@
     "next": "^12.1.5",
     "next-real-viewport": "^0.7.0",
     "next-seo": "^5.4.0",
+    "next-themes": "^0.2.0",
     "react": "^18.0.0",
     "react-datocms": "^3.0.12",
     "react-device-detect": "^2.2.2",

src/components/common/footer/footer.module.scss

@@ -62,7 +62,7 @@
     &::before {
       background: radial-gradient(
         ellipse farthest-corner at center center,
-        rgb(4 4 4 / 0.05) 45%,
+        rgb(4 4 4 / 0) 45%,
         var(--color-black) 0
       );
       width: 120%;
@@ -367,3 +367,23 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .pre__footer {
+    &--section {
+      video {
+        mix-blend-mode: darken;
+      }
+
+      @include respond-to('mobile') {
+        background-image: url('/images/pre-footer-mobile-light.png');
+      }
+    }
+  }
+
+  .footer {
+    a {
+      color: var(--color-white);
+    }
+  }
+}

src/components/common/footer/index.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
+import { useTheme } from 'next-themes'
 import { useEffect, useRef, useState } from 'react'
 import MailchimpSubscribe from 'react-mailchimp-subscribe'
 
@@ -81,11 +82,27 @@ const SimpleForm = ({
 }
 
 export const Footer = () => {
+  const { theme, setTheme } = useTheme()
+
   const router = useRouter()
   const videoRef = useRef<HTMLVideoElement>(null)
 
   const [show, setShow] = useState(true)
   const [is404, setIs404] = useState(false)
+  const [themeLabel, setThemeLabel] = useState('')
+
+  useEffect(() => {
+    setThemeLabel(theme === 'dark' ? 'Dark mode' : 'Light mode')
+  }, [theme])
+
+  useEffect(() => {
+    if (!videoRef.current) return
+
+    videoRef.current.src =
+      theme === 'dark'
+        ? '/videos/hero-grid.mp4'
+        : '/videos/Banner-Home-Light.mp4'
+  }, [theme])
 
   useEffect(() => {
     if (
@@ -136,7 +153,7 @@ export const Footer = () => {
             preload="true"
             ref={videoRef}
           >
-            <source src="/videos/hero-grid.mp4" type="video/mp4" />
+            <source type="video/mp4" />
           </video>
           <Container className={s['pre__footer']}>
             <Isotype className={s['isotype']} />
@@ -254,7 +271,8 @@ export const Footer = () => {
                     Terms of Use
                   </Link>
                   <p>
-                    <span>Dark Mode</span> <Switch />
+                    <span>{themeLabel}</span>{' '}
+                    <Switch theme={theme} setTheme={setTheme} />
                   </p>
                 </li>
               </ul>

src/components/common/header/header.module.scss

@@ -94,8 +94,19 @@
       display: block;
     }
 
+    .themer {
+      display: flex;
+      color: var(--color-white);
+      font-family: var(--font-tt-hoves);
+      gap: tovw(10px, 'default', 8px);
+      place-content: center;
+      place-items: center;
+      padding-bottom: tovw(20px, 'mobile', 20px);
+      width: 100%;
+    }
+
     .button {
-      margin: tovw(55px, 'mobile') 0 tovw(44px, 'mobile') 0;
+      margin: tovw(55px, 'mobile') 0 tovw(30px, 'mobile') 0;
       width: 100%;
       text-align: center;
 
@@ -144,3 +155,37 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .header {
+    backdrop-filter: unset;
+    background-color: var(--color-black);
+
+    ul li a {
+      color: var(--color-white);
+    }
+
+    &__mobile {
+      p {
+        color: var(--color-black);
+      }
+
+      .themer {
+        color: var(--color-black);
+      }
+
+      .button {
+        @include respond-to('mobile') {
+          border: tovw(1px, 'default', 1px) solid var(--color-black);
+          color: var(--color-black);
+        }
+      }
+    }
+  }
+
+  .social {
+    a {
+      filter: invert(100%);
+    }
+  }
+}

src/components/common/header/index.tsx

@@ -1,12 +1,14 @@
 import clsx from 'clsx'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import { useTheme } from 'next-themes'
 import * as React from 'react'
 
 import Burger from '~/components/icons/burguer'
 import { Logo } from '~/components/icons/logo'
 import { Button, ButtonLink } from '~/components/primitives/button'
 import Link from '~/components/primitives/link'
+import Switch from '~/components/primitives/switch'
 import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
 import { useMeasure } from '~/hooks/use-measure'
 import { DURATION, gsap } from '~/lib/gsap'
@@ -20,6 +22,13 @@ const HeaderMobile = React.forwardRef<
   JSX.IntrinsicElements['div']
 >(({ className, ...props }, ref) => {
   const router = useRouter()
+  const { theme, setTheme } = useTheme()
+
+  const [themeLabel, setThemeLabel] = React.useState('')
+
+  React.useEffect(() => {
+    setThemeLabel(theme === 'dark' ? 'Dark mode' : 'Light mode')
+  }, [theme])
 
   const isActive = (href: string) => {
     const slug = router.query.slug as string
@@ -53,6 +62,9 @@ const HeaderMobile = React.forwardRef<
       >
         Join Us
       </ButtonLink>
+      <div className={s.themer}>
+        <span>{themeLabel}</span> <Switch theme={theme} setTheme={setTheme} />
+      </div>
       <ul className={clsx(s['social'], 'social')}>
         {ConnectLinks.length > 0 &&
           ConnectLinks.map((link, index) => (

src/components/common/modal/modal.module.scss

@@ -25,7 +25,7 @@
     height: 100vh;
     background-color: rgb(0 0 0 / 0.5);
     z-index: 50;
-    backdrop-filter: blur(2px);
+    backdrop-filter: blur(5px);
     animation: fadein 800ms;
   }
 }
@@ -39,3 +39,11 @@
     opacity: 1;
   }
 }
+
+[data-theme='light'] {
+  .modal {
+    &__bg {
+      background: rgb(251 251 251 / 0.35);
+    }
+  }
+}

src/components/icons/burguer.tsx

@@ -79,17 +79,21 @@ const Burger = ({
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 28 28"
     >
-      <path ref={topRef} d="M1 8h24v2H1z" fill={fill || '#fff'} />
+      <path ref={topRef} d="M1 8h24v2H1z" fill={fill || 'var(--color-white)'} />
       <line
         ref={middleRef}
         x1="1"
         y1="15"
         x2="25"
         y2="15"
-        stroke={fill || '#fff'}
+        stroke={fill || 'var(--color-white)'}
         strokeWidth="2"
       />
-      <path ref={bottomRef} d="M1 20h24v2H1z" fill={fill || '#fff'} />
+      <path
+        ref={bottomRef}
+        d="M1 20h24v2H1z"
+        fill={fill || 'var(--color-white)'}
+      />
     </svg>
   )
 }

src/components/icons/socials.tsx

@@ -31,7 +31,7 @@ const Telegram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
       </defs>
     </svg>
@@ -67,7 +67,7 @@ const Twitter = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
       </defs>
     </svg>
@@ -99,7 +99,7 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
       </defs>
     </svg>
@@ -178,7 +178,7 @@ const Facebook = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
       </defs>
     </svg>
@@ -222,7 +222,7 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
         <linearGradient
           id={`${id}-b`}
@@ -233,7 +233,7 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
         <linearGradient
           id={`${id}-c`}
@@ -244,7 +244,7 @@ const Instagram = ({
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor={fill || 'var(--color-white)'} />
-          <stop offset="1" stopColor="var(--color-grey-lightness)" />
+          <stop offset="1" stopColor="var(--color-white)" />
         </linearGradient>
       </defs>
     </svg>

src/components/primitives/button/button.module.scss

@@ -66,7 +66,7 @@
 
   &--primary {
     border-color: var(--color-accent);
-    box-shadow: 0 0 tovw(50px, 'default', 16px) var(--color-accent);
+    box-shadow: 0 0 tovw(25px, 'default', 16px) var(--color-accent);
     background: var(--color-accent);
 
     &:hover,
@@ -92,3 +92,11 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .button {
+    &--primary {
+      color: var(--color-black);
+    }
+  }
+}

src/components/primitives/link/link.module.scss

@@ -127,3 +127,16 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .link {
+    color: var(--color-accent);
+
+    &--default,
+    &--nav {
+      .icon svg {
+        fill: red !important;
+      }
+    }
+  }
+}

src/components/primitives/switch/index.tsx

@@ -1,9 +1,17 @@
 import s from './switch.module.scss'
 
-const Switch = () => {
+interface Props {
+  setTheme: (theme: string) => void
+  theme: string | undefined
+}
+
+const Switch = ({ setTheme, theme }: Props) => {
   return (
     <label className={s.switch}>
-      <input type="checkbox" />
+      <input
+        type="checkbox"
+        onChange={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      />
       <span className={s.slider}></span>
     </label>
   )

src/components/primitives/switch/switch.module.scss

@@ -33,17 +33,17 @@
   width: tovw(9px, 'default', 9px);
   left: tovw(1px, 'default', 1px);
   bottom: tovw(1px, 'default', 1px);
-  background-color: white;
+  background-color: var(--color-white);
   border-radius: 50%;
   transition: var(--normal-transition);
 }
 
 input:checked + .slider {
-  border: tovw(2px, 'default', 2px) solid var(--color-black);
-  background-color: var(--color-white);
+  background-color: transparent;
+  border: tovw(2px, 'default', 2px) solid var(--color-white);
 }
 
 input:checked + .slider::before {
-  background-color: var(--color-black);
+  background-color: var(--color-white);
   transform: translateX(tovw(11.5px, 'default', 11px));
 }

src/components/sections/about/hero/hero.module.scss

@@ -200,3 +200,22 @@
   width: 100%;
   height: tovw(740px, 'default', 740px);
 }
+
+[data-theme='light'] {
+  .video_container {
+    mix-blend-mode: darken;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .hero__container {
+    filter: brightness(103%);
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    display: hidden;
+  }
+}

src/components/sections/about/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
@@ -19,11 +22,40 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-about.webm')
+      setMp4Source('/videos/banner-about.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-about-light.webm')
+      setMp4Source('/videos/banner-about-light.mp4')
+    }
+  }, [theme])
+
+  const aboutHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!aboutHeroMobileRef.current) return
+
+    aboutHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/about/about.jpg'
+        : '/images/about/about-light.jpg'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s['gradient']} />
       <div className={s['video_container']}>
         <video
+          key={mp4Source}
           autoPlay
           controls={false}
           loop
@@ -31,16 +63,16 @@ const Hero = ({ data }: Props) => {
           playsInline={true}
           preload="true"
         >
-          <source src="/videos/banner-about.webm" type="video/webm" />
-          <source src="/videos/banner-about.mp4" type="video/mp4" />
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
         </video>
       </div>
       <div className={s.hero__container}>
         <img
+          ref={aboutHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/about/about.jpg"
         />
       </div>
       <Container className={s['container']}>

src/components/sections/about/related/related.module.scss

@@ -137,3 +137,30 @@
     z-index: -1;
   }
 }
+
+[data-theme='light'] {
+  .gradient {
+    display: none;
+  }
+
+  .events {
+    &::after,
+    &::before {
+      @include respond-to('mobile') {
+        background: linear-gradient(
+          90deg,
+          rgb(251 251 251 / 0) 0%,
+          rgb(251 251 251 / 0.55) 35%,
+          rgb(251 251 251 / 1) 95%
+        );
+      }
+
+      background: linear-gradient(
+        90deg,
+        rgb(251 251 251 / 0) 0%,
+        rgb(251 251 251 / 0.95) 35%,
+        rgb(251 251 251 / 1) 65%
+      );
+    }
+  }
+}

src/components/sections/about/roadmap/roadmap.module.scss

@@ -92,6 +92,7 @@
             background-color: var(--color-white);
             border-radius: 50%;
             box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-white);
+            z-index: 5;
           }
         }
 
@@ -186,9 +187,9 @@
           border-left: 2px solid var(--color-white);
           border-image-source: linear-gradient(
             180deg,
-            rgb(255 255 255 / 1) 0%,
-            rgb(255 255 255 / 1) 85%,
-            rgb(4 4 4 / 1) 100%
+            var(--color-white) 0%,
+            var(--color-white) 85%,
+            var(--color-black) 100%
           );
         }
 
@@ -198,11 +199,22 @@
         border-image-slice: 1;
         border-image-source: linear-gradient(
           90deg,
-          rgb(255 255 255 / 1) 0%,
-          rgb(255 255 255 / 1) 85%,
-          rgb(4 4 4 / 1) 100%
+          var(--color-white) 0%,
+          var(--color-white) 85%,
+          var(--color-black) 100%
         );
       }
     }
   }
 }
+
+[data-theme='light'] {
+  .section .container {
+    .roadmap .block {
+      .dot {
+        background-color: var(--color-accent);
+        box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-accent);
+      }
+    }
+  }
+}

src/components/sections/about/whitepaper/whitepaper.module.scss

@@ -84,3 +84,16 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section .container {
+    a {
+      color: var(--color-accent);
+    }
+
+    .whitepaper__img {
+      filter: invert(100%);
+      z-index: -1;
+    }
+  }
+}

src/components/sections/blog/hero/hero.module.scss

@@ -92,3 +92,13 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section {
+    background: unset;
+  }
+
+  .hero__container {
+    mix-blend-mode: darken;
+  }
+}

src/components/sections/blog/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import { BlogCard } from '~/components/common/card'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -11,20 +14,30 @@ interface HeroProps {
 }
 
 const Hero = ({ featuredPost }: HeroProps) => {
+  const { theme } = useTheme()
+
+  const blogHeroRef = useRef<HTMLImageElement>(null)
+  const blogHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!blogHeroRef.current) return
+    if (!blogHeroMobileRef.current) return
+
+    blogHeroRef.current.src =
+      theme === 'dark' ? '/images/blog/blog.png' : '/images/blog/blog-light.png'
+    blogHeroMobileRef.current.src =
+      theme === 'dark' ? '/images/blog/blog.png' : '/images/blog/blog-light.png'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.hero__container}>
+        <img ref={blogHeroRef} className={s.hero} loading="eager" alt="hero" />
         <img
-          className={s.hero}
-          loading="eager"
-          alt="hero"
-          src="/images/blog/blog.png"
-        />
-        <img
+          ref={blogHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/blog/blog.png"
         />
       </div>
       <Container className={s['container']}>

src/components/sections/blog/post-hero/hero.module.scss

@@ -54,3 +54,9 @@
     gap: tovw(8px, 'default', 8px);
   }
 }
+
+[data-theme='light'] {
+  .section {
+    background: unset;
+  }
+}

src/components/sections/blog/shares/shares.module.scss

@@ -26,7 +26,7 @@
     a {
       display: flex;
       transition: filter 200ms;
-      border: tovw(1px, 'default', 1px) solid #fff;
+      border: tovw(1px, 'default', 1px) solid var(--color-white);
       border-radius: tovw(30px, 'default', 20px);
       background-color: var(--color-black);
       cursor: pointer;

src/components/sections/careers/hero/hero.module.scss

@@ -21,43 +21,73 @@
     }
   }
 
-  .hero__container {
+  .video_container {
     @include respond-to('mobile') {
-      min-height: tovw(400px, 'mobile', 510px);
+      min-height: unset;
     }
 
-    display: flex;
-    place-content: center;
-    min-height: tovw(750px, 'default', 366px);
+    position: relative;
+    align-self: center;
+    width: 75%;
+    margin-left: tovw(165px, 'default', 125px);
+    min-height: tovw(790px, 'default', 380px);
+    margin-top: tovw(-30px, 'default');
+    padding-top: tovw(30px, 'default', 20px);
 
-    .hero {
+    video {
       @include respond-to('mobile') {
         display: none;
       }
 
+      width: 100%;
       margin: auto;
-      width: tovw(1380px, 'default', 700px);
-      padding-left: tovw(60px, 'default', 20px);
-      margin-top: tovw(-30px, 'default', -30px);
-      mix-blend-mode: screen;
+      z-index: 1;
+    }
 
-      &__mobile {
-        @include respond-to('mobile') {
-          display: flex;
-          margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
-            tovw(-30px, 'mobile', -30px);
-          width: 140%;
-          mix-blend-mode: screen;
-          place-self: center;
-          mask-image: linear-gradient(
-            0deg,
-            rgb(255 255 255 / 0) 0%,
-            rgb(0 0 0) 25%
-          );
-        }
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: radial-gradient(
+        ellipse,
+        rgb(3 3 3 / 0) 40%,
+        rgb(3 3 3 / 1) 62%,
+        rgb(3 3 3 / 1) 100%
+      );
+      transform: translateX(-25%);
+      width: 200%;
+      height: 100%;
+      content: '';
+    }
+  }
 
-        display: none;
+  .hero__container {
+    @include respond-to('mobile') {
+      display: flex;
+      place-content: center;
+      min-height: tovw(750px, 'default', 366px);
+      min-height: tovw(400px, 'mobile', 510px);
+    }
+
+    display: none;
+
+    .hero__mobile {
+      @include respond-to('mobile') {
+        display: flex;
+        margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
+          tovw(-30px, 'mobile', -30px);
+        width: 140%;
+        mix-blend-mode: screen;
+        place-self: center;
+        mask-image: linear-gradient(
+          0deg,
+          rgb(255 255 255 / 0) 0%,
+          rgb(0 0 0) 25%
+        );
       }
+
+      display: none;
     }
   }
 
@@ -162,3 +192,26 @@
     height: tovw(740px, 'default', 740px);
   }
 }
+
+[data-theme='light'] {
+  .video_container {
+    mix-blend-mode: darken;
+
+    &::after {
+      background: radial-gradient(
+        ellipse,
+        rgb(251 251 251 / 0) 40%,
+        rgb(251 251 251 / 1) 62%,
+        rgb(251 251 251 / 1) 100%
+      );
+    }
+  }
+
+  .hero__container {
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    display: none;
+  }
+}

src/components/sections/careers/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
@@ -14,21 +17,57 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-careers-light.webm')
+      setMp4Source('/videos/banner-careers-light.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-careers-light.webm')
+      setMp4Source('/videos/banner-careers-light.mp4')
+    }
+  }, [theme])
+
+  const careersHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!careersHeroMobileRef.current) return
+
+    careersHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/careers/careers.png'
+        : '/images/careers/careers-light.jpg'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
+      <div className={s['video_container']}>
+        <video
+          key={mp4Source}
+          autoPlay
+          controls={false}
+          loop
+          muted
+          playsInline={true}
+          preload="true"
+        >
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
+        </video>
+      </div>
       <div className={s.hero__container}>
         <img
-          className={s.hero}
-          loading="eager"
-          alt="hero"
-          src="/images/careers/careers.png"
-        />
-        <img
+          ref={careersHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/careers/careers.png"
         />
       </div>
       <Container className={s['container']}>

src/components/sections/careers/values/values.module.scss

@@ -145,3 +145,12 @@
     z-index: -1;
   }
 }
+
+[data-theme='light'] {
+  .features {
+    img {
+      filter: invert(100%) saturate(50%) hue-rotate(180deg);
+      mix-blend-mode: darken !important;
+    }
+  }
+}

src/components/sections/careers/why/why.module.scss

@@ -81,3 +81,11 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .features {
+    img {
+      filter: invert(100%);
+    }
+  }
+}

src/components/sections/community/events/events.module.scss

@@ -150,3 +150,17 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .events__container {
+    &::after,
+    &::before {
+      background: linear-gradient(
+        90deg,
+        rgb(251 251 251 / 0) 0%,
+        rgb(251 251 251 / 0.95) 35%,
+        rgb(251 251 251 / 1) 65%
+      );
+    }
+  }
+}

src/components/sections/community/hero/hero.module.scss

@@ -201,3 +201,26 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .video__container {
+    mix-blend-mode: darken;
+
+    &::after {
+      background: radial-gradient(
+        ellipse,
+        rgb(251 251 251 / 0) 25%,
+        rgb(251 251 251 / 0.9648) 60%,
+        rgb(251 251 251 / 1) 95%
+      );
+    }
+  }
+
+  .hero__container {
+    mix-blend-mode: darken;
+  }
+
+  .gradient {
+    display: hidden;
+  }
+}

src/components/sections/community/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import Section from '~/components/layout/section'
 import { ButtonLink } from '~/components/primitives/button'
@@ -17,11 +20,40 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  const communityHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!communityHeroMobileRef.current) return
+
+    communityHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/community/hero/community.jpg'
+        : '/images/community/hero/community-light.jpg'
+  }, [theme])
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-community.webm')
+      setMp4Source('/videos/banner-community.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-community-light.webm')
+      setMp4Source('/videos/banner-community-light.mp4')
+    }
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s['gradient']}></div>
       <div className={s['video__container']}>
         <video
+          key={mp4Source}
           autoPlay
           controls={false}
           loop
@@ -29,16 +61,16 @@ const Hero = ({ data }: Props) => {
           playsInline={true}
           preload="true"
         >
-          <source src="/videos/banner-community.webm" type="video/webm" />
-          <source src="/videos/banner-community.mp4" type="video/mp4" />
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
         </video>
       </div>
       <div className={s.hero__container}>
         <img
+          ref={communityHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/community/hero/community.jpg"
         />
       </div>
       <div className={s['header']}>

src/components/sections/community/socials/index.tsx

@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
 
 import Line from '~/components/icons/line'
 import {
@@ -27,6 +29,9 @@ interface Props {
     socialsImage: {
       url: string
     }
+    socialsImageLight: {
+      url: string
+    }
     socialsTwitter: string
     socialsDiscord: string
     socialsDiscourse: string
@@ -39,14 +44,25 @@ interface Props {
 }
 
 const Socials = ({ data, alternative }: Props) => {
+  const { theme } = useTheme()
+
+  const planetImageRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!planetImageRef.current) return
+
+    planetImageRef.current.src =
+      theme === 'dark' ? data?.socialsImage?.url : data?.socialsImageLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
         <img
+          ref={planetImageRef}
           alt="Planet"
           className={s['planet--image']}
           loading="lazy"
-          src={data?.socialsImage?.url}
         />
         <div>
           <div className={s['header']}>

src/components/sections/community/socials/socials.module.scss

@@ -138,7 +138,7 @@
   a {
     display: flex;
     transition: filter 200ms;
-    border: tovw(1px, 'default', 1px) solid #fff;
+    border: tovw(1px, 'default', 1px) solid var(--color-white);
     border-radius: tovw(30px, 'default', 20px);
     background-color: var(--color-black);
     cursor: pointer;

src/components/sections/contact/form/form.module.scss

@@ -160,3 +160,16 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section .container {
+    background: rgb(251 251 251 / 0.6);
+    box-shadow: 0px 2px 60px rgb(0 0 0 / 0.2);
+
+    input,
+    textarea,
+    select {
+      color: var(--color-white);
+    }
+  }
+}

src/components/sections/contact/hero/hero.module.scss

@@ -181,3 +181,11 @@
     height: tovw(740px, 'default', 740px);
   }
 }
+
+[data-theme='light'] {
+  .body {
+    a svg {
+      filter: invert(100%);
+    }
+  }
+}

src/components/sections/homepage/benefits/benefit/benefit.module.scss

@@ -19,15 +19,15 @@
     top: 0;
     left: 0;
     opacity: 0.5;
-    z-index: 1;
     background: linear-gradient(
       134.38deg,
-      #fff 4.91%,
-      rgb(255 255 255 / 0) 108.92%
+      var(--color-white) 4.91%,
+      var(--color-black) 108.92%
     );
     width: tovw(38px, 'default', 38px);
     height: tovw(27px, 'default', 27px);
     content: '';
+    z-index: -1;
   }
 
   svg {

src/components/sections/homepage/benefits/benefits.module.scss

@@ -111,7 +111,6 @@
   padding-right: tovw(69px, 'default', 69px);
   width: 100%;
   max-width: tovw(1080px, 'default', 730px);
-  mix-blend-mode: difference;
 
   > ul {
     margin-top: tovw(88px, 'default', 72px);
@@ -223,6 +222,29 @@
   overflow: hidden;
   top: 39.2%;
   left: 20.7%;
-  mix-blend-mode: screen;
   z-index: -1;
+  mix-blend-mode: screen;
+}
+
+[data-theme='light'] {
+  .section {
+    .background {
+      background-image: url('/images/benefit-bg-light.png');
+    }
+
+    .ball {
+      background-color: var(--color-black);
+      box-shadow: 0px 4px 115px 15px #0000f4,
+        0px 0px 70px 20px var(--color-black),
+        inset -39px -20px 100px rgb(0 0 244 / 0.73);
+      mix-blend-mode: darken;
+    }
+  }
+
+  .benefit {
+    &__image {
+      filter: invert(100%) saturate(0%);
+      mix-blend-mode: darken;
+    }
+  }
 }

src/components/sections/homepage/hero/hero.module.scss

@@ -56,23 +56,12 @@
     height: 101%;
     content: '';
     pointer-events: none;
+
     @supports (aspect-ratio: 16 / 9) {
       aspect-ratio: 16 / 9;
     }
   }
 
-  &::before {
-    background: radial-gradient(
-      ellipse farthest-corner at center center,
-      rgb(4 4 4 / 0.25) 44%,
-      var(--color-black) 0
-    );
-    width: 120%;
-    height: 115%;
-    filter: blur(tovw(40px, 'default', 30px));
-    will-change: filter, transform;
-  }
-
   .line {
     margin: tovw(10px, 'default', 10px) auto tovw(23px, 'default', 20px) auto;
     width: tovw(3px, 'default', 2px);
@@ -112,3 +101,15 @@
     width: 100%;
   }
 }
+
+[data-theme='light'] {
+  .section {
+    video {
+      mix-blend-mode: darken;
+    }
+
+    @include respond-to('mobile') {
+      background-image: url('/images/hero-mobile-light.png');
+    }
+  }
+}

src/components/sections/homepage/hero/index.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
-import { useRef } from 'react'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
 
 import Line from '~/components/icons/line'
 import Section from '~/components/layout/section'
@@ -23,6 +24,8 @@ interface props {
 const Hero = ({ data }: props) => {
   const videoRef = useRef<HTMLVideoElement>(null)
 
+  const { theme } = useTheme()
+
   useIsomorphicLayoutEffect(() => {
     if (!videoRef.current) return
     videoRef.current.addEventListener(
@@ -35,6 +38,16 @@ const Hero = ({ data }: props) => {
       false
     )
   }, [])
+
+  useEffect(() => {
+    if (!videoRef.current) return
+
+    videoRef.current.src =
+      theme === 'dark'
+        ? '/videos/hero-grid.mp4'
+        : '/videos/Banner-Home-Light.mp4'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <video
@@ -46,7 +59,7 @@ const Hero = ({ data }: props) => {
         preload="true"
         ref={videoRef}
       >
-        <source src="/videos/hero-grid.mp4" type="video/mp4" />
+        <source type="video/mp4" />
       </video>
       <Heading
         as="h1"

src/components/sections/homepage/latest-news/index.tsx

@@ -1,5 +1,6 @@
 import 'keen-slider/keen-slider.min.css'
 
+import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
 import { Key, useState } from 'react'
 
@@ -51,7 +52,10 @@ const LatestNews = ({ data, blogData }: Props) => {
         />
       </Container>
       <div className={s['slider__container']}>
-        <div className={`${s.events__container} keen-slider`} ref={sliderRef}>
+        <div
+          className={clsx(s.events__container, 'keen-slider')}
+          ref={sliderRef}
+        >
           {blogData.map((item: any, i: Key) => (
             <Card
               key={i}

src/components/sections/homepage/latest-news/latest-news.module.scss

@@ -147,3 +147,19 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section {
+    .events__container {
+      &::after,
+      &::before {
+        background: linear-gradient(
+          90deg,
+          rgb(251 251 251 / 0) 0%,
+          rgb(251 251 251 / 0.95) 35%,
+          rgb(251 251 251 / 1) 65%
+        );
+      }
+    }
+  }
+}

src/components/sections/homepage/what-others-say/index.tsx

@@ -3,6 +3,7 @@ import 'keen-slider/keen-slider.min.css'
 import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
 import { useRealViewport } from 'next-real-viewport'
+import { useTheme } from 'next-themes'
 import { useEffect, useRef } from 'react'
 
 import { Container } from '~/components/layout/container'
@@ -29,7 +30,22 @@ interface Props {
 }
 
 const WhatOthersSay = ({ data, testimonialsData }: Props) => {
+  const { theme } = useTheme()
+
   const carouselRef = useRef<HTMLDivElement>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+  const mobileImageRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!imageRef.current) return
+    if (!mobileImageRef.current) return
+
+    imageRef.current.src =
+      theme === 'dark' ? '/images/head.png' : '/images/head-light.png'
+    mobileImageRef.current.src =
+      theme === 'dark' ? '/images/head.png' : '/images/head-light.png'
+  }, [theme])
+
   const { vw } = useRealViewport()
   const [ref] = useKeenSlider<HTMLDivElement>({
     mode: 'free-snap',
@@ -119,7 +135,7 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => {
         </div>
         <div className={s['carousel']} ref={carouselRef}>
           <div className={s['image']}>
-            <img src="/images/head.png" loading="lazy" alt="Head" />
+            <img ref={imageRef} loading="lazy" alt="Head" />
           </div>
           {testimonialsData.map((testimonial) => {
             return (
@@ -137,7 +153,7 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => {
       </Container>
       <div ref={ref} className={clsx('keen-slider', s['slider'])}>
         <div className={s['image']}>
-          <img src="/images/head.png" loading="lazy" alt="Head" />
+          <img ref={mobileImageRef} loading="lazy" alt="Head" />
         </div>
         {testimonialsData.map((testimonial) => {
           return (

src/components/sections/homepage/what-others-say/item/item.module.scss

@@ -21,7 +21,7 @@
   margin: tovw(-210px) 0 0 tovw(-210px);
   border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
   border-radius: tovw(8px, 'default', 8px);
-  background-color: rgb(0 0 0 / 0.9);
+  background-color: var(--color-black);
   padding: tovw(24px, 'default', 22px);
   width: tovw(420px);
   height: tovw(270px, 'default', 270px);

src/components/sections/newsroom/hero/hero.module.scss

@@ -213,3 +213,22 @@
     height: tovw(740px, 'default', 740px);
   }
 }
+
+[data-theme='light'] {
+  .video_container {
+    mix-blend-mode: darken;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .hero__container {
+    mix-blend-mode: darken;
+    filter: brightness(115%);
+  }
+
+  .gradient {
+    display: none;
+  }
+}

src/components/sections/newsroom/hero/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
+
 import { Arrow } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
@@ -17,11 +20,40 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-press.webm')
+      setMp4Source('/videos/banner-press.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-press-light.webm')
+      setMp4Source('/videos/banner-press-light.mp4')
+    }
+  }, [theme])
+
+  const pressHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!pressHeroMobileRef.current) return
+
+    pressHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/press/press.png'
+        : '/images/press/press-light.jpg'
+  }, [theme])
+
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
       <div className={s['video_container']}>
         <video
+          key={mp4Source}
           autoPlay
           controls={false}
           loop
@@ -29,16 +61,16 @@ const Hero = ({ data }: Props) => {
           playsInline={true}
           preload="true"
         >
-          <source src="/videos/banner-press.webm" type="video/webm" />
-          <source src="/videos/banner-press.mp4" type="video/mp4" />
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
         </video>
       </div>
       <div className={s.hero__container}>
         <img
+          ref={pressHeroMobileRef}
           className={s.hero__mobile}
           loading="eager"
           alt="hero"
-          src="/images/press/press.png"
         />
       </div>
       <Container className={s['container']}>

src/components/sections/newsroom/media/media.module.scss

@@ -2,7 +2,7 @@
 
 .section {
   @include respond-to('mobile') {
-    padding-bottom: 0;
+    padding: 0;
   }
 
   position: relative;
@@ -60,6 +60,37 @@
         width: 100%;
       }
 
+      &::after,
+      &::before {
+        @include respond-to('mobile') {
+          display: block;
+          position: absolute;
+          right: tovw(-20px, 'default', -20px);
+          height: 100%;
+          content: '';
+          background: linear-gradient(
+            90deg,
+            rgb(3 3 3 / 0) 0%,
+            rgb(3 3 3 / 0.55) 35%,
+            rgb(3 3 3 / 1) 95%
+          );
+          width: tovw(20px, 'mobile', 20px);
+        }
+
+        display: none;
+      }
+
+      &::before {
+        @include respond-to('mobile') {
+          content: initial;
+        }
+
+        right: initial;
+        left: tovw(-180px);
+        transform: scaleX(-1);
+        z-index: 5;
+      }
+
       .image__container {
         cursor: pointer;
         position: relative;
@@ -130,6 +161,7 @@
 }
 
 .videolabel {
+  color: var(--color-white);
   display: block;
   font-family: var(--font-tt-hoves);
   font-size: tovw(40px, 'default', 18px);
@@ -137,3 +169,26 @@
   line-height: 120%;
   letter-spacing: -0.02em;
 }
+
+[data-theme='light'] {
+  .container .media__block {
+    &::after,
+    &::before {
+      @include respond-to('mobile') {
+        background: linear-gradient(
+          90deg,
+          rgb(251 251 251 / 0) 0%,
+          rgb(251 251 251 / 0.55) 35%,
+          rgb(251 251 251 / 1) 95%
+        );
+      }
+
+      background: linear-gradient(
+        90deg,
+        rgb(251 251 251 / 0) 0%,
+        rgb(251 251 251 / 0.95) 35%,
+        rgb(251 251 251 / 1) 65%
+      );
+    }
+  }
+}

src/components/sections/newsroom/press/press.module.scss

@@ -135,3 +135,17 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .events__container {
+    &::after,
+    &::before {
+      background: linear-gradient(
+        90deg,
+        rgb(251 251 251 / 0) 0%,
+        rgb(251 251 251 / 0.95) 35%,
+        rgb(251 251 251 / 1) 65%
+      );
+    }
+  }
+}

src/components/sections/partners/contact/contact.module.scss

@@ -223,3 +223,18 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section .container {
+    .form__container {
+      background: rgb(251 251 251 / 0.6);
+      box-shadow: 0px 2px 60px rgb(0 0 0 / 0.2);
+    }
+
+    input,
+    textarea,
+    select {
+      color: var(--color-white);
+    }
+  }
+}

src/components/sections/partners/opportunities/index.tsx

@@ -37,6 +37,21 @@ interface Props {
       label: string
       link: string
     }[]
+    oportunitiesImage01: {
+      url: string
+    }
+    oportunitiesImage02: {
+      url: string
+    }
+    oportunitiesImage03: {
+      url: string
+    }
+    oportunitiesImage04: {
+      url: string
+    }
+    oportunitiesImage05: {
+      url: string
+    }
   }
 }
 
@@ -47,7 +62,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="validators">
           <img
             className={s.item_image}
-            src="/images/careers/curiosity.png"
+            src={data?.oportunitiesImage01?.url}
             alt="validators"
           />
           <div>
@@ -57,7 +72,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src="/images/careers/curiosity.png"
+                src={data?.oportunitiesImage01?.url}
                 alt="validators"
               />
             </div>
@@ -78,7 +93,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="providers">
           <img
             className={s.item_image}
-            src="/images/careers/elegance.png"
+            src={data?.oportunitiesImage02?.url}
             alt="validators"
           />
           <div>
@@ -88,7 +103,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src="/images/careers/elegance.png"
+                src={data?.oportunitiesImage02?.url}
                 alt="validators"
               />
             </div>
@@ -109,7 +124,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="developers">
           <img
             className={s.item_image}
-            src="/images/careers/precision.png"
+            src={data?.oportunitiesImage03?.url}
             alt="validators"
           />
           <div>
@@ -119,7 +134,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src="/images/careers/precision.png"
+                src={data?.oportunitiesImage03?.url}
                 alt="validators"
               />
             </div>
@@ -140,7 +155,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="investors">
           <img
             className={s.item_image}
-            src="/images/careers/self.png"
+            src={data?.oportunitiesImage04?.url}
             alt="validators"
           />
           <div>
@@ -150,7 +165,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>{' '}
               <img
                 className={s.item_image__mobile}
-                src="/images/careers/self.png"
+                src={data?.oportunitiesImage04?.url}
                 alt="validators"
               />
             </div>
@@ -171,7 +186,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="testnet">
           <img
             className={s.item_image}
-            src="/images/careers/curiosity.png"
+            src={data?.oportunitiesImage05?.url}
             alt="validators"
           />
           <div>
@@ -181,7 +196,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src="/images/careers/curiosity.png"
+                src={data?.oportunitiesImage05?.url}
                 alt="validators"
               />
             </div>

src/components/sections/partners/opportunities/opportunities.module.scss

@@ -158,3 +158,17 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .container .block {
+    .item_image {
+      filter: invert(100%) saturate(50%) hue-rotate(180deg);
+      mix-blend-mode: darken !important;
+
+      &__mobile {
+        filter: invert(100%) saturate(50%) hue-rotate(180deg);
+        mix-blend-mode: darken !important;
+      }
+    }
+  }
+}

src/components/sections/products/app/app.module.scss

@@ -79,3 +79,9 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section div:first-child {
+    mix-blend-mode: darken;
+  }
+}

src/components/sections/products/app/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -14,20 +17,37 @@ interface Props {
     appMobileImg: {
       url: string
     }
+    appImgLight: {
+      url: string
+    }
+    appMobileImgLight: {
+      url: string
+    }
   }
 }
 
 const AppSection = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const appImgRef = useRef<HTMLImageElement>(null)
+  const appImgMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!appImgRef.current) return
+    if (!appImgMobileRef.current) return
+
+    appImgRef.current.src =
+      theme === 'dark' ? data?.appImg?.url : data?.appImgLight?.url
+    appImgMobileRef.current.src =
+      theme === 'dark' ? data?.appMobileImg?.url : data?.appMobileImgLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']} id="laconicapp">
       <Container className={s['container']}>
         <div>
-          <img className={s.app__img} src={data?.appImg?.url} alt="app" />
-          <img
-            className={s.app__img__mobile}
-            src={data?.appMobileImg?.url}
-            alt="app"
-          />
+          <img ref={appImgRef} className={s.app__img} alt="app" />
+          <img ref={appImgMobileRef} className={s.app__img__mobile} alt="app" />
         </div>
         <div>
           <Heading as="h2" variant="lg">

src/components/sections/products/hero/hero.module.scss

@@ -29,7 +29,7 @@
     align-self: center;
     position: relative;
     width: 82%;
-    min-height: tovw(920px, 'default', 435px);
+    min-height: tovw(925px, 'default', 435px);
     margin-top: tovw(-165px, 'default');
     margin-bottom: tovw(-140px, 'default');
     padding-top: tovw(30px, 'default', 20px);
@@ -68,11 +68,17 @@
       width: 200%;
       mix-blend-mode: screen;
       place-self: center;
+      min-height: tovw(328px, 'mobile', 340px);
       mask-image: linear-gradient(
         0deg,
         rgb(255 255 255 / 0) 0%,
         rgb(0 0 0) 25%
       );
+
+      img {
+        margin: auto;
+        width: 100%;
+      }
     }
 
     display: none;
@@ -231,3 +237,22 @@
     height: tovw(740px, 'default', 740px);
   }
 }
+
+[data-theme='light'] {
+  .video_container {
+    mix-blend-mode: darken;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .hero__mobile {
+    mix-blend-mode: darken;
+    filter: brightness(110%);
+  }
+
+  .gradient {
+    display: none;
+  }
+}

src/components/sections/products/hero/index.tsx

@@ -1,4 +1,5 @@
-import { useRef } from 'react'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef, useState } from 'react'
 
 import { Arrow } from '~/components/icons/arrow'
 import { Container } from '~/components/layout/container'
@@ -24,36 +25,54 @@ interface Props {
 }
 
 const Hero = ({ data }: Props) => {
-  const heroVideoRef = useRef<HTMLVideoElement>(null)
+  const { theme } = useTheme()
 
-  // const loop = () => {
-  //   heroVideoRef.current?.play()
-  // }
+  const [webmSource, setWebmSource] = useState('')
+  const [mp4Source, setMp4Source] = useState('')
+
+  const productsHeroMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!productsHeroMobileRef.current) return
+
+    productsHeroMobileRef.current.src =
+      theme === 'dark'
+        ? '/images/products/products.jpg'
+        : '/images/products/products-light.jpg'
+  }, [theme])
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      setWebmSource('/videos/banner-products.webm')
+      setMp4Source('/videos/banner-products.mp4')
+    }
+
+    if (theme === 'light') {
+      setWebmSource('/videos/banner-products-light.webm')
+      setMp4Source('/videos/banner-products-light.mp4')
+    }
+  }, [theme])
 
   return (
     <Section className={s['section']} disableFadeIn>
       <div className={s.gradient} />
       <div className={s.video_container}>
         <video
+          key={mp4Source}
           autoPlay
-          ref={heroVideoRef}
           controls={false}
           loop
-          // onEnded={() => loop()}
           muted
           playsInline={true}
           preload="true"
         >
-          <source src="/videos/banner-products.webm" type="video/webm" />
-          <source src="/videos/banner-products.mp4" type="video/mp4" />
+          <source src={webmSource} type="video/webm" />
+          <source src={mp4Source} type="video/mp4" />
         </video>
       </div>
-      <img
-        className={s.hero__mobile}
-        loading="eager"
-        alt="hero"
-        src="/images/products/products.jpg"
-      />
+      <div className={s.hero__mobile}>
+        <img ref={productsHeroMobileRef} loading="eager" alt="hero" />
+      </div>
       <Container className={s['container']}>
         <div className={s.body}>
           <div>

src/components/sections/products/network/index.tsx

@@ -1,4 +1,7 @@
 // import { Arrow } from '~/components/icons/arrow'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -18,10 +21,33 @@ interface Props {
     networkMobileImg: {
       url: string
     }
+    networkImgLight: {
+      url: string
+    }
+    networkMobileImgLight: {
+      url: string
+    }
   }
 }
 
 const Network = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const networkImgRef = useRef<HTMLImageElement>(null)
+  const networkImgMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!networkImgRef.current) return
+    if (!networkImgMobileRef.current) return
+
+    networkImgRef.current.src =
+      theme === 'dark' ? data?.networkImg?.url : data?.networkImgLight?.url
+    networkImgMobileRef.current.src =
+      theme === 'dark'
+        ? data?.networkMobileImg?.url
+        : data?.networkMobileImgLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']} id="laconicnetwork">
       <Container className={s['container']}>
@@ -31,8 +57,8 @@ const Network = ({ data }: Props) => {
           </Heading>
           <p>{data?.networkDesc}</p>
           <img
+            ref={networkImgMobileRef}
             className={s.network__img__mobile}
-            src={data?.networkMobileImg?.url}
             alt="network"
           />
           <div className={s.features}>
@@ -50,11 +76,7 @@ const Network = ({ data }: Props) => {
             </div>
           </div>
         </div>
-        <img
-          className={s.network__img}
-          src={data?.networkImg?.url}
-          alt="network"
-        />
+        <img ref={networkImgRef} className={s.network__img} alt="network" />
       </Container>
     </Section>
   )

src/components/sections/products/network/network.module.scss

@@ -124,3 +124,18 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .features {
+    img {
+      filter: invert(100%);
+    }
+  }
+
+  .section .container {
+    .network__img,
+    .network__img__mobile {
+      mix-blend-mode: darken;
+    }
+  }
+}

src/components/sections/products/stack/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -18,15 +21,36 @@ interface Props {
     stackImage: {
       url: string
     }
+    stackImageLight: {
+      url: string
+    }
     stackSvgImg: {
       url: string
     }
+    stackSvgImgLight: {
+      url: string
+    }
   }
 }
 
 const Stack = ({ data }: Props) => {
   const stackData = data?.stackListData?.stackData
 
+  const { theme } = useTheme()
+
+  const stackImgRef = useRef<HTMLImageElement>(null)
+  const stackSvgRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!stackImgRef.current) return
+    if (!stackSvgRef.current) return
+
+    stackImgRef.current.src =
+      theme === 'dark' ? data?.stackImage?.url : data?.stackImageLight?.url
+    stackSvgRef.current.src =
+      theme === 'dark' ? data?.stackSvgImg?.url : data?.stackSvgImgLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']} id="laconicstack">
       <Container className={s['container']}>
@@ -53,14 +77,10 @@ const Stack = ({ data }: Props) => {
         </div>
         <div>
           <div className={s.image__container}>
+            <img ref={stackImgRef} className={s.stack__img} alt="stack" />
             <img
-              className={s.stack__img}
-              src={data?.stackImage?.url}
-              alt="stack"
-            />
-            <img
+              ref={stackSvgRef}
               className={`${s.stack__img} ${s.stack__img__small}`}
-              src={data?.stackSvgImg?.url}
               alt="stack"
             />
           </div>

src/components/sections/products/stack/stack.module.scss

@@ -167,3 +167,16 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .section div:last-child {
+    .gradient {
+      background: linear-gradient(
+        180deg,
+        rgb(132 132 132 / 0) 0%,
+        rgb(132 132 132 / 0.4) 48.91%,
+        rgb(132 132 132 / 0) 100%
+      );
+    }
+  }
+}

src/components/sections/products/token/token.module.scss

@@ -128,3 +128,17 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .features {
+    img {
+      filter: invert(100%);
+    }
+  }
+
+  .token__img,
+  .token__img__mobile {
+    filter: invert(100%) brightness(150%) opacity(90%);
+    mix-blend-mode: darken !important;
+  }
+}

src/components/sections/products/watchers/index.tsx

@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+
 import Line from '~/components/icons/line'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
@@ -11,9 +14,15 @@ interface Props {
     watchersImage: {
       url: string
     }
+    watchersImageLight: {
+      url: string
+    }
     watchersMobileImage: {
       url: string
     }
+    watchersMobileImageLight: {
+      url: string
+    }
     watchersItem01: string
     watchersItem02: string
     watchersItem03: string
@@ -24,6 +33,25 @@ interface Props {
 }
 
 const Watchers = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const watchersImgRef = useRef<HTMLImageElement>(null)
+  const watchersMobileImgRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!watchersImgRef.current) return
+    if (!watchersMobileImgRef.current) return
+
+    watchersImgRef.current.src =
+      theme === 'dark'
+        ? data?.watchersImage?.url
+        : data?.watchersImageLight?.url
+    watchersMobileImgRef.current.src =
+      theme === 'dark'
+        ? data?.watchersMobileImage?.url
+        : data?.watchersMobileImageLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']} id="laconicwatchers">
       <Container className={s['container']}>
@@ -32,8 +60,9 @@ const Watchers = ({ data }: Props) => {
           <p>{data?.watchersP02}</p>
           <p>{data?.watchersListHead}</p>
           <img
+            ref={watchersMobileImgRef}
             className={s.watchers__img__mobile}
-            src={data?.watchersMobileImage?.url}
+            // src={data?.watchersMobileImage?.url}
             alt="network"
           />
           <div className={s.features}>
@@ -59,10 +88,10 @@ const Watchers = ({ data }: Props) => {
             variant="lg"
             dangerouslySetInnerHTML={{ __html: data?.watchersHeading }}
           />
-
           <img
+            ref={watchersImgRef}
             className={s.watchers__img}
-            src={data?.watchersImage?.url}
+            // src={data?.watchersImage?.url}
             alt="network"
           />
         </div>

src/components/sections/products/watchers/watchers.module.scss

@@ -158,3 +158,15 @@
     }
   }
 }
+
+[data-theme='light'] {
+  .container {
+    .watchers__img {
+      mix-blend-mode: darken;
+    }
+
+    .watchers__img__mobile {
+      mix-blend-mode: darken;
+    }
+  }
+}

src/css/global.scss

@@ -14,12 +14,23 @@
   --font-heading: var(--font-arthemys);
 
   // Colors
-  --color-accent: #0000f4;
-  --color-black: #040404;
-  --color-white: #fbfbfb;
-  --color-grey: #565656;
-  --color-grey-light: #8e8e8e;
-  --color-grey-lightness: #dedede;
+  &[data-theme='dark'] {
+    --color-accent: #0000f4;
+    --color-black: #040404;
+    --color-white: #fbfbfb;
+    --color-grey: #565656;
+    --color-grey-light: #8e8e8e;
+    --color-grey-lightness: #dedede;
+  }
+
+  &[data-theme='light'] {
+    --color-accent: #0000f4;
+    --color-black: #fbfbfb;
+    --color-white: #040404;
+    --color-grey: #565656;
+    --color-grey-light: #8e8e8e;
+    --color-grey-lightness: #dedede;
+  }
 
   // Duration
   --duration-normal: 0.525s;
@@ -156,7 +167,7 @@ p {
     transition: unset !important;
 
     &:hover {
-      border: tovw(1px, 'default', 1px) solid transparent !important;
+      border: tovw(1px, 'default', 1px) solid var(--color-grey) !important;
     }
 
     &--is-focused {
@@ -232,3 +243,13 @@ p {
     color: var(--color-grey-light) !important;
   }
 }
+
+[data-theme='light'] {
+  [class$='-menu'] {
+    background: rgb(0 0 0 / 0.65) !important;
+
+    @-moz-document url-prefix("") {
+      background-color: var(--color-white) !important;
+    }
+  }
+}

src/lib/cms/queries/community.js

@@ -52,6 +52,9 @@ const CommunitySocials = {
                 socialsImage {
                     url
                 }
+                socialsImageLight {
+                    url
+                }
                 socialsTwitter
                 socialsDiscord
                 socialsDiscourse

src/lib/cms/queries/partners.js

@@ -28,6 +28,21 @@ const PartnersOportunities = {
                     oportunitiesItem03Links
                     oportunitiesItem04Links
                     oportunitiesItem05Links
+                    oportunitiesImage01 {
+                        url
+                    }
+                    oportunitiesImage02 {
+                        url
+                    }
+                    oportunitiesImage03 {
+                        url
+                    }
+                    oportunitiesImage04 {
+                        url
+                    }
+                    oportunitiesImage05 {
+                        url
+                    }
                 }
             }`
 }

src/lib/cms/queries/products.js

@@ -26,9 +26,15 @@ const ProductsWatchers = {
             watchersImage {
                 url
             }
+            watchersImageLight {
+                url
+            }
             watchersMobileImage {
                 url
             }
+            watchersMobileImageLight {
+                url
+            }
             watchersItem01
             watchersItem02
             watchersItem03
@@ -50,9 +56,15 @@ const ProductsStack = {
             stackImage {
                 url
             }
+            stackImageLight {
+                url
+            }
             stackSvgImg {
                 url
             }
+            stackSvgImgLight {
+                url
+            }
         }
     }
     `
@@ -73,6 +85,12 @@ const ProductsNetwork = {
             networkMobileImg {
                 url
             }
+            networkImgLight {
+                url
+            }
+            networkMobileImgLight {
+                url
+            }
         }
     }
     `
@@ -90,6 +108,12 @@ const ProductsApp = {
             appMobileImg {
                 url
             }
+            appImgLight {
+                url
+            }
+            appMobileImgLight {
+                url
+            }
         }
     }
     `

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import '~/css/global.scss'
 import { NextComponentType, NextPageContext } from 'next'
 import { AppProps } from 'next/app'
 import { RealViewportProvider } from 'next-real-viewport'
+import { ThemeProvider } from 'next-themes'
 import * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
@@ -62,11 +63,13 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
       <RealViewportProvider debounceResize={false}>
         <Noise />
         <AnimationContextProvider>
-          <GAScripts />
-          <FontsReadyScript />
-          <Header />
-          {getLayout({ Component, pageProps, ...rest })}
-          <Footer />
+          <ThemeProvider enableSystem={false} defaultTheme="dark">
+            <GAScripts />
+            <FontsReadyScript />
+            <Header />
+            {getLayout({ Component, pageProps, ...rest })}
+            <Footer />
+          </ThemeProvider>
         </AnimationContextProvider>
       </RealViewportProvider>
     </QueryClientProvider>

yarn.lock

@@ -4502,6 +4502,11 @@ next-sitemap@^2.5.20:
     "@corex/deepmerge" "^2.6.148"
     minimist "^1.2.6"
 
+next-themes@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.0.tgz#fdc507f61e95b3ae513dee8d4783bcec8c02e3a3"
+  integrity sha512-myhpDL4vadBD9YDSHiewqvzorGzB03N84e+3LxCwHRlM/hiBOaW+UsKsQojQAzC7fdcJA0l2ppveXcYaVV+hxQ==
+
 next@^12.1.5:
   version "12.1.5"
   resolved "https://registry.yarnpkg.com/next/-/next-12.1.5.tgz#7a07687579ddce61ee519493e1c178d83abac063"