Merge branch 'feat/light-mode' into development

README.md

@@ -14,17 +14,25 @@ yarn start
 open http://localhost:8080
 ```
 
+### Automatic Light Mode
+
+- There is a plugin (`build/plugins/invert-colors.ts`) that inverts the greyscale shades in `style.css` and outputs `inverted-style.css`.
+- This plugin specifically seeks greyscale colors. Any colors with saturation are ignored.
+- Any deliberate use of color (with saturation) should be added in `special.css` to not be processed.
+
 ## Features for End Users
 
 - Login with GitHub to view issues locally
 - Keyboard navigation (up/down arrows and escape/enter key)
 - Sorting
 
-## Screenshots 
+### Screenshots
+
+#### Desktop
 
-### Desktop
 ![screenshot 4](https://github.com/ubiquity/devpool-directory-ui/assets/4975670/77dc4263-3837-47de-9924-e82fb571e8cc)
 ![screenshot 0](https://github.com/ubiquity/devpool-directory-ui/assets/4975670/7cf35a52-ef1d-4b8a-a29e-06e2adab2862)
 
-### Mobile
+#### Mobile
+
 ![screenshot 2](https://github.com/ubiquity/devpool-directory-ui/assets/4975670/b7861ce7-1f1f-49a9-b8e2-ebb20724ee67)

static/style/inverted-style.css

@@ -61,7 +61,7 @@
   #issues-container:hover .issue-element-inner {
     opacity: 0.5;
   }
-  #issues-container.keyboard-selection:hover .issue-element-inner{
+  #issues-container.keyboard-selection:hover .issue-element-inner {
     opacity: 1;
   }
 

static/style/special.css

@@ -1,28 +1,30 @@
+:root {
+  --dark-background: #000410;
+  --dark-background-half: #00041080;
+  --light-background: #f0f0f0;
+  --light-background-half: #f0f0f080;
+}
+
 @media (prefers-color-scheme: dark) {
-  html {
-    background-color: #000410;
+  html,
+  #issues-container > div,
+  .preview {
+    background-color: var(--dark-background);
   }
   #toolbar.ready {
-    background-color: #00041080;
-  }
-  #issues-container > div {
-    background-color: #000410;
-  }
-  .preview {
-    background-color: #000410;
+    background-color: var(--dark-background-half);
   }
 }
+
 @media (prefers-color-scheme: light) {
-  #toolbar.ready {
-    background-color: #f0f0f080;
-  }
   #grid {
     opacity: 0.25;
   }
-  #issues-container > div {
-    background-color: #f0f0f0;
-  }
+  #issues-container > div,
   .preview {
-    background-color: #f0f0f0;
+    background-color: var(--light-background);
+  }
+  #toolbar.ready {
+    background-color: var(--light-background-half);
   }
 }

static/style/style.css

@@ -61,7 +61,7 @@
   #issues-container:hover .issue-element-inner {
     opacity: 0.5;
   }
-  #issues-container.keyboard-selection:hover .issue-element-inner{
+  #issues-container.keyboard-selection:hover .issue-element-inner {
     opacity: 1;
   }