Merge pull request #54 from ecss-soton/committee-appearance-fix

added dark mode
ecss-soton · Sep 4, 2024 · fc71404 · fc71404
2 parents 0bd9247 + 28ac3f0
commit fc71404
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/app/_components/CommitteeItem/index.module.scss b/src/app/_components/CommitteeItem/index.module.scss
@@ -21,7 +21,7 @@
 
 .rectangle {
     position: relative;
-    background-color: #f2f2f2;
+    background-color: var(--theme-elevation-50);
     border-radius: 37px;
     height: 100%;
     width: 80%;
@@ -81,7 +81,6 @@
 .title {
     width: 100%;
     height: 100%;
-    color: #000;
     text-align: center;
     line-height: 104%;
     margin: 0px;
@@ -112,7 +111,6 @@
 }
 
 .lastName {
-    color: #000000;
     font-weight: 400;
     letter-spacing: 0;
     font-size: max(2.3vw, 25px);
@@ -132,7 +130,7 @@
 }
 
 .role {
-  color: #727272;
+  color: var(--theme-elevation-550);
   font-style: normal;
   font-weight: 400;
   line-height: 104%; /* 20.8px */
@@ -207,8 +205,8 @@
   object-fit: cover;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
-  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.25);
-  background-color: #ffffff;
+  box-shadow: 0px 0px 17px 1px var(--theme-shadow);
+  background-color: var(--theme-elevation-0);
 }
 
 .placeholder {

diff --git a/src/app/_css/colors.scss b/src/app/_css/colors.scss
@@ -83,6 +83,9 @@
   --color-error-850: rgb(77, 33, 35);
   --color-error-900: rgb(51, 22, 24);
   --color-error-950: rgb(25, 11, 12);
+
+  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-spotlight: rgba(255,255,255,0.25);
 }
 
 
diff --git a/src/app/_css/theme.scss b/src/app/_css/theme.scss
@@ -115,6 +115,8 @@
       }
     }
   }
+
+  --theme-shadow: var(--color-shadow);
 }
 
 [data-theme=dark] {
@@ -234,4 +236,6 @@
       }
     }
   }
+
+  --theme-shadow: var(--color-spotlight);
 }