feat: implement dark mode toggle #342

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",

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 />

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>

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>
                 );
               })}

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>
   );
 };

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);
         }}

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>

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} />

src/Components/Header/index.js

@@ -1,19 +1,23 @@
 import React from 'react';
+import '@theme-toggles/react/css/Expand.css';
+import { Expand } from '@theme-toggles/react';
 import {
   View,
   Image,
   Text,
   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}

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>
         );

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}>

src/Components/Home/index.js

@@ -6,16 +6,20 @@ 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 (
       <Content key={index}>
         <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>
   );
 }

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,16 +10,17 @@ const ImageTextSection = ({
   imageSide,
   imageHeight = 300,
 }) => {
+  const { colors } = React.useContext(ThemeContext);
   const styles = createStyles(imageSide);
   return (
     <View style={styles.container}>
       <View style={styles.sectionImage}>
         <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>
         ))}