Move dark variables and match pattern

Author: JHWelch

src/ui/css/diff2html.css

@@ -30,15 +30,46 @@
   --d2h-del-highlight-bg-color: #ffb6ba;
   --d2h-del-label-color: #c33;
 
-  --d2h-change-label-color: #d0b44c;
-
   --d2h-change-del-color: #fdf2d0;
   --d2h-change-ins-color: #ded;
 
   --d2h-info-bg-color: #f8fafd;
   --d2h-info-border-color: #d5e4f2;
 
+  --d2h-change-label-color: #d0b44c;
   --d2h-moved-label-color: #3572b0;
+
+  /**
+   * Dark Color Scheme
+   */
+
+  --d2h-dark-color: #d0d0d0;
+  --d2h-dark-bg-color: #272822;
+  --d2h-dark-border-color: #494b40;
+
+  --d2h-dark-line-border-color: #5a5c51;
+
+  --d2h-dark-empty-placeholder-bg-color: #494b40;
+  --d2h-dark-empty-placeholder-border-color: #66695a;
+
+  --d2h-dark-ins-bg-color: #0f4a07;
+  --d2h-dark-ins-border-color: #219f1f;
+  --d2h-dark-ins-highlight-bg-color: #177016;
+  --d2h-dark-ins-label-color: #4f9f4f;
+
+  --d2h-dark-del-bg-color: #604243;
+  --d2h-dark-del-border-color: #a07c7e;
+  --d2h-dark-del-highlight-bg-color: #905a5c;
+  --d2h-dark-del-label-color: #ca4f54;
+
+  --d2h-dark-change-del-color: #9b7707;
+  --d2h-dark-change-ins-color: #366b36;
+
+  --d2h-dark-info-bg-color: #32342c;
+  --d2h-dark-info-color: #929292;
+
+  --d2h-dark-change-label-color: #d0b44c;
+  --d2h-dark-moved-label-color: #3572b0;
 }
 
 .d2h-wrapper {
@@ -422,34 +453,7 @@
 /**
  * Dark Mode Colors
  */
-:root {
-  --d2h-dark-color: #d0d0d0;
-  --d2h-dark-bg-color: #272822;
-  --d2h-dark-border-color: #494b40;
-  --d2h-dark-ligher-border: #66695a;
-
-  --d2h-dark-del-bg-color: #604243;
-  --d2h-dark-del-highlight-bg-color: #905a5c;
-  --d2h-dark-del-border-color: #a07c7e;
-  --d2h-dark-del-label-color: #ca4f54;
-
-  --d2h-dark-ins-bg-color: #0f4a07;
-  --d2h-dark-ins-highlight-bg-color: #177016;
-  --d2h-dark-ins-border-color: #219f1f;
-  --d2h-dark-ins-label-color: #4f9f4f;
-
-  --d2h-dark-info-bg-color: #32342c;
-  --d2h-dark-info-color: #929292;
-
-  --d2h-dark-change-del-color: #9b7707;
-  --d2h-dark-change-ins-color: #366b36;
-  --d2h-dark-change-label-color: #d0b44c;
-
-  --d2h-dark-moved-label-color: #3572b0;
-}
-
-.d2h-dark-color-scheme .d2h-files-diff,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+.d2h-dark-color-scheme .d2h-files-diff {
   background-color: var(--d2h-dark-bg-color);
   color: var(--d2h-dark-color);
 }
@@ -499,14 +503,14 @@
 
 .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
 .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-  background-color: var(--d2h-dark-border-color);
-  border-color: var(--d2h-dark-ligher-border);
+  background-color: var(--d2h-dark-empty-placeholder-bg-color);
+  border-color: var(--d2h-dark-empty-placeholder-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-linenumber {
   background-color: var(--d2h-dark-bg-color);
   color: var(--d2h-dark-color);
-  border-color: var(--d2h-dark-border-color);
+  border-color: var(--d2h-line-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-del {
@@ -589,8 +593,7 @@
  * Auto Mode Colors
  */
 @media (prefers-color-scheme: dark) {
-  .d2h-auto-color-scheme .d2h-files-diff,
-  .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+  .d2h-auto-color-scheme .d2h-files-diff {
     background-color: var(--d2h-dark-bg-color);
     color: var(--d2h-dark-color);
   }
@@ -635,13 +638,13 @@
   .d2h-auto-color-scheme .d2h-code-side-linenumber {
     background-color: var(--d2h-dark-bg-color);
     color: var(--d2h-dark-color);
-    border-color: var(--d2h-dark-border-color);
+    border-color: var(--d2h-line-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
   .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-    background-color: var(--d2h-dark-border-color);
-    border-color: var(--d2h-dark-ligher-border);
+    background-color: var(--d2h-dark-empty-placeholder-bg-color);
+    border-color: var(--d2h-dark-empty-placeholder-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-code-linenumber {