At70 dark mode

src/App.tsx

@@ -16,12 +16,14 @@ import VacancyDetail from './pages/VacancyDetail';
 import { MarkdownEditor } from './pages/MarkdownEditor';
 import { AuthContextProvider } from './Context/AuthContext';
 import { UserContextProvider } from './Context/UserContext';
+import { ThemeContextProvider } from './Context/ThemeContext';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 export const App = () => {
   const queryClient = new QueryClient();
   return (
     <Router>
+     <ThemeContextProvider>
       <QueryClientProvider client={queryClient}>
         <AuthContextProvider>
           <UserContextProvider>
@@ -57,6 +59,7 @@ export const App = () => {
           </UserContextProvider>
         </AuthContextProvider>
       </QueryClientProvider>
+     </ThemeContextProvider>
     </Router>
   );
 };

src/Context/ThemeContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, useEffect, useState } from "react";
+
+export type ThemeContextProps = {
+  theme: string;
+  setTheme: (userAccount: string) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextProps>({} as ThemeContextProps);
+
+export const ThemeContextProvider: React.FC = (props) => {
+  const handleInitialState = () => {
+    const themeState = localStorage.getItem("theme");
+    if (themeState) {
+      return themeState;
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'theme--dark';
+    } else {
+      return 'theme--light';
+    }
+  };
+
+  const [theme, setTheme] = useState(handleInitialState());
+
+  const handleSystemState = () => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setTheme(`theme--${newTheme}`);
+    });
+  };
+
+  useEffect(() => {
+    handleSystemState();
+  }, []);
+
+  const providerValue = {
+    theme,
+    setTheme
+  };
+
+  return (
+    <ThemeContext.Provider value={providerValue}>
+      <div className={theme}>
+        {props.children}
+      </div>
+    </ThemeContext.Provider>
+  );
+};

src/assets/css/base/_main.scss

@@ -1,5 +1,6 @@
 body {
-  background-color: $color-07;
+  // background-color: $color-07;
+  // background-color: red;
 }
 
 .main {
@@ -15,12 +16,26 @@ body {
   background-repeat: no-repeat;
   margin-top: 60px;
 
+  @include themify($themes) {
+    background-color: themed(elevation0);
+  }
+
   @include for-size(1200px) {
     margin-left: 300px;
     margin-top: 0;
   }
 }
 
+.main-nav {
+  @include themify($themes) {
+    background-color: themed(elevation2);
+  }
+
+  @include themify($themes) {
+    border-right: 2px solid themed(border);
+  }
+}
+
 .link {
   color: inherit;
   text-decoration: none;

src/assets/css/components/_LearnToNavigate.scss

@@ -18,10 +18,18 @@
       font-family: $font-family-headings;
       color: $color-koios-dark-grey;
       margin-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
     &__description {
       margin-bottom: $spacing-2x;
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     .links {

src/assets/css/components/_LevelCards.scss

@@ -21,10 +21,18 @@
       font-size: 24px;
       padding-bottom: $spacing-2x;
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__description {
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
   }
 

src/assets/css/components/_SmallCard.scss

@@ -25,6 +25,10 @@
     margin: $spacing-2x auto;
     max-width: 270px;
 
+    @include themify($themes) {
+      background-color: themed(elevation3);
+    }
+
     @include for-size($tablet) {
       max-width: 230px;
     }
@@ -43,16 +47,28 @@
         width: 50px;
         height: 50px;
         fill: #6D59E6;
+
+        @include themify($themes) {
+          fill: themed(cardiconfill);
+        }
       }
     }
     &__title {
       font-family: $font-family-headings;
       color: $color-koios-dark-grey;
       font-size: 2rem;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__description {
       margin-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__link {
@@ -70,6 +86,10 @@
       font-size: 16px;
       cursor: pointer;
 
+      @include themify($themes) {
+        background-color: themed(pinkButton);
+      }
+
       &:hover {
         background-color: rgba(204, 8, 137, 80%);
       }

src/assets/css/components/_Team.scss

@@ -14,15 +14,27 @@
       color: $color-koios-dark-grey;
       font-size: 32px;
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__subtitle {
       font-weight: 600;
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__paragraph {
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
   }
 
@@ -55,13 +67,21 @@
         color: $color-koios-dark-grey;
         text-align: center;
         margin-bottom: $spacing-1x;
+
+        @include themify($themes) {
+          color: themed(textColor);
+        }
       }
 
       &__description {
         color: $color-koios-dark-grey;
         font-size: 14px;
         margin-bottom: $spacing-1x;
         flex-grow: 1;
+
+        @include themify($themes) {
+          color: themed(textColor);
+        }
       }
 
       .socials {

src/assets/css/components/_VacancyCard.scss

@@ -5,9 +5,18 @@
   transition: all .25s ease;
   position: relative;
 
+  @include themify($themes) {
+    background-color: themed(elevation2);
+    box-shadow: 0px 0px 21px -10px themed(cardShadow);
+  }
+
   &:hover {
     transform: translateY(-$spacing-2x);
     box-shadow: 0px 0px 21px -10px rgb(110 110 110 / 100%);
+
+    @include themify($themes) {
+      box-shadow: 0px 0px 21px -10px themed(cardShadowActive);
+    }
   }
 
   &__banner {
@@ -28,12 +37,20 @@
       color: $color-koios-dark-grey;
       padding-bottom: $spacing-1x;
       font-weight: 700;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__subtitle {
       color: #bbbbbb;
       font-size: 12px;
       padding-bottom: $spacing-1x;
+
+      @include themify($themes) {
+        color: themed(textColor-1);
+      }
     }
 
     &__description {
@@ -42,6 +59,10 @@
       -webkit-line-clamp: 5;
       -webkit-box-orient: vertical;
       overflow: hidden;
+
+      @include themify($themes) {
+        color: themed(textColor-1);
+      }
     }
   }
 
@@ -59,6 +80,7 @@
       max-height: $spacing-5x;
       object-fit: cover;
       background-color: white;
+      border-radius: 50%;
 
       &:first-child {
         margin-right: $spacing-2x;

src/assets/css/components/_course-card.scss

@@ -10,13 +10,22 @@
     background-color: white;
     text-decoration: none;
 
+    @include themify($themes) {
+      background-color: themed(elevation2);
+      box-shadow: 0px 0px 21px -10px themed(cardShadowActive);
+    }
+
     @include for-size($mobile, $desktop) {
       width: 19em;
     }
 
     &:hover {
       box-shadow: 0px 0px 21px -10px rgba(110, 110, 110, 1);
       transform: translateY(-0.5em);
+
+      @include themify($themes) {
+        box-shadow: 0px 0px 21px -10px themed(cardShadowActive);
+      }
     }
 
     &__img {
@@ -31,7 +40,11 @@
 
     &__title {
       margin: 1rem 0 0.5em;
-      color: $color-koios-dark-grey;
+      // color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     .meta-data {
@@ -49,6 +62,11 @@
         font-weight: bold;
         margin-right: 1em;
 
+        @include themify($themes) {
+          background-color: themed(elevation3);
+          color: themed(textColor);
+        }
+
         &--duration {
           display: flex;
           flex-direction: row;
@@ -59,6 +77,10 @@
             width: 1em;
             height: 1em;
             fill: currentColor;
+
+            @include themify($themes) {
+              fill: themed(textColor);
+            }
           }
         }
       }
@@ -70,7 +92,11 @@
       -webkit-line-clamp: 5;
       -webkit-box-orient: vertical;
       overflow: hidden;
-      color: $color-koios-dark-grey;
+      // color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
 
       @include for-size($desktop) {
         max-height: 6.2em;