fix: implement better dark mode styles

src/components/JobLocation/JobFilters/components/AccordionItem/AccordionItem.module.scss

@@ -14,6 +14,14 @@
 .chevron {
   @include transition($transition-base-short);
 
+  @include light {
+    color: var(--mantine-color-gray-9);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-5);
+  }
+
   &[data-rotate] {
     transform: rotate(-180deg);
   }
@@ -22,3 +30,13 @@
 .item {
   padding-bottom: var(--mantine-spacing-lg);
 }
+
+.title {
+  @include light {
+    color: var(--mantine-color-gray-9);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-5);
+  }
+}

src/components/JobLocation/JobFilters/components/AccordionItem/AccordionItem.tsx

@@ -15,7 +15,7 @@ export function AccordionItem({children, _key, title}: AccordionItemProps) {
       <OriginalAccordion.Control
         classNames={{control: styles.control, chevron: styles.chevron}}
       >
-        <Title order={4} variant='text'>
+        <Title className={styles.title} order={4} variant='text'>
           {title}
         </Title>
       </OriginalAccordion.Control>

src/components/JobLocation/JobLocationHeader/JobLocationHeader.module.scss

@@ -4,7 +4,14 @@
   left: 0;
   right: 0;
 
-  background-color: var(--mantine-color-white);
+  @include light {
+    background-color: var(--mantine-color-white);
+  }
+
+  @include dark {
+    background-color: var(--mantine-color-gray-8);
+  }
+
   z-index: var(--mantine-z-index-popover);
 
   @include smaller-than($mantine-breakpoint-md) {
@@ -37,13 +44,26 @@
   }
 }
 .navbarItem {
-  color: var(--mantine-color-gray-6);
+  @include light {
+    color: var(--mantine-color-gray-6);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-5);
+  }
+
   cursor: pointer;
   font-weight: 500;
 }
 
 .active {
-  color: var(--mantine-color-black);
+  @include light {
+    color: var(--mantine-color-black);
+  }
+  @include dark {
+    color: var(--mantine-color-white);
+  }
+
   position: relative;
 
   &:before {
@@ -57,6 +77,7 @@
 
     top: calc(-1 * var(--mantine-spacing-lg) - rem(7px));
     background-color: var(--mantine-color-indigo-6);
+
     @include border-bottom-radius();
   }
 }
@@ -65,19 +86,45 @@
   box-sizing: border-box;
 
   cursor: pointer;
-  border: 1px solid var(--mantine-color-gray-4);
+  border-width: 1px;
+  border-style: solid;
+
+  @include light {
+    border-color: var(--mantine-color-gray-4);
+  }
+
+  @include dark {
+    border-color: var(--mantine-color-gray-6);
+  }
+
   @include border-radius(var(--mantine-radius-md));
   padding: calc(var(--mantine-spacing-xs) / 3);
   margin-left: auto;
 }
 
 .notificationsTarget {
   stroke-width: 1;
-  color: var(--mantine-color-blue-4);
+
+  @include light {
+    color: var(--mantine-color-blue-4);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-4);
+  }
+
   padding: rem(1px);
 }
+
 .separator {
-  color: var(--mantine-color-gray-4);
+  @include light {
+    color: var(--mantine-color-gray-4);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-3);
+  }
+
   transform: rotate(90deg);
 }
 

src/components/JobLocation/JobSortMenu/JobSortMenu.module.scss

@@ -1,9 +1,21 @@
 .action {
-  color: var(--mantine-color-gray-7);
+  @include light {
+    color: var(--mantine-color-gray-7);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-5);
+  }
 }
 
 .value {
-  color: var(--mantine-color-black);
+  @include light {
+    color: var(--mantine-color-black);
+  }
+
+  @include dark {
+    color: var(--mantine-color-gray-5);
+  }
   font-weight: 500;
 }
 

src/components/JobLocation/JobsCard/JobCard.module.scss

@@ -7,14 +7,14 @@
   @include transition();
   @include border-radius(var(--mantine-radius-sm));
 
+  color: var(--mantine-color-gray-5);
+
   @include light {
-    color: var(--mantine-color-gray-5);
     background: var(--mantine-color-gray-0);
   }
 
   @include dark {
-    color: var(--mantine-color-gray-5);
-    background: var(--mantine-color-gray-8);
+    background: var(--mantine-color-gray-7);
   }
 
   @include hover {
@@ -101,7 +101,14 @@
 }
 
 .card {
-  background-color: var(--mantine-color-white);
+  @include light {
+    background-color: var(--mantine-color-white);
+  }
+
+  @include dark {
+    background-color: var(--mantine-color-gray-8);
+  }
+
   padding: var(--mantine-spacing-xl);
 
   @include border-radius(var(--mantine-radius-md));

src/components/JobLocation/JobsSidebar/JobsSiderbar.module.scss

@@ -1,5 +1,11 @@
 .sidebar {
-  background-color: var(--mantine-color-white);
+  @include light {
+    background-color: var(--mantine-color-white);
+  }
+
+  @include dark {
+    background-color: var(--mantine-color-gray-8);
+  }
   padding: var(--mantine-spacing-xl) var(--mantine-spacing-sm);
   position: absolute;
   @include border-end-radius(var(--mantine-radius-xl));

src/components/common/providers.tsx

@@ -1,5 +1,5 @@
 import '@mantine/core/styles.css'
-import '@/lib/styles/global.css'
+import '@/lib/styles/global.scss'
 
 import {MantineProvider} from '@mantine/core'
 import type {ReactNode} from 'react'

src/lib/styles/global.scss

@@ -0,0 +1,18 @@
+body {
+  @include light {
+    background: var(--mantine-color-gray-0);
+  }
+
+  @include dark {
+    background: var(--mantine-color-gray-9);
+  }
+}
+
+* {
+  user-select: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}