Dark mode support

src/components/Sidebar.tsx

@@ -13,7 +13,6 @@ import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import CloseIcon from '@material-ui/icons/Close';
 import IconButton from '@material-ui/core/IconButton';
-import FacilityDialog from './FacilityDialog';
 
 class Sidebar extends React.Component<SidebarProps> {
 

src/styles/components/appBar.scss

@@ -3,6 +3,10 @@
 .app-bar {
   background-color: white !important;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #424242 !important;
+  }
 }
 
 .app-bar-logo {
@@ -13,6 +17,10 @@
 
 .app-bar-text-color {
   color: #354052;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .app-bar-logo-name, .app-bar-right-section {

src/styles/components/favoriteButton.scss

@@ -28,8 +28,11 @@
 @media screen and (min-width: map-get($breakpoints, lg)) {
   .favorite-button-heart-hover {
     color: grey;
-  }
 
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
+  }
 }
 
 //Under lg
@@ -41,6 +44,10 @@
 
     color: grey;
 
+    @media (prefers-color-scheme: dark) {
+      color: white;
+    }
+
     height: 24px * $favorite-button-sm-scale !important;
     width: 24px * $favorite-button-sm-scale !important;
     padding: 5px * $favorite-button-sm-scale !important;

src/styles/components/mobileAppBar.scss

 .mobile-app-bar {
     background-color: white !important;
+
+    @media (prefers-color-scheme: dark) {
+        background-color: #424242 !important;
+    }
 }
\ No newline at end of file

src/styles/components/sidebar.scss

@@ -55,11 +55,16 @@
 .sidebar-avatar {
   width: 100px !important;
   height: 100px !important;
-  border-radius: 0 !important;
+
+  background-color: white;
+  border-radius: 50% !important;
 
   & > img {
+    width: 90px;
+    height: 90px;
     object-fit: contain !important;
     border-radius: 0 !important;
+    margin: 5px !important;
   }
 }
 

src/styles/components/textwTitle.scss

@@ -4,6 +4,10 @@
   line-height: 24px;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
+
+  @media (prefers-color-scheme: dark) {
+    color: white
+  }
 }
 
 .text-w-title-content {
@@ -13,4 +17,8 @@
   font-weight: 400;
   color: rgba(0, 0, 0, 0.87);
   width: 100%;
+
+  @media (prefers-color-scheme: dark) {
+    color: white
+  }
 }
\ No newline at end of file

src/styles/containers/alertContainer.scss

 .alert-container-btn {
   color: rgba(0, 0, 0, 0.4) !important;
+
+  @media (prefers-color-scheme: dark) {
+    color: white !important;
+  }
 }
 
 .alert-container-popover {

src/styles/containers/facilityCard.scss

@@ -12,6 +12,10 @@
   .fc-root:hover {
     .favorite-button-heart {
         color: grey;
+
+        @media (prefers-color-scheme: dark) {
+          color: white;
+        }
     }
   }
 }
@@ -46,6 +50,7 @@
   border-radius: 50%;
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12);
   overflow: hidden;
+  background-color: white;
 }
 
 .fc-logo {

src/styles/containers/searchBar.scss

@@ -22,6 +22,10 @@
 .search-bar-search-icon, .search-bar-arrow-icon {
   display: block;
   color: rgba(0, 0, 0, 0.54);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
 }
 
 .search-bar-arrow-icon {
@@ -48,7 +52,6 @@
 @media screen and (min-width: map-get($breakpoints, lg)) {
   .search-bar-paper-background {
     &.search-bar-focus {
-      background-color: rgba(255, 255, 255, 1) !important;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
       border: 1px solid rgba(0, 0, 0, 0.15);
     }
@@ -67,7 +70,6 @@
 
 @media screen and (max-width: map-get($breakpoints, lg) - 1px) {
   .search-bar-paper-background {
-    background-color: rgba(255, 255, 255, 1) !important;
     width: auto !important;
 
     &.search-bar-mobile-open {

src/styles/whatsOpen.scss

@@ -29,6 +29,10 @@ body {
     padding: 0;
     font-family: "Roboto", "-apple-system", "Helvetica", "Arial", sans-serif;
     background-color: #f1f2f6;
+
+    @media (prefers-color-scheme: dark) {
+        background-color: #303030;
+    }
 }
 
 body > #root {

src/theme.ts

@@ -10,29 +10,25 @@ export const themeTypography: TypographyOptions = {
         fontSize: 16,
         fontWeight: 400,
         fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
-        lineHeight: '24px',
-        color: 'rgba(0, 0, 0, 0.87)'
+        lineHeight: '24px'
     },
     body2: {
         fontSize: 14,
         fontWeight: 500,
         fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
-        lineHeight: '24px',
-        color: 'rgba(0, 0, 0, 0.87)'
+        lineHeight: '24px'
     },
     body1: {
         fontSize: 14,
         fontWeight: 400,
         fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
-        lineHeight: '20px',
-        color: 'rgba(0, 0, 0, 0.87)'
+        lineHeight: '20px'
     },
     caption: {
         fontSize: 12,
         fontWeight: 400,
         fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
-        lineHeight: 1,
-        color: 'rgba(0, 0, 0, 0.54)'
+        lineHeight: 1
     },
     button: {
         fontSize: 14,