fixup! fixup! fixup! fixup! Add dark mode

Git-it-App · Apr 22, 2024 · 84ab619 · 84ab619
1 parent 1ff0f28
commit 84ab619
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 52 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -9,8 +9,8 @@ body {
   font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif;
   font-size: 1.1em;
   line-height: 1.8em;
-  color: var(--grey_darker);
-  background-color: var(--white);
+  color: var(--text);
+  background-color: var(--app-background);
   margin: 0;
 }
 
@@ -32,7 +32,7 @@ div, header, select, a {
 }
 
 a {
-  color: var(--blue);
+  color: var(--main-blue);
   text-decoration: none;
 
   &:hover {
@@ -175,8 +175,8 @@ code {
 }
 
 .box--border--blue code {
-  background-color: var(--blue_lightest);
-  color: var(--blue_grey);
+  background-color: var(--solidbox-background);
+  color: var(--solidbox-text);
 }
 .box--solid--light code {
   background-color: var(--white_darkest);
@@ -207,8 +207,8 @@ code {
 
     &--light {
       @extend .box--solid;
-      background-color: var(--blue_lightest);
-      color: var(--blue_grey);
+      background-color: var(--solidbox-background);
+      color: var(--solidbox-text);
     }
   }
 
@@ -242,7 +242,7 @@ code {
       border-color: var(--blue_lighter);
 
       &:before {
-        color: var(--blue);
+        color: var(--main-blue);
       }
     }
 
@@ -263,13 +263,13 @@ code {
 .verify {
   &__box {
     @extend .box--solid;
-    background-color: var(--blue);
+    background-color: var(--main-blue);
     color: white;
   }
 
   &__button {
     background-color: white;
-    color: var(--blue);
+    color: var(--main-blue);
     border-radius: 2px;
 
     &:hover {
@@ -325,8 +325,8 @@ code {
   display: flex;
   justify-content: center;
   font-size: 20px;
-  background-color: var(--white_dark);
-  border-bottom: 1px solid var(--white_darkest);
+  background-color: var(--header);
+  border-bottom: 1px solid var(--background-separator);
 
   &__lang {
     height: 36px;
@@ -337,27 +337,15 @@ code {
       height: 100%;
       width: 100%;
       padding: 5px 10px;
-      border: 1px solid var(--blue_light);
+      background-color: var(--header);
+      border: 1px solid var(--main-blue--light);
       border-radius: 3px;
-      color: var(--blue);
-      background: none;
-      appearance: none;
+      color: var(--main-blue);
 
       &:focus {
-        outline-color: var(--blue_light);
+        outline-color: var(--main-blue--light);
       }
     }
-
-    // Dropdown arrow
-    &:after {
-      content: "";
-      border: 5px solid transparent;
-      border-top-color: var(--grey_light);
-      position: relative;
-      right: 20px;
-      top: 18.5px;
-      pointer-events: none;
-    }
   }
 
   &__text {
@@ -419,7 +407,7 @@ code {
       .status-dot {
         width: 10px;
         height: 10px;
-        background-color: var(--blue);
+        background-color: var(--main-blue);
         vertical-align: middle;
         position: relative;
         top: -1px;
@@ -462,7 +450,7 @@ code {
     .octicon__reply {
       width: 16px;
       height: 16px;
-      background-color: var(--blue);
+      background-color: var(--main-blue);
       display: block;
     }
 
@@ -482,13 +470,13 @@ code {
 .pgIndex {
   &__progress {
     margin: 20px 0;
-    color: var(--blue);
+    color: var(--main-blue);
     user-select: none;
     display: flex;
     line-height: 1.3em;
 
     &__box {
-      border: 1px solid var(--blue);
+      border: 1px solid var(--main-blue);
       padding: 10px 14px;
       display: inline;
 
@@ -516,7 +504,7 @@ code {
         @extend .pgIndex__progress__box;
         border-radius: 0 2px 2px 0;
         margin-left: -1px;
-        border-color: var(--blue_light);
+        border-color: var(--main-blue--light);
         cursor: pointer;
 
         [class~="rtl"] & {
@@ -528,14 +516,14 @@ code {
         .octicon__trash {
           width: 18px;
           height: 18px;
-          background-color: var(--blue_light);
+          background-color: var(--main-blue--light);
           vertical-align: middle;
         }
 
         &:hover {
-          border-color: var(--blue);
+          border-color: var(--main-blue);
           .octicon__trash {
-            background-color: var(--blue);
+            background-color: var(--main-blue);
           }
         }
       }
@@ -544,7 +532,7 @@ code {
     &__dot {
       width: 10px;
       height: 10px;
-      background-color: var(--blue);
+      background-color: var(--main-blue);
 
       &.complete {
         // Replace with octicon__dotFill
@@ -565,11 +553,11 @@ code {
       margin: 9px 0;
       font-size: .8em;
       border-radius: 2px;
-      color: white;
+      color: var(--main-blue__text);
 
       &--primary {
         @extend .pgIndex__section__btn;
-        background: var(--blue);
+        background: var(--main-blue);
 
         &:hover {
           background: var(--blue_dark);

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -4,31 +4,40 @@
  */
 
 :root {
-  --blue: #0087ff;
   --blue-hover: #4babff;
   --blue_light: #88ccff;
   --blue_light-hover: #66bdff;
   --blue_lighter: #badfff;
-  --blue_lightest: #eaf6ff;
+//  --blue_lightest: #eaf6ff;
   --blue_dark: #007ae6;
-  --blue_grey: #4f6375;
+//  --blue_grey: #4f6375;
+
 
   --grey_darker: #5a5a5a;
-  //--grey_dark: #808080;
   --grey: #999999;
   --grey_light: #a6a6a6;
 
   --white_darkest: #e0e0e0;
   --white_darker: #f0f0f0;
-  --white_dark: #fafafa;
-  --white: #ffffff;
+//  --white_dark: #fafafa;
   --white-hover: #cce7ff;
+
+  --app-background: #ffffff;
+  --header: #fafafa;
+  --background-separator: #e0e0e0;
+  --text: #5a5a5a;
+
+  --main-blue: #0087ff;
+  --main-blue--light: #88ccff;
+  --main-blue__text: #ffffff;
+
+  --solidbox-background: #eaf6ff;
+  --solidbox-text: #4f6375;
 }
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   :root {
-//    --blue: #0087ff;
 //    --blue-hover: #4babff;
 //    --blue_light: #88ccff;
 //    --blue_light-hover: #66bdff;
@@ -37,15 +46,26 @@
 //    --blue_dark: #007ae6;
 //    --blue_grey: #4f6375;
 
-//    --grey_darker: #5a5a5a;
-    //--grey_dark: #808080;
+
+//    --grey_darker: #cfcfcf;
 //    --grey: #999999;
 //    --grey_light: #a6a6a6;
 
-    --white_darkest: #303030;
-    --white_darker: #252526;
-    --white_dark: #202022;
-    --white: #1b1b1d;
+//    --white_darkest: #303030;
+//    --white_darker: #252526;
+//    --white_dark: #202022;
 //    --white-hover: #cce7ff;
+
+    --app-background: #1b1b1d;
+    --header: #191919;
+    --background-separator: #282C36;
+    --text: #c0c0c0;
+
+    --main-blue: #0064bd;
+    --main-blue--light: #003564;
+    --main-blue__text: #cfcfcf;
+
+    --solidbox-background: #282C36;
+    --solidbox-text: var(--text);
   }
 }