Dark Mode Requested Changes Done

c2siorg · Nov 18, 2024 · 6d0df56 · 6d0df56
1 parent 5263b31
commit 6d0df56
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 30 deletions.
diff --git a/webiu-ui/src/app/components/projects-card/projects-card.component.scss b/webiu-ui/src/app/components/projects-card/projects-card.component.scss
@@ -71,7 +71,7 @@
           gap: 8px;
           color: var(--primary-dark, var(--primary-dark, #0a0a15));
           border-radius: 4px;
-          border: 1px solid var(--Gray-5, #e0e0e0);
+          border: 1px solid var(--card-button-border);
           background: var(--card-button-bg);
 
           p {
@@ -104,7 +104,7 @@
           border-radius: 4px;
           color: var(--primary-dark, var(--primary-dark, #0a0a15));
 
-          border: 1px solid var(--Gray-5, #e0e0e0);
+          border: 1px solid var(--card-button-border);
           background: var(--card-button-bg);
 
           span {
@@ -158,10 +158,14 @@
       align-items: center;
       gap: 10px;
       border-radius: 28px;
-      border: 1px solid var(--Gray-5, #e0e0e0);
-      background: var(--primary-white, #fff);
+      border: 1px solid var(--card-drop-button-border);
+      background: var(--card-drop-button-bg);
       box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
+
+      svg path {
+        fill: var(--card-drop-button-svg);
+      }
     }
 
     .projects__card__open__btn.rotate-90 {
@@ -190,8 +194,9 @@
 
       .projects__card__tag {
         font-size: 12px;
-        border: 2px solid rgba(0, 0, 0, 0.1);
-        background-color: #f6f6f6;
+        border: 2px solid var(--card-drop-tag-border);
+        background-color: var(--card-drop-tag-bg);
+        color:var(--card-color-p);
         // box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
         padding: 4px 6px;
         border-radius: 20px;

diff --git a/webiu-ui/src/styles.scss b/webiu-ui/src/styles.scss
@@ -28,6 +28,12 @@ body {
   --card-span: #dddddd;
   --card-button-bg: var(--Gray-6, #f2f2f2);
   --card-color-p:#0a0a15;
+  --card-button-border:#e0e0e0;
+  --card-drop-button-border:#e0e0e0;
+  --card-drop-button-bg:#fff;
+  --card-drop-button-svg:black;
+  --card-drop-tag-border:rgba(0, 0, 0, 0.1);
+  --card-drop-tag-bg:#f6f6f6;
   --publications-card-bg: #fff;
   --publications-card-color: #333;
   --publications-card-border: #fff;
@@ -67,42 +73,48 @@ body {
   --spacing: 16px;
 }
 [data-theme="dark"]{
-  background-color: #181a1b;
+  background-color: #0A0A15;
   --primary-dark: #fff;
   --card-dark-2: #dcdcdc; 
   --font-light: #b3b3b3;  
   --font-color-dark: #e0e0e0;
-  --cards-container:#1f2223;
-  --card-container-2: var(--native-dark-bg-color);
-  --card-button-bg: var(--Gray-6, #1f2223);
+  --cards-container: #1B1B28;
+  --card-container-2: #11111E;
+  --card-button-bg: #1B1B28;
   --native-dark-border-color: #555555;
-  --border-color: #393d40;
-  --card-color-p: #cecac3;
-  --card-span: var(--native-dark-border-color);
-  --publications-card-bg: #181a1b;
-  --publications-card-border: #181a1b;
+  --border-color: #282A3B;
+  --card-color-p: #ffffff;
+  --card-span: #11111E;
+  --card-button-border:#282A3B;
+  --card-drop-button-border:#FFFFFF33;
+  --card-drop-button-bg:#1B1B28;
+  --card-drop-button-svg:#fff;
+  --card-drop-tag-border:#282A3B;
+  --card-drop-tag-bg:#1B1B28;
+  --publications-card-bg: #1B1B28;
+  --publications-card-border: #282A3B;
   --publications-card-border-link:#8db2e5;
-  --search-bg: #1e2021;
-  --search-border: #373c3e;
+  --search-bg: #1B1B28;
+  --search-border: #282A3B;
   --search-color: #d8d4cf;
-  --select-border: #3a3e41;
-  --select-bg:#1e2021;
+  --select-border: #282A3B;
+  --select-bg:#1B1B28;
   --filter-section-color:#e8e6e3;
-  --profile-box-border:#393d40; 
-  --profile-box-bg:#2e3234;
-  --profile-github-bg:#222526;
+  --profile-box-border:#282A3B; 
+  --profile-box-bg:#1B1B28;
+  --profile-github-bg:#219653;
   --profile-github-username:white;
-  --profile-github-box-shadow:#212425;
+  --profile-github-box-shadow:#292c4949;
   --pagination-span:#e8e6e3;
-  --community-card-bg:#1f2223;
-  --community-card-border:#393d40;
+  --community-card-bg:#1B1B28;
+  --community-card-border:#282A3B;
   --font-color-list: #e8e6e3;
   --font-color-p:var(--font-color-light);
-  --gsoc-project-list-bg:#1f2223;
-  --gsoc-project-list-bg-2:#181a1b;
-  --gsoc-project-list-border:#303436;
-  --gsoc-project-list-box-shadow:#2e3234;
-  --navbar-bg:#1f2223;
+  --gsoc-project-list-bg:#1B1B28;
+  --gsoc-project-list-bg-2:#11111E;
+  --gsoc-project-list-border:#282A3B;
+  --gsoc-project-list-box-shadow:#292c4949;
+  --navbar-bg:#11111E;
   --navbar-p:var(--font-color-light);
   --publications-card-box-shadow:none;
 }