Enhancement: fix colors for dark mode

src/App.scss

@@ -27,4 +27,8 @@
 
 .subTitle {
   color: $subTitle;
+
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }

src/_globalColor.scss

@@ -10,17 +10,20 @@ $topButtonHover: #000;
 // text colors light theme
 $titleColor: #000000;
 $textColor: #000000;
-$subTitle: #868e96;
+$subTitle: #666666;
 $cardSubtitle: #666666;
-$talkCardSubTitle: #7f8287;
+$talkCardSubTitle: #666666;
 $blogCardTitleColor: #262626;
 
-// text color dark theme
+// text colors dark theme
 $textColorDark: #ffffff;
+$subTitleDark: #cccccc;
+$cardSubtitleDark: #cccccc;
+$talkCardSubTitleDark: #cccccc;
 
 // toggle switch colors
 $toggleCheck: #2196f3;
-$toggleSwitchSliderBG: #ccc;
+$toggleSwitchSliderBG: #cccccc;
 
 // githubRepo specific colors
 $githubRepoCardLanguageColorBG: #0000ff;
@@ -80,11 +83,13 @@ $appLink: #09d3ac;
 // social media icons
 $faceBook: #3b5998;
 $linkedin: #0e76a8;
-$github: #333;
 $gitlab: #fca326;
 $google: #ea4335;
 $twitter: #1da1f2;
-$medium: #000;
 $stackoverflow: #f48024;
 $instagram: #c13584;
 $kaggle: #20beff;
+$github: #000000;
+$githubDark: #ffffff;
+$medium: #000000;
+$mediumDark: #ffffff;

src/components/achievementCard/AchievementCard.scss

@@ -12,6 +12,9 @@
   font-weight: 700;
   margin: 15px 0 0 0;
 }
+.dark-mode.card-subtitle {
+  color: $cardSubtitleDark;
+}
 .card-subtitle {
   color: $cardSubtitle;
   font-size: 1.063rem;

src/components/blogCard/BlogCard.js

@@ -20,10 +20,10 @@ export default function BlogCard({blog, isDark}) {
           }
           href="#blog"
         >
-          <h3 className={isDark ? "small-dark blog-title" : "blog-title"}>
+          <h3 className={isDark ? "dark-mode blog-title" : "blog-title"}>
             {blog.title}
           </h3>
-          <p className={isDark ? "small-dark small" : "small"}>
+          <p className={isDark ? "small dark-mode" : "small"}>
             {blog.description}
           </p>
           <div className="go-corner">

src/components/blogCard/BlogCard.scss

@@ -1,9 +1,5 @@
 @import "../../_globalColor";
 
-.small-dark {
-  color: $textColorDark !important;
-}
-
 .blog-container {
   border-radius: 10px;
   color: $blogCardContainerColor;
@@ -39,6 +35,10 @@
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   margin: 0px;
+
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }
 
 .go-corner {

src/components/educationCard/EducationCard.js

@@ -5,17 +5,17 @@ import StyleContext from "../../contexts/StyleContext";
 
 export default function EducationCard({school}) {
   const imgRef = createRef();
+  const {isDark} = useContext(StyleContext);
 
   const GetDescBullets = ({descBullets}) => {
     return descBullets
       ? descBullets.map((item, i) => (
-          <li key={i} className="subTitle">
+          <li key={i} className={(isDark ? "dark-mode " : "") + "subTitle"}>
             {item}
           </li>
         ))
       : null;
   };
-  const {isDark} = useContext(StyleContext);
 
   if (!school.logo)
     console.error(`Image of ${school.name} is missing in education section`);

src/components/experienceCard/ExperienceCard.scss

@@ -101,15 +101,22 @@
   line-height: normal;
 }
 .dark-mode-text {
-  color: $textColorDark !important;
+  color: $textColorDark;
+}
+.subTitle.dark-mode-text {
+  color: $subTitleDark;
 }
 .experience-text-date {
   text-align: center;
-  color: $textColor;
   font-size: 20px;
   margin: 0px;
   padding-top: 1rem;
   font-weight: 600;
+  color: $textColor;
+
+  &.dark-mode-text {
+    color: $textColorDark;
+  }
 }
 
 .experience-text-desc {

src/components/footer/Footer.scss

@@ -6,7 +6,7 @@
 }
 
 .dark-mode {
-  color: $textColorDark !important;
+  color: $subTitleDark !important;
 }
 
 .footer-div {

src/components/githubProfileCard/GithubProfileCard.js

@@ -1,24 +1,22 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./GithubProfileCard.scss";
 import SocialMedia from "../../components/socialMedia/SocialMedia";
 import {contactInfo, isHireable} from "../../portfolio";
 import emoji from "react-easy-emoji";
 import {Fade} from "react-reveal";
+import StyleContext from "../../contexts/StyleContext";
 
 export default function GithubProfileCard({prof}) {
-  if (isHireable) {
-    prof.hireable = "Yes";
-  } else {
-    prof.hireable = "No";
-  }
+  prof.hireable = isHireable ? "Yes" : "No";
+  const {isDark} = useContext(StyleContext);
   return (
     <Fade bottom duration={1000} distance="20px">
       <div className="main" id="contact">
         <h1 className="prof-title">Reach Out to me!</h1>
         <div className="row">
           <div className="main-content-profile">
             <div className="blog-header">
-              <p className="subTitle blog-subtitle">{contactInfo.subtitle}</p>
+              <p className={(isDark ? "dark-mode " : "") + "subTitle blog-subtitle"}>{contactInfo.subtitle}</p>
             </div>
             <h2 className="bio-text">"{emoji(String(prof.bio))}"</h2>
             {prof.location !== null && (

src/components/githubProfileCard/GithubProfileCard.scss

@@ -54,10 +54,6 @@
   font-size: 19px;
 }
 
-.subTitle {
-  color: $subTitle;
-}
-
 @media (max-width: 768px) {
   .row {
     display: flex;

src/components/githubRepoCard/GithubRepoCard.scss

@@ -83,6 +83,10 @@
 }
 .dark-card-mode p {
   color: $textColorDark;
+
+  &.repo-description {
+    color: $subTitleDark;
+  }
 }
 
 .dark-card-mode .repo-svg {

src/components/header/Header.scss

@@ -38,6 +38,14 @@
   color: $subTitle;
 }
 
+.dark-menu .grey-color {
+  color: $subTitleDark;
+}
+
+.dark-mode .grey-color {
+  color: $subTitleDark;
+}
+
 .header li a {
   display: block;
   padding: 15px 20px;
@@ -63,8 +71,8 @@
 .header .logo-name {
   font-family: "Agustina Regular";
   font-weight: bold;
-  font-variant-ligatures: no-common-ligatures;
   -webkit-font-variant-ligatures: no-common-ligatures;
+  font-variant-ligatures: no-common-ligatures;
   padding: 0 10px;
 }
 
@@ -80,10 +88,11 @@
 
 .header .menu-icon {
   cursor: pointer;
-  display: inline-block;
+  display: block;
   float: right;
   padding: 28px 20px;
   position: relative;
+  -webkit-user-select: none;
   user-select: none;
 }
 

src/components/socialMedia/SocialMedia.scss

@@ -72,16 +72,57 @@
 .twitter i:hover,
 .google i:hover,
 .gitlab i:hover,
-.github i:hover,
 .linkedin i:hover,
 .facebook i:hover,
 .instagram i:hover,
 .stack-overflow i:hover,
-.kaggle i:hover,
-.medium i:hover {
+.kaggle i:hover {
   background-color: $textColor;
 }
 
+.fa-github {
+  background-color: $github;
+  color: $githubDark;
+}
+
+.fa-github:hover {
+  background-color: $githubDark;
+  color: $github;
+}
+
+.fa-medium {
+  background-color: $medium;
+  color: $mediumDark;
+}
+
+.fa-medium:hover {
+  background-color: $mediumDark;
+  color: $medium;
+}
+
+.dark-mode {
+
+  .fa-github {
+    background-color: $githubDark;
+    color: $github;
+  }
+
+  .fa-github:hover {
+    background-color: $github;
+    color: $githubDark;
+  }
+
+  .fa-medium {
+    background-color: $mediumDark;
+    color: $medium;
+  }
+
+  .fa-medium:hover {
+    background-color: $medium;
+    color: $mediumDark;
+  }
+}
+
 /* Media Query */
 @media (max-width: 768px) {
   .social-media-div {

src/components/softwareSkills/SoftwareSkill.js

@@ -1,8 +1,10 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./SoftwareSkill.scss";
 import {skillsSection} from "../../portfolio";
+import StyleContext from "../../contexts/StyleContext";
 
 export default function SoftwareSkill() {
+  const {isDark} = useContext(StyleContext);
   return (
     <div>
       <div className="software-skills-main-div">
@@ -11,7 +13,7 @@ export default function SoftwareSkill() {
             return (
               <li
                 key={i}
-                className="software-skill-inline"
+                className={"software-skill-inline" + (isDark ? " dark-mode" : "")}
                 name={skills.skillName}
               >
                 <i className={skills.fontAwesomeClassname}></i>

src/components/softwareSkills/SoftwareSkill.scss

@@ -13,19 +13,21 @@
   display: inline-block;
   margin-right: 20px;
   margin-bottom: 20px;
+  color: $subTitle;
+
+  &.dark-mode {
+    color: $subTitleDark;
+  }
 }
 
-.software-skill-inline > i {
-  color: $subTitle;
+.software-skill-inline > p {
+  font-size: 10px;
 }
 
 .software-skill-inline > i:hover {
   color: $skillsColor;
 }
-.software-skill-inline > p {
-  color: $subTitle;
-  font-size: 10px;
-}
+
 .software-skill-inline > i:hover ~ p {
   color: $skillsColor;
 }

src/components/talkCard/TalkCard.js

@@ -12,7 +12,7 @@ export default function TalkCard({talkDetails}) {
         >
           <div className="diagonal-fill"></div>
           <div className="talk-card-title">{talkDetails.title}</div>
-          <p className="talk-card-subtitle">{talkDetails.subtitle}</p>
+          <p className={"talk-card-subtitle" + (talkDetails.isDark ? " dark-mode" : "")}>{talkDetails.subtitle}</p>
 
           <div className="card-footer-button-div">
             <a href={talkDetails.slides_url} target="_" className="talk-button">

src/components/talkCard/TalkCard.scss

@@ -49,12 +49,16 @@
   padding-left: 30px;
   padding-right: 30px;
   font-size: 16px;
-  color: $talkCardSubTitle;
   line-height: 18px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  color: $talkCardSubTitle;
+
+  &.dark-mode {
+    color: $talkCardSubTitleDark;
+  }
 }
 .talk-button {
   background-color: $buttonColor;

src/containers/achievement/Achievement.scss

@@ -11,9 +11,6 @@
   margin: 0px;
   margin-bottom: 50px;
 }
-.subTitle {
-  color: $subTitle;
-}
 
 /* Media Query */
 @media (max-width: 1380px) {