diff --git a/package.json b/package.json
index d3caed22..c187af8f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@ant-design/icons": "^4.2.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/user-event": "^7.1.2",
+    "@theme-toggles/react": "^4.1.0",
     "dayjs": "^1.9.3",
     "html-react-parser": "^1.4.0",
     "react": "^16.13.1",
diff --git a/src/App.js b/src/App.js
index a44a5351..53062e07 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { View } from 'react-native';
+import { ThemeContext } from './Context/ThemeContext';
 import Header from './Components/Header';
 import Content from './Components/Content';
 import Footer from './Components/Footer';
@@ -14,8 +15,17 @@ function App() {
     'EVENTS',
     'CONTRIBUTE',
   ];
+  const { colors } = useContext(ThemeContext);
   return (
-    <View style={{ position: 'absolute', width: '100%', alignItems: 'center' }}>
+    <View
+      style={{
+        position: 'absolute',
+        width: '100%',
+        alignItems: 'center',
+        backgroundColor: colors.background,
+        minHeight: '100vh',
+      }}
+    >
       <Header selected={selected} setSelected={setSelected} titles={titles} />
       <Content selected={selected} titles={titles} />
       <Footer />
diff --git a/src/Components/AboutUs/index.js b/src/Components/AboutUs/index.js
index 3674a437..83fcc6fd 100644
--- a/src/Components/AboutUs/index.js
+++ b/src/Components/AboutUs/index.js
@@ -4,9 +4,11 @@ import content from '../../content/about_us.json';
 import ImageContent from './../ImageContent';
 import { MainContainer, Box, Content, Description } from './styles';
 import OSCommunity from './Oscommunity';
-import Hyperlink from 'react-native-hyperlink';
+import Link from 'react-native-hyperlink';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function AboutUs() {
+  const { colors } = React.useContext(ThemeContext);
   const renderContent = () => {
     return (
       <Box>
@@ -16,12 +18,14 @@ function AboutUs() {
               <SectionSubheader title={section.title} />
               {section.content.map((content, indx) => {
                 return (
-                  <Hyperlink
+                  <Link
                     linkStyle={{ color: '#2980b9' }}
                     onPress={(url) => window.open(url, '_blank')}
                   >
-                    <Description key={indx}>{content.par}</Description>
-                  </Hyperlink>
+                    <Description key={indx} style={{ color: colors.text }}>
+                      {content.par}
+                    </Description>
+                  </Link>
                 );
               })}
             </Content>
diff --git a/src/Components/Contribute/index.js b/src/Components/Contribute/index.js
index a553558c..623b4b7c 100644
--- a/src/Components/Contribute/index.js
+++ b/src/Components/Contribute/index.js
@@ -4,9 +4,11 @@ import content from '../../content/contributeIntro';
 import ImageContent from './../ImageContent';
 import { MainContainer, Box, Content, Description } from './style';
 import Hyperlink from 'react-native-hyperlink';
+import { ThemeContext } from '../../Context/ThemeContext';
 import HTMLReactParser from 'html-react-parser';
 
 function Contribute() {
+  const { colors } = React.useContext(ThemeContext);
   const renderContent = () => {
     return (
       <Box>
@@ -20,7 +22,9 @@ function Contribute() {
                     linkStyle={{ color: '#2980b9' }}
                     onPress={(url) => window.open(url, '_blank')}
                   >
-                    <Description key={index}>{HTMLReactParser(content.par)}</Description>
+                    <Description key={index} style={{ color: colors.text }}>
+                      {HTMLReactParser(content.par)}
+                    </Description>
                   </Hyperlink>
                 );
               })}
diff --git a/src/Components/Events/Cards/CardBadge/index.js b/src/Components/Events/Cards/CardBadge/index.js
index 288e62db..0b8ff020 100644
--- a/src/Components/Events/Cards/CardBadge/index.js
+++ b/src/Components/Events/Cards/CardBadge/index.js
@@ -1,11 +1,18 @@
 import React from 'react';
 import { Text, Image, StyleSheet, View } from 'react-native';
+import { ThemeContext } from '../../../../Context/ThemeContext';
 
 const Badge = (props) => {
+  const { colors } = React.useContext(ThemeContext);
   return (
     <View style={styles.container}>
-      <Image style={styles.image} source={props.link} />
-      <Text style={styles.description}>{props.text}</Text>
+      <Image
+        style={[styles.image, { tintColor: colors.iconColor || colors.text }]}
+        source={props.link}
+      />
+      <Text style={[styles.description, { color: colors.text }]}>
+        {props.text}
+      </Text>
     </View>
   );
 };
diff --git a/src/Components/Events/Cards/index.js b/src/Components/Events/Cards/index.js
index 89ac92c0..0f742e66 100644
--- a/src/Components/Events/Cards/index.js
+++ b/src/Components/Events/Cards/index.js
@@ -1,27 +1,32 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, StyleSheet, View, Linking } from 'react-native';
 import ScaledImage from '../../ScaledImage';
 import { withCard } from './../../../Decorators/Card';
 import Badge from './CardBadge';
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 const EventCard = ({ props, links }) => {
+  const { colors } = useContext(ThemeContext);
   const { calendarIcon, timeIcon, locationIcon } = links;
   return (
-    <View style={styles.card}>
+    <View style={[styles.card, { backgroundColor: colors.cardBackground }]}>
       <ScaledImage width={286} source={props.highlights.source} />
-      <Text style={styles.title}>{props.title}</Text>
+      <Text style={[styles.title, { color: colors.text }]}>{props.title}</Text>
       <Badge text={props.date} link={calendarIcon} />
       <Badge text={props.location} link={locationIcon} />
       <Badge text={props.timings} link={timeIcon} />
       <View style={{ marginTop: 32 }}>
         {props.description.map((detail, index) => (
-          <Text style={styles.detailStyles} key={index}>
+          <Text
+            style={[styles.detailStyles, { color: colors.text }]}
+            key={index}
+          >
             {detail.par}
           </Text>
         ))}
       </View>
       <Text
-        style={styles.know_moreStyles}
+        style={[styles.know_moreStyles, { color: colors.text }]}
         onPress={() => {
           Linking.openURL(props.know_more.link);
         }}
diff --git a/src/Components/Events/GoogleCalendar/index.js b/src/Components/Events/GoogleCalendar/index.js
index 8491d6d2..10f82ceb 100644
--- a/src/Components/Events/GoogleCalendar/index.js
+++ b/src/Components/Events/GoogleCalendar/index.js
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { MainContainer } from '../style';
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 function GoogleCalendar({ timezone }) {
+  const { theme } = useContext(ThemeContext);
   return (
     <MainContainer>
       <iframe
@@ -13,6 +15,7 @@ function GoogleCalendar({ timezone }) {
           height: '500px',
           frameborder: '0',
           scrolling: 'no',
+          filter: theme === 'dark' ? 'invert(1) hue-rotate(180deg)' : 'none',
         }}
       ></iframe>
     </MainContainer>
diff --git a/src/Components/Events/index.js b/src/Components/Events/index.js
index 4ac30405..a3fa4e10 100644
--- a/src/Components/Events/index.js
+++ b/src/Components/Events/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import EventCard from './Cards';
 import { getevents_highlights } from './../../content/events_and_highlights';
@@ -7,6 +7,7 @@ import GoogleCalendar from './GoogleCalendar';
 import content from '../../content/events_calendar.json';
 import { MainContainer, Content, Description, List } from './style';
 import OurEvents from '../OurEvents/index';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 const events_highlight = getevents_highlights();
 
@@ -70,6 +71,7 @@ const timezones = [
 ];
 
 function Events() {
+  const { colors, theme } = useContext(ThemeContext);
   const [timezone, setTimezone] = useState('');
 
   const handler = (link) => {
@@ -90,7 +92,10 @@ function Events() {
         <SectionSubheader title={events_highlight.sections[0].title} />
         {events_highlight.sections[0].content.map((detail, index) => {
           return (
-            <Text style={styles.description} key={index}>
+            <Text
+              style={[styles.description, { color: colors.text }]}
+              key={index}
+            >
               {detail.par}
             </Text>
           );
@@ -101,7 +106,7 @@ function Events() {
               key={event_detail.title}
               props={event_detail}
               links={events_highlight.icon_links}
-              backgroundColor="#e7edfd"
+              backgroundColor={theme === 'dark' ? '#1d1d1dff' : '#e7edfd'}
               padding={16}
             />
           ))}
@@ -113,7 +118,7 @@ function Events() {
             return (
               <Content key={index}>
                 <SectionSubheader title={section.title} />
-                <Description>
+                <Description style={{ color: colors.text }}>
                   {section.content} <br /> {listTimezones}
                 </Description>
                 <GoogleCalendar timezone={timezone} />
diff --git a/src/Components/Header/index.js b/src/Components/Header/index.js
index 0de52f3a..d1a49168 100644
--- a/src/Components/Header/index.js
+++ b/src/Components/Header/index.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import '@theme-toggles/react/css/Expand.css';
+import { Expand } from '@theme-toggles/react';
 import {
   View,
   Image,
@@ -6,14 +8,16 @@ import {
   TouchableHighlight,
   StyleSheet,
 } from 'react-native';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function Header({ selected, setSelected, titles }) {
+  const { theme, toggleTheme, colors } = React.useContext(ThemeContext);
   return (
     <View
       style={{
         flexDirection: 'row',
         width: '80%',
-        borderBottomColor: '#FF0000',
+        borderBottomColor: colors.headerBorder,
         borderBottomWidth: 1,
         alignContent: 'center',
       }}
@@ -27,19 +31,31 @@ function Header({ selected, setSelected, titles }) {
       >
         <Image
           style={{ height: 50, width: 100 }}
-          source={require('./../../assets/logo.png')}
+          source={
+            theme === 'dark'
+              ? require('./../../assets/logo_dark.png')
+              : require('./../../assets/logo.png')
+          }
         />
       </TouchableHighlight>
-      {MenuItem(1, selected, setSelected, titles[1])}
-      {MenuItem(2, selected, setSelected, titles[2])}
-      {MenuItem(3, selected, setSelected, titles[3])}
-      {MenuItem(4, selected, setSelected, titles[4])}
-      {MenuItem(5, selected, setSelected, titles[5])}
+      {MenuItem(1, selected, setSelected, titles[1], colors)}
+      {MenuItem(2, selected, setSelected, titles[2], colors)}
+      {MenuItem(3, selected, setSelected, titles[3], colors)}
+      {MenuItem(4, selected, setSelected, titles[4], colors)}
+      {MenuItem(5, selected, setSelected, titles[5], colors)}
+      <View style={{ justifyContent: 'flex-end', marginLeft: 20 }}>
+        <Expand
+          duration={550}
+          toggled={theme === 'dark'}
+          onToggle={toggleTheme}
+          style={{ color: colors.iconColor, fontSize: '1.4em' }}
+        />
+      </View>
     </View>
   );
 }
 
-function MenuItem(index, selected, setSelected, title) {
+function MenuItem(index, selected, setSelected, title, colors) {
   return (
     <TouchableHighlight
       style={styles.buttonContainer}
@@ -53,6 +69,7 @@ function MenuItem(index, selected, setSelected, title) {
           borderBottomColor: selected === index ? 'powderblue' : 'transparent',
           borderBottomWidth: 2,
           alignSelf: 'center',
+          color: colors.text,
         }}
       >
         {title}
diff --git a/src/Components/Home/contribution/ContributionCard.js b/src/Components/Home/contribution/ContributionCard.js
index 40bd7f84..6a1b6686 100644
--- a/src/Components/Home/contribution/ContributionCard.js
+++ b/src/Components/Home/contribution/ContributionCard.js
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, View, Image } from 'react-native';
 import styles from '../styles';
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 function ContributionCard({ imageFile, imageText = [], style = [] }) {
+  const { colors } = useContext(ThemeContext);
   return (
     <View style={[...style, styles.card]}>
       <Image
@@ -12,7 +14,7 @@ function ContributionCard({ imageFile, imageText = [], style = [] }) {
       />
       {imageText.map((text, index) => {
         return (
-          <Text key={index} style={styles.imageText}>
+          <Text key={index} style={[styles.imageText, { color: colors.text }]}>
             {text}
           </Text>
         );
diff --git a/src/Components/Home/contribution/ContributionSection.js b/src/Components/Home/contribution/ContributionSection.js
index 3dbea70c..da6e44d0 100644
--- a/src/Components/Home/contribution/ContributionSection.js
+++ b/src/Components/Home/contribution/ContributionSection.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, View } from 'react-native';
 import styles from '../styles';
 import SectionHeader from '../../SectionHeader';
 import ContributionCard from './ContributionCard';
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 function ContributionSection() {
+  const { colors } = useContext(ThemeContext);
   const contributionCards = [
     {
       imageText: ['CODE'],
@@ -41,7 +43,7 @@ function ContributionSection() {
   return (
     <View>
       <SectionHeader title="INTERESTED IN CONTRIBUTING?" />
-      <Text style={styles.description}>
+      <Text style={[styles.description, { color: colors.text }]}>
         You can start contributing through one or more fields of your choice
       </Text>
       <View style={styles.container}>
diff --git a/src/Components/Home/index.js b/src/Components/Home/index.js
index 5de09a0f..895bf2cd 100644
--- a/src/Components/Home/index.js
+++ b/src/Components/Home/index.js
@@ -6,8 +6,10 @@ import { getHome } from './../../content/home';
 import { Box, Content, Description } from './styles';
 import ContributionSection from './contribution/ContributionSection';
 import HTMLReactParser from 'html-react-parser';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function Home() {
+  const { colors } = React.useContext(ThemeContext);
   const content = getHome();
   const renderContent = (index, section) => {
     return (
@@ -15,7 +17,9 @@ function Home() {
         <SectionSubheader title={section.title} />
         {section.content.map((content, indx) => {
           return (
-            <Description key={indx}>{HTMLReactParser(content.par)}</Description>
+            <Description key={indx} style={{ color: colors.text }}>
+              {HTMLReactParser(content.par)}
+            </Description>
           );
         })}
       </Content>
@@ -35,7 +39,7 @@ function Home() {
           />
         );
       })}
-      <ContributionSection />
+      <ContributionSection colors={colors} />
     </Box>
   );
 }
diff --git a/src/Components/ImageTextSection/index.js b/src/Components/ImageTextSection/index.js
index 0ab4d87e..82d7100b 100644
--- a/src/Components/ImageTextSection/index.js
+++ b/src/Components/ImageTextSection/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { ThemeContext } from '../../Context/ThemeContext';
 import ScaledImage from './../ScaledImage';
 
 const ImageTextSection = ({
@@ -9,6 +10,7 @@ const ImageTextSection = ({
   imageSide,
   imageHeight = 300,
 }) => {
+  const { colors } = React.useContext(ThemeContext);
   const styles = createStyles(imageSide);
   return (
     <View style={styles.container}>
@@ -16,9 +18,9 @@ const ImageTextSection = ({
         <ScaledImage source={image} height={imageHeight} />
       </View>
       <View style={styles.subContainer}>
-        <Text style={styles.header}>{title}</Text>
+        <Text style={[styles.header, { color: colors.text }]}>{title}</Text>
         {content.map((text, index) => (
-          <Text key={index} style={styles.text}>
+          <Text key={index} style={[styles.text, { color: colors.text }]}>
             {text.par}
           </Text>
         ))}
diff --git a/src/Components/OurEvents/index.js b/src/Components/OurEvents/index.js
index 09630198..c83fd62f 100644
--- a/src/Components/OurEvents/index.js
+++ b/src/Components/OurEvents/index.js
@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import ImageContent from './../ImageContent';
 import SectionHeader from './../SectionHeader';
 import { getEvents } from './../../content/our_events';
 import { Box, Content, Description } from './styles';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function OurEvents() {
+  const { colors } = useContext(ThemeContext);
   const content = getEvents();
   const renderContent = (index, section) => {
     return (
       <Content key={index}>
         <SectionHeader title={section.title} />
         {section.content.map((content, indx) => {
-          return <Description key={indx}>{content.par}</Description>;
+          return (
+            <Description key={indx} style={{ color: colors.text }}>
+              {content.par}
+            </Description>
+          );
         })}
       </Content>
     );
diff --git a/src/Components/Programs/ProgramsTableSection/ProgramsTablesSection.js b/src/Components/Programs/ProgramsTableSection/ProgramsTablesSection.js
index d2daa4ff..bfd65d09 100644
--- a/src/Components/Programs/ProgramsTableSection/ProgramsTablesSection.js
+++ b/src/Components/Programs/ProgramsTableSection/ProgramsTablesSection.js
@@ -1,36 +1,33 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import programs from '../../../content/programs.json';
 import ProgramsTable from './ProgramsTable';
 import {
   SectionContainer,
   SectionHeader,
-  SectionTableContainer
+  SectionTableContainer,
 } from './styles';
-
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 function ProgramsTableSection() {
+  const { colors } = useContext(ThemeContext);
   const content = programs;
 
   return (
     <>
-      {
-        content.map((section, index) => {
-          return (
-            <SectionContainer key={index}>
-              <SectionHeader>
-                {section.sectionHeader}
-              </SectionHeader>
-              <SectionTableContainer>
-                {
-                  section.tables.map((table, index) => {
-                    return (<ProgramsTable key={index} table={table} />);
-                  })
-                }
-              </SectionTableContainer>
-            </SectionContainer>
-          );
-        })
-      }
+      {content.map((section, index) => {
+        return (
+          <SectionContainer key={index}>
+            <SectionHeader style={{ color: colors.text }}>
+              {section.sectionHeader}
+            </SectionHeader>
+            <SectionTableContainer>
+              {section.tables.map((table, index) => {
+                return <ProgramsTable key={index} table={table} />;
+              })}
+            </SectionTableContainer>
+          </SectionContainer>
+        );
+      })}
     </>
   );
 }
diff --git a/src/Components/Programs/Timeline.js b/src/Components/Programs/Timeline.js
index 96a3d527..ee3e979f 100644
--- a/src/Components/Programs/Timeline.js
+++ b/src/Components/Programs/Timeline.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useContext } from 'react';
 import dayjs from 'dayjs';
 import {
   StyleSheet,
@@ -23,6 +23,7 @@ import {
 } from './styles';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 import { getEvents, getMonths } from '../../content/programs_events';
+import { ThemeContext } from '../../Context/ThemeContext';
 //--------------------------------------------------------------------------------------------
 const events = getEvents();
 const months = getMonths();
@@ -34,6 +35,7 @@ const styles = StyleSheet.create({
   },
 });
 function Timeline() {
+  const { colors } = useContext(ThemeContext);
   var p = dayjs().date(); //current date
   var curr_month = dayjs().month(); //current month
   const scrollRef = useRef();
@@ -80,17 +82,23 @@ function Timeline() {
             <View key={index}>
               <Event
                 style={{
-                  color: item.color,
                   borderColor: item.color,
                   flex: 1,
                   left: item.date[0][2] * 10,
                   borderRadius: 50,
                   zIndex: 1,
+                  backgroundColor: colors.cardBackground,
+                  color: colors.text,
                 }}
               >
                 {item.event}
               </Event>
-              <Stroke style={{ width: (item.date[0][1] + 5) * 20 }}></Stroke>
+              <Stroke
+                style={{
+                  width: (item.date[0][1] + 5) * 20,
+                  borderBottomColor: colors.text,
+                }}
+              ></Stroke>
             </View>
           ))}
           <ScrollView
@@ -128,15 +136,20 @@ function Timeline() {
                     style={{
                       left: (item.date[0][1] - 1) * 40,
                       width: (p - item.date[0][1]) * 40 + 20,
+                      backgroundColor: colors.background,
                     }}
                   ></Fade>
                   <Marker
-                    style={{ left: (p - 1) * 40 + 20, zIndex: -1 }}
+                    style={{
+                      left: (p - 1) * 40 + 20,
+                      zIndex: -1,
+                      borderRightColor: colors.text,
+                    }}
                   ></Marker>
                 </View>
               ))}
               <View style={{ left: (p - 1) * 40 + 25 }}>
-                <Text>
+                <Text style={{ color: colors.text }}>
                   Today {dayjs().date()}th {months[curr_month][1]}
                 </Text>
               </View>
@@ -144,7 +157,7 @@ function Timeline() {
                 {months.map((m, index) => (
                   <div key={index}>
                     <Months style={{ left: m[0] * 30 * 40 }}>
-                      <Text>1st {m[1]}</Text>
+                      <Text style={{ color: colors.text }}>1st {m[1]}</Text>
                     </Months>
                   </div>
                 ))}
diff --git a/src/Components/Projects/ProjectCard/index.js b/src/Components/Projects/ProjectCard/index.js
index 52d583fc..4585f4b6 100644
--- a/src/Components/Projects/ProjectCard/index.js
+++ b/src/Components/Projects/ProjectCard/index.js
@@ -4,8 +4,14 @@ import ScaledImage from './../../ScaledImage';
 import { withCard } from './../../../Decorators/Card';
 import ProjectCardBadge from './ProjectCardBadge';
 import Contributing from './../../Contributors';
+import { ThemeContext } from '../../../Context/ThemeContext';
 
 const ProjectCard = ({ props, isOver }) => {
+  const { colors, theme } = React.useContext(ThemeContext);
+  const imageSource =
+    props.image.source ||
+    (theme === 'dark' ? props.image.dark : props.image.light);
+
   return (
     <View
       style={{
@@ -13,15 +19,18 @@ const ProjectCard = ({ props, isOver }) => {
         width: 286,
         borderRadius: 4,
         overflow: 'hidden',
+        backgroundColor: colors.cardBackground,
       }}
     >
-      <ScaledImage width={286} source={props.image.source} />
-      <Text style={styles.title}>{props.title}</Text>
+      <ScaledImage width={286} source={imageSource} />
+      <Text style={[styles.title, { color: colors.text }]}>{props.title}</Text>
       {props.badges.map((badge, index) => (
         <ProjectCardBadge {...badge} key={index} /> //index can be used as unique key here
       ))}
 
-      <Text style={styles.description}>{props.description}</Text>
+      <Text style={[styles.description, { color: colors.text }]}>
+        {props.description}
+      </Text>
       <View
         style={{
           flex: 1,
diff --git a/src/Components/Projects/Sponsors/Section/index.js b/src/Components/Projects/Sponsors/Section/index.js
index aeea943f..ee2c0338 100644
--- a/src/Components/Projects/Sponsors/Section/index.js
+++ b/src/Components/Projects/Sponsors/Section/index.js
@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import { ThemeContext } from '../../../../Context/ThemeContext';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import SponsorsContent from './../SponsorsContent';
 import SectionSubheader from './../../../SectionSubheader';
 
 function Section({ header, content, index, expandable }) {
+  const { colors } = useContext(ThemeContext);
   const [sponsorsSizes] = useState([]);
   const [showMore, setShowMore] = useState(false);
 
@@ -34,7 +36,11 @@ function Section({ header, content, index, expandable }) {
             setShowMore(!showMore);
           }}
         >
-          {setShowMore && <Text style={styles.moreText}>{showMoreText}</Text>}
+          {setShowMore && (
+            <Text style={[styles.moreText, { color: colors.text }]}>
+              {showMoreText}
+            </Text>
+          )}
         </TouchableOpacity>
       )}
     </View>
diff --git a/src/Components/Projects/index.js b/src/Components/Projects/index.js
index 39b22c6b..0e6ef8f3 100644
--- a/src/Components/Projects/index.js
+++ b/src/Components/Projects/index.js
@@ -5,8 +5,10 @@ import { View } from 'react-native';
 import ImageTextSection from './../ImageTextSection';
 import { getProjects } from './../../content/projects_content';
 import ProjectCard from './ProjectCard';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function Projects(props) {
+  const { theme } = React.useContext(ThemeContext);
   const projects = getProjects();
   return (
     <View
@@ -22,7 +24,9 @@ function Projects(props) {
           <ImageTextSection
             title={project?.title}
             content={project?.content}
-            image={project?.image?.source}
+            image={
+              theme === 'dark' ? project?.image?.dark : project?.image?.light
+            }
             imageSide="right"
           />
           <View
@@ -35,7 +39,7 @@ function Projects(props) {
               <ProjectCard
                 key={card.title}
                 props={card}
-                backgroundColor="#e7edfd"
+                backgroundColor={theme === 'dark' ? '#1d1d1dff' : '#e7edfd'}
                 padding={12}
               />
             ))}
diff --git a/src/Components/SectionHeader/index.js b/src/Components/SectionHeader/index.js
index 17931ebe..9cf9543c 100644
--- a/src/Components/SectionHeader/index.js
+++ b/src/Components/SectionHeader/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function SectionHeader({ title, index }) {
+  const { colors } = useContext(ThemeContext);
   return (
     <View style={styles.container} key={title + index}>
-      <Text style={styles.header}>{title}</Text>
+      <Text style={[styles.header, { color: colors.text }]}>{title}</Text>
     </View>
   );
 }
diff --git a/src/Components/SectionSubheader/index.js b/src/Components/SectionSubheader/index.js
index 4169ee77..2362d631 100644
--- a/src/Components/SectionSubheader/index.js
+++ b/src/Components/SectionSubheader/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
+import { ThemeContext } from '../../Context/ThemeContext';
 
 function SectionSubheader({ title }) {
+  const { colors } = useContext(ThemeContext);
   return (
     <View style={styles.container}>
-      <Text style={styles.header}>{title}</Text>
+      <Text style={[styles.header, { color: colors.text }]}>{title}</Text>
     </View>
   );
 }
diff --git a/src/Context/ThemeContext.js b/src/Context/ThemeContext.js
new file mode 100644
index 00000000..09c9fbcb
--- /dev/null
+++ b/src/Context/ThemeContext.js
@@ -0,0 +1,55 @@
+import React, { createContext, useState } from 'react';
+
+export const ThemeContext = createContext();
+
+export const themeColors = {
+  light: {
+    background: '#FFFFFF',
+    text: '#103b81ff',
+    cardBackground: '#FFFFFF',
+    headerBorder: '#FF0000',
+    footerBackground: '#231B4E',
+    footerText: '#FFFFFF',
+    buttonBackground: '#54BCEB',
+    logoText: '#000000',
+    menuTextBorder: 'powderblue',
+    iconColor: '#103b81ff',
+  },
+  dark: {
+    background: '#151515ff',
+    text: '#E0E0E0',
+    cardBackground: '#1E1E1E',
+    headerBorder: '#ffffffff',
+    footerBackground: '#0D0D15',
+    footerText: '#E0E0E0',
+    buttonBackground: '#54BCEB',
+    logoText: '#FFFFFF',
+    menuTextBorder: 'powderblue',
+    iconColor: '#FFFFFF',
+  },
+};
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    if (
+      typeof window !== 'undefined' &&
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return 'dark';
+    }
+    return 'light';
+  });
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  const colors = themeColors[theme];
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, colors }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
diff --git a/src/assets/logo_dark.png b/src/assets/logo_dark.png
new file mode 100644
index 00000000..e003c7b5
Binary files /dev/null and b/src/assets/logo_dark.png differ
diff --git a/src/assets/placeholder_dark.png b/src/assets/placeholder_dark.png
new file mode 100644
index 00000000..2ecd17a1
Binary files /dev/null and b/src/assets/placeholder_dark.png differ
diff --git a/src/content/projects_content.js b/src/content/projects_content.js
index 3f89307c..5cd34bfd 100644
--- a/src/content/projects_content.js
+++ b/src/content/projects_content.js
@@ -3,7 +3,8 @@ const projects = {
     {
       title: 'Projects',
       image: {
-        source: require('./../assets/projects/our-projects.png'),
+        light: require('./../assets/projects/our-projects.png'),
+        dark: require('./../assets/projects/our-projects.png'),
       },
       content: [
         {
@@ -13,7 +14,8 @@ const projects = {
       cards: [
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Mentorship Android',
           description:
@@ -45,7 +47,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Mentorship Backend',
           description:
@@ -77,7 +80,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'AnitaB.org Open Source Website',
           description:
@@ -104,7 +108,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Bridge-In-Tech Web',
           description:
@@ -131,7 +136,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Bridge-In-Tech Backend',
           description:
@@ -158,7 +164,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'AnitaB-forms Web',
           description:
@@ -190,7 +197,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'AnitaB-forms Backend',
           description:
@@ -217,7 +225,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Stem Diverse TV',
           description:
@@ -249,7 +258,8 @@ const projects = {
 
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Stem Diverse TV CMS',
           description:
@@ -278,7 +288,8 @@ const projects = {
     {
       title: 'Archived Projects',
       image: {
-        source: require('./../assets/projects/our-projects.png'),
+        light: require('./../assets/projects/our-projects.png'),
+        dark: require('./../assets/projects/our-projects.png'),
       },
       content: [
         {
@@ -288,7 +299,8 @@ const projects = {
       cards: [
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Mentorship iOS',
           description:
@@ -314,7 +326,8 @@ const projects = {
         },
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'VMS',
           description:
@@ -337,9 +350,11 @@ const projects = {
           ],
           contributors_url:
             'https://api.github.com/repos/anitab-org/vms/contributors',
-        }, {
+        },
+        {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Portal',
           description:
@@ -365,7 +380,8 @@ const projects = {
         },
         {
           image: {
-            source: require('./../assets/placeholder.png'),
+            light: require('./../assets/placeholder.png'),
+            dark: require('./../assets/placeholder_dark.png'),
           },
           title: 'Mentorship Flutter',
           description:
@@ -389,10 +405,8 @@ const projects = {
           contributors_url:
             'https://api.github.com/repos/anitab-org/mentorship-flutter/contributors',
         },
-
-
       ],
-    }
+    },
   ],
 };
 
diff --git a/src/index.js b/src/index.js
index c5e7441a..24426279 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { ThemeProvider } from './Context/ThemeContext';
 
 ReactDOM.render(
   // <React.StrictMode>
-  <App styles={{ width: '100%' }} />,
+  <ThemeProvider>
+    <App styles={{ width: '100%' }} />
+  </ThemeProvider>,
   // </React.StrictMode>,
   document.getElementById('root')
 );
diff --git a/src/setupTests.js b/src/setupTests.js
index 74b1a275..ccdb85b6 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -3,3 +3,17 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
diff --git a/src/test/AboutUs.test.js b/src/test/AboutUs.test.js
index cf9fa10b..b1dd0b92 100644
--- a/src/test/AboutUs.test.js
+++ b/src/test/AboutUs.test.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import AboutUs from './../Components/AboutUs';
+import { ThemeProvider } from '../Context/ThemeContext';
 
 it('should take a snapshot', () => {
-  const { asFragment } = render(<AboutUs />);
+  const { asFragment } = render(
+    <ThemeProvider>
+      <AboutUs />
+    </ThemeProvider>
+  );
 
-  expect(asFragment(<AboutUs />)).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/src/test/Contribute.test.js b/src/test/Contribute.test.js
index 70e5ba75..71f3610e 100644
--- a/src/test/Contribute.test.js
+++ b/src/test/Contribute.test.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Contribute from './../Components/Contribute';
+import { ThemeProvider } from '../Context/ThemeContext';
 
 it('should take a snapshot', () => {
-  const { asFragment } = render(<Contribute />);
+  const { asFragment } = render(
+    <ThemeProvider>
+      <Contribute />
+    </ThemeProvider>
+  );
 
-  expect(asFragment(<Contribute />)).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/src/test/Home.test.js b/src/test/Home.test.js
index 328b852c..97de8afe 100644
--- a/src/test/Home.test.js
+++ b/src/test/Home.test.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Home from './../Components/Home';
+import { ThemeProvider } from '../Context/ThemeContext';
 
 it('should take a snapshot', () => {
-  const { asFragment } = render(<Home />);
+  const { asFragment } = render(
+    <ThemeProvider>
+      <Home />
+    </ThemeProvider>
+  );
 
-  expect(asFragment(<Home />)).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/src/test/OurEvents.test.js b/src/test/OurEvents.test.js
index eaf599db..2bb41c11 100644
--- a/src/test/OurEvents.test.js
+++ b/src/test/OurEvents.test.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import OurEvents from './../Components/OurEvents';
+import { ThemeProvider } from '../Context/ThemeContext';
 
 it('should take a snapshot', () => {
-  const { asFragment } = render(<OurEvents />);
+  const { asFragment } = render(
+    <ThemeProvider>
+      <OurEvents />
+    </ThemeProvider>
+  );
 
-  expect(asFragment(<OurEvents />)).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/src/test/Projects.test.js b/src/test/Projects.test.js
index 93cdf159..53d9e46b 100644
--- a/src/test/Projects.test.js
+++ b/src/test/Projects.test.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Projects from './../Components/Projects';
+import { ThemeProvider } from '../Context/ThemeContext';
 
 it('should take a snapshot', () => {
-  const { asFragment } = render(<Projects />);
+  const { asFragment } = render(
+    <ThemeProvider>
+      <Projects />
+    </ThemeProvider>
+  );
 
-  expect(asFragment(<Projects />)).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/src/test/__snapshots__/AboutUs.test.js.snap b/src/test/__snapshots__/AboutUs.test.js.snap
index c7ed9c9b..c3351598 100644
--- a/src/test/__snapshots__/AboutUs.test.js.snap
+++ b/src/test/__snapshots__/AboutUs.test.js.snap
@@ -60,7 +60,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   <span
@@ -122,7 +122,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   <span
@@ -147,7 +147,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   Moreover, 
@@ -199,7 +199,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   <span
@@ -245,7 +245,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   Learn more about us at: 
@@ -333,7 +333,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   Women transform technology. Technology transforms the world. Join us at Zulip - 
diff --git a/src/test/__snapshots__/Contribute.test.js.snap b/src/test/__snapshots__/Contribute.test.js.snap
index c59e1177..e5c5a34b 100644
--- a/src/test/__snapshots__/Contribute.test.js.snap
+++ b/src/test/__snapshots__/Contribute.test.js.snap
@@ -59,7 +59,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; margin-top: 26px; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   Contributing to open source for the first time can be a little scary and overwhelming. 
@@ -85,7 +85,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; margin-top: 26px; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   <span
@@ -131,7 +131,7 @@ exports[`should take a snapshot 1`] = `
                 style="font-size: 18px; font-weight: 200; margin-top: 26px; text-align: left;"
               >
                 <span
-                  class="css-text-901oao css-textHasAncestor-16my406"
+                  class="css-text-901oao css-textHasAncestor-16my406 r-color-1qovj5m"
                   dir="auto"
                 >
                   Here are some list of contributions to any of the 
diff --git a/src/test/__snapshots__/Projects.test.js.snap b/src/test/__snapshots__/Projects.test.js.snap
index a87f016f..f6156ff5 100644
--- a/src/test/__snapshots__/Projects.test.js.snap
+++ b/src/test/__snapshots__/Projects.test.js.snap
@@ -60,7 +60,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -236,7 +236,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -412,7 +412,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -551,7 +551,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -690,7 +690,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -829,7 +829,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1005,7 +1005,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1144,7 +1144,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1320,7 +1320,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1508,7 +1508,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1647,7 +1647,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1786,7 +1786,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
@@ -1925,7 +1925,7 @@ exports[`should take a snapshot 1`] = `
         >
           <div
             class="css-view-1dbjc4n r-flex-13awgt0 r-overflow-1udh08x"
-            style="border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
+            style="background-color: rgb(255, 255, 255); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; width: 286px;"
           >
             <a>
               <div
diff --git a/yarn.lock b/yarn.lock
index fef258ce..84f26458 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1677,6 +1677,11 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
   integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==
 
+"@theme-toggles/react@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@theme-toggles/react/-/react-4.1.0.tgz#8b20055749f93bee3d6e4b6bbfaa2d5573caa18a"
+  integrity sha512-h3SuJMsej8DfelHt5fjNIlaMfJOK52Vku4pPDVoHaTwjAcoTr4fn8hzeur2oiqWBYFYfKugvv1RdQaBFXaiPKg==
+
 "@types/aria-query@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"