From 5dae945e95a93e1f587c7753785bfed74b40109b Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 11 Sep 2023 22:28:12 -0500
Subject: [PATCH 01/36] Add initial dark mode css classes

---
 src/ui/css/diff2html.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index b0e502a1..112ddc0d 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -381,3 +381,31 @@
 .d2h-moved-tag {
   border: #3572b0 1px solid;
 }
+
+.dark.d2h-files-diff .d2h-code-side-linenumber,
+.dark.d2h-files-diff .d2h-info,
+.dark.d2h-files-diff .d2h-emptyplaceholder,
+.dark.d2h-files-diff .d2h-code-side-emptyplaceholder {
+  background-color: #272822;
+  color: #d0d0d0;
+}
+
+.dark.d2h-files-diff span {
+  color: #d0d0d0;
+}
+
+.dark.d2h-files-diff .d2h-del {
+  background-color: #7d4e50;
+}
+
+.dark.d2h-files-diff del {
+  background-color: #a07c7e;
+}
+
+.dark.d2h-files-diff .d2h-ins {
+  background-color: #748a74;
+}
+
+.dark.d2h-files-diff ins {
+  background-color: #177016;
+}

From ff3a86d393d406e27d1de77483b00c0a9e2d593c Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 10:30:31 -0500
Subject: [PATCH 02/36] Add colorscheme variable to wrapper

---
 src/__tests__/diff2html-tests.ts       | 64 +++++++++++++++++++++++++-
 src/line-by-line-renderer.ts           |  5 +-
 src/render-utils.ts                    | 23 ++++++++-
 src/side-by-side-renderer.ts           |  5 +-
 src/templates/generic-wrapper.mustache |  2 +-
 src/types.ts                           |  6 +++
 6 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index dbf78ab6..7bc16f75 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 
 import { parse, html } from '../diff2html';
-import { DiffFile, LineType, OutputFormatType } from '../types';
+import { ColorSchemeType, DiffFile, LineType, OutputFormatType } from '../types';
 
 const diffExample1 =
   'diff --git a/sample b/sample\n' +
@@ -1258,5 +1258,67 @@ describe('Diff2Html', () => {
       `);
       /* eslint-enable no-irregular-whitespace */
     });
+
+    describe('with dark mode flag', () => {
+      it('should return a html diff with dark mode', () => {
+        const result = html(diffExample1, {
+          drawFileList: false,
+          colorScheme: ColorSchemeType.DARK,
+        });
+        expect(result).toMatchInlineSnapshot(`
+          "<div class="d2h-wrapper dark">
+              <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+              <div class="d2h-file-header">
+              <span class="d2h-file-name-wrapper">
+              <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                  <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+              </svg>    <span class="d2h-file-name">sample</span>
+              <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+          <label class="d2h-file-collapse">
+              <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+              Viewed
+          </label>
+              </div>
+              <div class="d2h-file-diff">
+                  <div class="d2h-code-wrapper">
+                      <table class="d2h-diff-table">
+                          <tbody class="d2h-diff-tbody">
+                          <tr>
+              <td class="d2h-code-linenumber d2h-info"></td>
+              <td class="d2h-info">
+                  <div class="d2h-code-line">@@ -1 +1 @@</div>
+              </td>
+          </tr><tr>
+              <td class="d2h-code-linenumber d2h-del d2h-change">
+                <div class="line-num1">1</div>
+          <div class="line-num2"></div>
+              </td>
+              <td class="d2h-del d2h-change">
+                  <div class="d2h-code-line">
+                      <span class="d2h-code-line-prefix">-</span>
+                      <span class="d2h-code-line-ctn"><del>test</del></span>
+                  </div>
+              </td>
+          </tr><tr>
+              <td class="d2h-code-linenumber d2h-ins d2h-change">
+                <div class="line-num1"></div>
+          <div class="line-num2">1</div>
+              </td>
+              <td class="d2h-ins d2h-change">
+                  <div class="d2h-code-line">
+                      <span class="d2h-code-line-prefix">+</span>
+                      <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                  </div>
+              </td>
+          </tr>
+                          </tbody>
+                      </table>
+                  </div>
+              </div>
+          </div>
+          </div>"
+        `);
+      });
+    });
   });
 });
diff --git a/src/line-by-line-renderer.ts b/src/line-by-line-renderer.ts
index c3a3805f..430d026e 100644
--- a/src/line-by-line-renderer.ts
+++ b/src/line-by-line-renderer.ts
@@ -52,7 +52,10 @@ export default class LineByLineRenderer {
       })
       .join('\n');
 
-    return this.hoganUtils.render(genericTemplatesPath, 'wrapper', { content: diffsHtml });
+    return this.hoganUtils.render(genericTemplatesPath, 'wrapper', {
+      colorScheme: renderUtils.colorSchemeToCss(this.config.colorScheme),
+      content: diffsHtml,
+    });
   }
 
   makeFileDiffHtml(file: DiffFile, diffs: string): string {
diff --git a/src/render-utils.ts b/src/render-utils.ts
index 830628e3..6723c3f6 100644
--- a/src/render-utils.ts
+++ b/src/render-utils.ts
@@ -2,7 +2,15 @@ import * as jsDiff from 'diff';
 
 import { unifyPath, hashCode } from './utils';
 import * as rematch from './rematch';
-import { LineMatchingType, DiffStyleType, LineType, DiffLineParts, DiffFile, DiffFileName } from './types';
+import {
+  ColorSchemeType,
+  DiffFile,
+  DiffFileName,
+  DiffLineParts,
+  DiffStyleType,
+  LineMatchingType,
+  LineType,
+} from './types';
 
 export type CSSLineClass =
   | 'd2h-ins'
@@ -37,6 +45,7 @@ export interface RenderConfig {
   matchWordsThreshold?: number;
   maxLineLengthHighlight?: number;
   diffStyle?: DiffStyleType;
+  colorScheme?: ColorSchemeType;
 }
 
 export const defaultRenderConfig = {
@@ -44,6 +53,7 @@ export const defaultRenderConfig = {
   matchWordsThreshold: 0.25,
   maxLineLengthHighlight: 10000,
   diffStyle: DiffStyleType.WORD,
+  colorScheme: ColorSchemeType.LIGHT,
 };
 
 const separator = '/';
@@ -76,6 +86,17 @@ export function toCSSClass(lineType: LineType): CSSLineClass {
   }
 }
 
+export function colorSchemeToCss(colorScheme: ColorSchemeType): string {
+  switch (colorScheme) {
+    case ColorSchemeType.DARK:
+      return ' dark';
+    case ColorSchemeType.AUTO:
+      return ' auto-color-scheme';
+    default:
+      return '';
+  }
+}
+
 /**
  * Prefix length of the hunk lines in the diff
  */
diff --git a/src/side-by-side-renderer.ts b/src/side-by-side-renderer.ts
index 9a0fb6b9..e63893ae 100644
--- a/src/side-by-side-renderer.ts
+++ b/src/side-by-side-renderer.ts
@@ -52,7 +52,10 @@ export default class SideBySideRenderer {
       })
       .join('\n');
 
-    return this.hoganUtils.render(genericTemplatesPath, 'wrapper', { content: diffsHtml });
+    return this.hoganUtils.render(genericTemplatesPath, 'wrapper', {
+      colorScheme: renderUtils.colorSchemeToCss(this.config.colorScheme),
+      content: diffsHtml,
+    });
   }
 
   makeFileDiffHtml(file: DiffFile, diffs: FileHtml): string {
diff --git a/src/templates/generic-wrapper.mustache b/src/templates/generic-wrapper.mustache
index be5096a5..613723bd 100644
--- a/src/templates/generic-wrapper.mustache
+++ b/src/templates/generic-wrapper.mustache
@@ -1,3 +1,3 @@
-<div class="d2h-wrapper">
+<div class="d2h-wrapper{{colorScheme}}">
     {{{content}}}
 </div>
diff --git a/src/types.ts b/src/types.ts
index ea28b496..d226286b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -91,3 +91,9 @@ export const DiffStyleType: { [_: string]: DiffStyleType } = {
   WORD: 'word',
   CHAR: 'char',
 };
+
+export enum ColorSchemeType {
+  AUTO = 'auto',
+  DARK = 'dark',
+  LIGHT = 'light',
+}

From 4d2505dac879598179da9d0a526a3ee160483522 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 11:13:06 -0500
Subject: [PATCH 03/36] Normalize class names

---
 src/__tests__/diff2html-tests.ts | 2 +-
 src/render-utils.ts              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index 7bc16f75..63f6eacc 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -1266,7 +1266,7 @@ describe('Diff2Html', () => {
           colorScheme: ColorSchemeType.DARK,
         });
         expect(result).toMatchInlineSnapshot(`
-          "<div class="d2h-wrapper dark">
+          "<div class="d2h-wrapper d2h-dark-color-scheme">
               <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
               <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
diff --git a/src/render-utils.ts b/src/render-utils.ts
index 6723c3f6..27095253 100644
--- a/src/render-utils.ts
+++ b/src/render-utils.ts
@@ -89,9 +89,9 @@ export function toCSSClass(lineType: LineType): CSSLineClass {
 export function colorSchemeToCss(colorScheme: ColorSchemeType): string {
   switch (colorScheme) {
     case ColorSchemeType.DARK:
-      return ' dark';
+      return ' d2h-dark-color-scheme';
     case ColorSchemeType.AUTO:
-      return ' auto-color-scheme';
+      return ' d2h-auto-color-scheme';
     default:
       return '';
   }

From 1aafcb201b68e3b50f0475fa19855bc6fcdcd346 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 11:13:46 -0500
Subject: [PATCH 04/36] Add dark mode classes.

---
 src/ui/css/diff2html.css | 166 +++++++++++++++++++++++++++++++++------
 1 file changed, 140 insertions(+), 26 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 112ddc0d..13c6567a 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -9,6 +9,19 @@
   text-align: left;
 }
 
+.d2h-dark-color-scheme .d2h-files-diff,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-info,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder {
+  background-color: #272822;
+  color: #d0d0d0;
+}
+
+.d2h-dark-color-scheme .d2h-wrapper {
+  color: #d0d0d0;
+  background-color: #272822;
+}
+
 .d2h-file-header {
   display: flex;
   height: 35px;
@@ -17,6 +30,13 @@
   background-color: #f7f7f7;
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+.d2h-dark-color-scheme .d2h-file-header {
+  color: #d0d0d0;
+  background-color: #272822;
+  border-bottom: #272822;
+}
+
 .d2h-file-header.d2h-sticky-header {
   position: sticky;
   top: 0;
@@ -40,6 +60,11 @@
   vertical-align: middle;
 }
 
+.d2h-dark-color-scheme .d2h-lines-added {
+  border: 1px solid #7d4e50;
+  color: #177016;
+}
+
 .d2h-lines-deleted {
   text-align: left;
   border: 1px solid #e9aeae;
@@ -50,6 +75,11 @@
   margin-left: 1px;
 }
 
+.d2h-dark-color-scheme .d2h-lines-deleted {
+  border: 1px solid #a07c7e;
+  color: #a07c7e;
+}
+
 .d2h-file-name-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -73,6 +103,10 @@
   margin-bottom: 1em;
 }
 
+.d2h-dark-color-scheme .d2h-file-wrapper {
+  border: 1px solid #272822;
+}
+
 .d2h-file-collapse {
   justify-content: flex-end;
   display: none;
@@ -84,10 +118,18 @@
   padding: 4px 8px;
 }
 
+.d2h-dark-color-scheme .d2h-file-collapse {
+  border: 1px solid #272822;
+}
+
 .d2h-file-collapse.d2h-selected {
   background-color: #c8e1ff;
 }
 
+.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
+  background-color: #272822;
+}
+
 .d2h-file-collapse-input {
   margin: 0 4px 0 0;
 }
@@ -158,6 +200,11 @@
   border-radius: 0.2em;
 }
 
+.d2h-dark-color-scheme .d2h-code-line del,
+.d2h-dark-color-scheme .d2h-code-side-line del {
+  background-color: #7d4e50;
+}
+
 .d2h-code-line ins,
 .d2h-code-side-line ins {
   display: inline-block;
@@ -168,6 +215,11 @@
   text-align: left;
 }
 
+.d2h-dark-color-scheme .d2h-code-line ins,
+.d2h-dark-color-scheme .d2h-code-side-line ins {
+  background-color: #177016;
+}
+
 .d2h-code-line-prefix {
   display: inline;
   background: none;
@@ -208,6 +260,12 @@
   cursor: pointer;
 }
 
+.d2h-dark-color-scheme .d2h-code-linenumber {
+  background-color: #272822;
+  color: #d0d0d0;
+  border-color: #272822;
+}
+
 .d2h-code-linenumber:after {
   content: '\200b';
 }
@@ -229,6 +287,12 @@
   padding: 0 0.5em 0 0.5em;
 }
 
+.d2h-dark-color-scheme .d2h-code-side-linenumber {
+  background-color: #272822;
+  color: #d0d0d0;
+  border-color: #272822;
+}
+
 .d2h-code-side-linenumber:after {
   content: '\200b';
 }
@@ -239,6 +303,12 @@
   border-color: #e1e1e1;
 }
 
+.d2h-dark-color-scheme .d2h-code-side-emptyplaceholder,
+.d2h-dark-color-scheme .d2h-emptyplaceholder {
+  background-color: #272822;
+  border-color: #272822;
+}
+
 .d2h-code-linenumber,
 .d2h-code-side-linenumber,
 .d2h-code-line-prefix,
@@ -260,25 +330,49 @@
   border-color: #e9aeae;
 }
 
+.d2h-dark-color-scheme .d2h-del {
+  background-color: #7d4e50;
+  border-color: #a07c7e;
+}
+
 .d2h-ins {
   background-color: #dfd;
   border-color: #b4e2b4;
 }
 
+.d2h-dark-color-scheme .d2h-ins {
+  background-color: #177016;
+  border-color: #97f295;
+}
+
 .d2h-info {
   background-color: #f8fafd;
   color: rgba(0, 0, 0, 0.3);
   border-color: #d5e4f2;
 }
 
+.d2h-dark-color-scheme .d2h-info {
+  background-color: #272822;
+  color: #d0d0d0;
+  border-color: #272822;
+}
+
 .d2h-file-diff .d2h-del.d2h-change {
   background-color: #fdf2d0;
 }
 
+.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+  background-color: #d0b44c;
+}
+
 .d2h-file-diff .d2h-ins.d2h-change {
   background-color: #ded;
 }
 
+.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+  background-color: #d0b44c;
+}
+
 /*
  * File Summary List
  */
@@ -292,10 +386,18 @@
   color: #3572b0;
 }
 
+.d2h-dark-color-scheme .d2h-file-list-wrapper a {
+  color: #3572b0;
+}
+
 .d2h-file-list-wrapper a:visited {
   color: #3572b0;
 }
 
+.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
+  color: #3572b0;
+}
+
 .d2h-file-list-header {
   text-align: left;
 }
@@ -324,6 +426,10 @@
   margin: 0;
 }
 
+.d2h-dark-color-scheme .d2h-file-list > li {
+  border-bottom: #272822 solid 1px;
+}
+
 .d2h-file-list > li:last-child {
   border-bottom: none;
 }
@@ -344,18 +450,34 @@
   color: #c33;
 }
 
+.d2h-dark-color-scheme .d2h-deleted {
+  color: #a07c7e;
+}
+
 .d2h-added {
   color: #399839;
 }
 
+.d2h-dark-color-scheme .d2h-added {
+  color: #177016;
+}
+
 .d2h-changed {
   color: #d0b44c;
 }
 
+.d2h-dark-color-scheme .d2h-changed {
+  color: #d0b44c;
+}
+
 .d2h-moved {
   color: #3572b0;
 }
 
+.d2h-dark-color-scheme .d2h-moved {
+  color: #3572b0;
+}
+
 .d2h-tag {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -366,46 +488,38 @@
   background-color: #fff;
 }
 
-.d2h-deleted-tag {
-  border: #c33 1px solid;
-}
-
-.d2h-added-tag {
-  border: #399839 1px solid;
+.d2h-dark-color-scheme .d2h-tag {
+  background-color: #272822;
 }
 
-.d2h-changed-tag {
-  border: #d0b44c 1px solid;
+.d2h-deleted-tag {
+  border: #c33 1px solid;
 }
 
-.d2h-moved-tag {
-  border: #3572b0 1px solid;
+.d2h-dark-color-scheme .d2h-deleted-tag {
+  border: #a07c7e 1px solid;
 }
 
-.dark.d2h-files-diff .d2h-code-side-linenumber,
-.dark.d2h-files-diff .d2h-info,
-.dark.d2h-files-diff .d2h-emptyplaceholder,
-.dark.d2h-files-diff .d2h-code-side-emptyplaceholder {
-  background-color: #272822;
-  color: #d0d0d0;
+.d2h-added-tag {
+  border: #399839 1px solid;
 }
 
-.dark.d2h-files-diff span {
-  color: #d0d0d0;
+.d2h-dark-color-scheme .d2h-added-tag {
+  border: #177016 1px solid;
 }
 
-.dark.d2h-files-diff .d2h-del {
-  background-color: #7d4e50;
+.d2h-changed-tag {
+  border: #d0b44c 1px solid;
 }
 
-.dark.d2h-files-diff del {
-  background-color: #a07c7e;
+.d2h-dark-color-scheme .d2h-changed-tag {
+  border: #d0b44c 1px solid;
 }
 
-.dark.d2h-files-diff .d2h-ins {
-  background-color: #748a74;
+.d2h-moved-tag {
+  border: #3572b0 1px solid;
 }
 
-.dark.d2h-files-diff ins {
-  background-color: #177016;
+.d2h-dark-color-scheme .d2h-moved-tag {
+  border: #3572b0 1px solid;
 }

From bd4a84cd3eab3270103ed9de63c71b3693e35d36 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 12:05:16 -0500
Subject: [PATCH 05/36] Update colors

---
 src/ui/css/diff2html.css | 48 ++++++++++++----------------------------
 1 file changed, 14 insertions(+), 34 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 13c6567a..5c9d9a7d 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -10,9 +10,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-files-diff,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-info,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder {
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
   background-color: #272822;
   color: #d0d0d0;
 }
@@ -34,7 +32,7 @@
 .d2h-dark-color-scheme .d2h-file-header {
   color: #d0d0d0;
   background-color: #272822;
-  border-bottom: #272822;
+  border-bottom: #494b40;
 }
 
 .d2h-file-header.d2h-sticky-header {
@@ -60,11 +58,6 @@
   vertical-align: middle;
 }
 
-.d2h-dark-color-scheme .d2h-lines-added {
-  border: 1px solid #7d4e50;
-  color: #177016;
-}
-
 .d2h-lines-deleted {
   text-align: left;
   border: 1px solid #e9aeae;
@@ -75,11 +68,6 @@
   margin-left: 1px;
 }
 
-.d2h-dark-color-scheme .d2h-lines-deleted {
-  border: 1px solid #a07c7e;
-  color: #a07c7e;
-}
-
 .d2h-file-name-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -104,7 +92,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-file-wrapper {
-  border: 1px solid #272822;
+  border: 1px solid #494b40;
 }
 
 .d2h-file-collapse {
@@ -202,7 +190,7 @@
 
 .d2h-dark-color-scheme .d2h-code-line del,
 .d2h-dark-color-scheme .d2h-code-side-line del {
-  background-color: #7d4e50;
+  background-color: #604243;
 }
 
 .d2h-code-line ins,
@@ -217,7 +205,7 @@
 
 .d2h-dark-color-scheme .d2h-code-line ins,
 .d2h-dark-color-scheme .d2h-code-side-line ins {
-  background-color: #177016;
+  background-color: #195219;
 }
 
 .d2h-code-line-prefix {
@@ -290,7 +278,7 @@
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
   background-color: #272822;
   color: #d0d0d0;
-  border-color: #272822;
+  border-color: #494b40;
 }
 
 .d2h-code-side-linenumber:after {
@@ -303,10 +291,10 @@
   border-color: #e1e1e1;
 }
 
-.d2h-dark-color-scheme .d2h-code-side-emptyplaceholder,
-.d2h-dark-color-scheme .d2h-emptyplaceholder {
-  background-color: #272822;
-  border-color: #272822;
+.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+  background-color: #494b40;
+  border-color: #66695a;
 }
 
 .d2h-code-linenumber,
@@ -331,7 +319,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-del {
-  background-color: #7d4e50;
+  background-color: #905a5c;
   border-color: #a07c7e;
 }
 
@@ -342,7 +330,7 @@
 
 .d2h-dark-color-scheme .d2h-ins {
   background-color: #177016;
-  border-color: #97f295;
+  border-color: #219f1f;
 }
 
 .d2h-info {
@@ -352,8 +340,8 @@
 }
 
 .d2h-dark-color-scheme .d2h-info {
-  background-color: #272822;
-  color: #d0d0d0;
+  background-color: #32342c;
+  color: #929292;
   border-color: #272822;
 }
 
@@ -450,18 +438,10 @@
   color: #c33;
 }
 
-.d2h-dark-color-scheme .d2h-deleted {
-  color: #a07c7e;
-}
-
 .d2h-added {
   color: #399839;
 }
 
-.d2h-dark-color-scheme .d2h-added {
-  color: #177016;
-}
-
 .d2h-changed {
   color: #d0b44c;
 }

From 6b420de752c9705d46b24c8159dbd92af39c3be6 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 12:07:44 -0500
Subject: [PATCH 06/36] est auto color scheme

---
 src/__tests__/diff2html-tests.ts | 64 +++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index 63f6eacc..5591a615 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -1259,7 +1259,69 @@ describe('Diff2Html', () => {
       /* eslint-enable no-irregular-whitespace */
     });
 
-    describe('with dark mode flag', () => {
+    describe('with auto colorScheme', () => {
+      it('should return a html diff with dark mode', () => {
+        const result = html(diffExample1, {
+          drawFileList: false,
+          colorScheme: ColorSchemeType.AUTO,
+        });
+        expect(result).toMatchInlineSnapshot(`
+          "<div class="d2h-wrapper d2h-auto-color-scheme">
+              <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+              <div class="d2h-file-header">
+              <span class="d2h-file-name-wrapper">
+              <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                  <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+              </svg>    <span class="d2h-file-name">sample</span>
+              <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+          <label class="d2h-file-collapse">
+              <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+              Viewed
+          </label>
+              </div>
+              <div class="d2h-file-diff">
+                  <div class="d2h-code-wrapper">
+                      <table class="d2h-diff-table">
+                          <tbody class="d2h-diff-tbody">
+                          <tr>
+              <td class="d2h-code-linenumber d2h-info"></td>
+              <td class="d2h-info">
+                  <div class="d2h-code-line">@@ -1 +1 @@</div>
+              </td>
+          </tr><tr>
+              <td class="d2h-code-linenumber d2h-del d2h-change">
+                <div class="line-num1">1</div>
+          <div class="line-num2"></div>
+              </td>
+              <td class="d2h-del d2h-change">
+                  <div class="d2h-code-line">
+                      <span class="d2h-code-line-prefix">-</span>
+                      <span class="d2h-code-line-ctn"><del>test</del></span>
+                  </div>
+              </td>
+          </tr><tr>
+              <td class="d2h-code-linenumber d2h-ins d2h-change">
+                <div class="line-num1"></div>
+          <div class="line-num2">1</div>
+              </td>
+              <td class="d2h-ins d2h-change">
+                  <div class="d2h-code-line">
+                      <span class="d2h-code-line-prefix">+</span>
+                      <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                  </div>
+              </td>
+          </tr>
+                          </tbody>
+                      </table>
+                  </div>
+              </div>
+          </div>
+          </div>"
+        `);
+      });
+    });
+
+    describe('with dark colorScheme', () => {
       it('should return a html diff with dark mode', () => {
         const result = html(diffExample1, {
           drawFileList: false,

From 47000723a9bf724b6de5a082c76fcaa7d1358a0e Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 12:19:04 -0500
Subject: [PATCH 07/36] Consolidate dark classes

---
 src/ui/css/diff2html.css | 235 ++++++++++++++++++++-------------------
 1 file changed, 119 insertions(+), 116 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 5c9d9a7d..1684cd24 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -9,17 +9,6 @@
   text-align: left;
 }
 
-.d2h-dark-color-scheme .d2h-files-diff,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-  background-color: #272822;
-  color: #d0d0d0;
-}
-
-.d2h-dark-color-scheme .d2h-wrapper {
-  color: #d0d0d0;
-  background-color: #272822;
-}
-
 .d2h-file-header {
   display: flex;
   height: 35px;
@@ -29,12 +18,6 @@
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
-.d2h-dark-color-scheme .d2h-file-header {
-  color: #d0d0d0;
-  background-color: #272822;
-  border-bottom: #494b40;
-}
-
 .d2h-file-header.d2h-sticky-header {
   position: sticky;
   top: 0;
@@ -91,10 +74,6 @@
   margin-bottom: 1em;
 }
 
-.d2h-dark-color-scheme .d2h-file-wrapper {
-  border: 1px solid #494b40;
-}
-
 .d2h-file-collapse {
   justify-content: flex-end;
   display: none;
@@ -106,18 +85,10 @@
   padding: 4px 8px;
 }
 
-.d2h-dark-color-scheme .d2h-file-collapse {
-  border: 1px solid #272822;
-}
-
 .d2h-file-collapse.d2h-selected {
   background-color: #c8e1ff;
 }
 
-.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
-  background-color: #272822;
-}
-
 .d2h-file-collapse-input {
   margin: 0 4px 0 0;
 }
@@ -188,11 +159,6 @@
   border-radius: 0.2em;
 }
 
-.d2h-dark-color-scheme .d2h-code-line del,
-.d2h-dark-color-scheme .d2h-code-side-line del {
-  background-color: #604243;
-}
-
 .d2h-code-line ins,
 .d2h-code-side-line ins {
   display: inline-block;
@@ -203,11 +169,6 @@
   text-align: left;
 }
 
-.d2h-dark-color-scheme .d2h-code-line ins,
-.d2h-dark-color-scheme .d2h-code-side-line ins {
-  background-color: #195219;
-}
-
 .d2h-code-line-prefix {
   display: inline;
   background: none;
@@ -248,12 +209,6 @@
   cursor: pointer;
 }
 
-.d2h-dark-color-scheme .d2h-code-linenumber {
-  background-color: #272822;
-  color: #d0d0d0;
-  border-color: #272822;
-}
-
 .d2h-code-linenumber:after {
   content: '\200b';
 }
@@ -275,12 +230,6 @@
   padding: 0 0.5em 0 0.5em;
 }
 
-.d2h-dark-color-scheme .d2h-code-side-linenumber {
-  background-color: #272822;
-  color: #d0d0d0;
-  border-color: #494b40;
-}
-
 .d2h-code-side-linenumber:after {
   content: '\200b';
 }
@@ -291,12 +240,6 @@
   border-color: #e1e1e1;
 }
 
-.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
-.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-  background-color: #494b40;
-  border-color: #66695a;
-}
-
 .d2h-code-linenumber,
 .d2h-code-side-linenumber,
 .d2h-code-line-prefix,
@@ -318,49 +261,25 @@
   border-color: #e9aeae;
 }
 
-.d2h-dark-color-scheme .d2h-del {
-  background-color: #905a5c;
-  border-color: #a07c7e;
-}
-
 .d2h-ins {
   background-color: #dfd;
   border-color: #b4e2b4;
 }
 
-.d2h-dark-color-scheme .d2h-ins {
-  background-color: #177016;
-  border-color: #219f1f;
-}
-
 .d2h-info {
   background-color: #f8fafd;
   color: rgba(0, 0, 0, 0.3);
   border-color: #d5e4f2;
 }
 
-.d2h-dark-color-scheme .d2h-info {
-  background-color: #32342c;
-  color: #929292;
-  border-color: #272822;
-}
-
 .d2h-file-diff .d2h-del.d2h-change {
   background-color: #fdf2d0;
 }
 
-.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
-  background-color: #d0b44c;
-}
-
 .d2h-file-diff .d2h-ins.d2h-change {
   background-color: #ded;
 }
 
-.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
-  background-color: #d0b44c;
-}
-
 /*
  * File Summary List
  */
@@ -374,18 +293,10 @@
   color: #3572b0;
 }
 
-.d2h-dark-color-scheme .d2h-file-list-wrapper a {
-  color: #3572b0;
-}
-
 .d2h-file-list-wrapper a:visited {
   color: #3572b0;
 }
 
-.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
-  color: #3572b0;
-}
-
 .d2h-file-list-header {
   text-align: left;
 }
@@ -414,10 +325,6 @@
   margin: 0;
 }
 
-.d2h-dark-color-scheme .d2h-file-list > li {
-  border-bottom: #272822 solid 1px;
-}
-
 .d2h-file-list > li:last-child {
   border-bottom: none;
 }
@@ -446,18 +353,10 @@
   color: #d0b44c;
 }
 
-.d2h-dark-color-scheme .d2h-changed {
-  color: #d0b44c;
-}
-
 .d2h-moved {
   color: #3572b0;
 }
 
-.d2h-dark-color-scheme .d2h-moved {
-  color: #3572b0;
-}
-
 .d2h-tag {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -468,36 +367,140 @@
   background-color: #fff;
 }
 
-.d2h-dark-color-scheme .d2h-tag {
+.d2h-deleted-tag {
+  border: #c33 1px solid;
+}
+
+.d2h-added-tag {
+  border: #399839 1px solid;
+}
+
+.d2h-changed-tag {
+  border: #d0b44c 1px solid;
+}
+
+.d2h-moved-tag {
+  border: #3572b0 1px solid;
+}
+
+/**
+ * Dark Mode Colors
+ */
+.d2h-dark-color-scheme .d2h-files-diff,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
   background-color: #272822;
+  color: #d0d0d0;
 }
 
-.d2h-deleted-tag {
-  border: #c33 1px solid;
+.d2h-dark-color-scheme .d2h-wrapper {
+  color: #d0d0d0;
+  background-color: #272822;
 }
 
-.d2h-dark-color-scheme .d2h-deleted-tag {
-  border: #a07c7e 1px solid;
+.d2h-dark-color-scheme .d2h-file-header {
+  color: #d0d0d0;
+  background-color: #272822;
+  border-bottom: #494b40;
 }
 
-.d2h-added-tag {
-  border: #399839 1px solid;
+.d2h-dark-color-scheme .d2h-code-line del,
+.d2h-dark-color-scheme .d2h-code-side-line del {
+  background-color: #604243;
 }
 
-.d2h-dark-color-scheme .d2h-added-tag {
-  border: #177016 1px solid;
+.d2h-dark-color-scheme .d2h-code-line ins,
+.d2h-dark-color-scheme .d2h-code-side-line ins {
+  background-color: #195219;
 }
 
-.d2h-changed-tag {
-  border: #d0b44c 1px solid;
+.d2h-dark-color-scheme .d2h-code-side-linenumber {
+  background-color: #272822;
+  color: #d0d0d0;
+  border-color: #494b40;
 }
 
-.d2h-dark-color-scheme .d2h-changed-tag {
-  border: #d0b44c 1px solid;
+.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
+.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+  background-color: #494b40;
+  border-color: #66695a;
 }
 
-.d2h-moved-tag {
-  border: #3572b0 1px solid;
+.d2h-dark-color-scheme .d2h-del {
+  background-color: #905a5c;
+  border-color: #a07c7e;
+}
+
+.d2h-dark-color-scheme .d2h-ins {
+  background-color: #177016;
+  border-color: #219f1f;
+}
+
+.d2h-dark-color-scheme .d2h-info {
+  background-color: #32342c;
+  color: #929292;
+  border-color: #272822;
+}
+
+.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+  background-color: #d0b44c;
+}
+
+.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+  background-color: #d0b44c;
+}
+
+.d2h-dark-color-scheme .d2h-file-wrapper {
+  border: 1px solid #494b40;
+}
+
+.d2h-dark-color-scheme .d2h-file-collapse {
+  border: 1px solid #272822;
+}
+
+.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
+  background-color: #272822;
+}
+
+.d2h-dark-color-scheme .d2h-code-linenumber {
+  background-color: #272822;
+  color: #d0d0d0;
+  border-color: #272822;
+}
+
+.d2h-dark-color-scheme .d2h-file-list-wrapper a {
+  color: #3572b0;
+}
+
+.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
+  color: #3572b0;
+}
+
+.d2h-dark-color-scheme .d2h-file-list > li {
+  border-bottom: #272822 solid 1px;
+}
+
+.d2h-dark-color-scheme .d2h-changed {
+  color: #d0b44c;
+}
+
+.d2h-dark-color-scheme .d2h-moved {
+  color: #3572b0;
+}
+
+.d2h-dark-color-scheme .d2h-tag {
+  background-color: #272822;
+}
+
+.d2h-dark-color-scheme .d2h-deleted-tag {
+  border: #a07c7e 1px solid;
+}
+
+.d2h-dark-color-scheme .d2h-added-tag {
+  border: #177016 1px solid;
+}
+
+.d2h-dark-color-scheme .d2h-changed-tag {
+  border: #d0b44c 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-moved-tag {

From 6ed6a5da884ab6960dda512782b4b4ac87c5a6da Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sat, 16 Sep 2023 12:21:56 -0500
Subject: [PATCH 08/36] Setup Auto color mode

---
 src/ui/css/diff2html.css | 126 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 1684cd24..6e49b1bf 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -506,3 +506,129 @@
 .d2h-dark-color-scheme .d2h-moved-tag {
   border: #3572b0 1px solid;
 }
+
+/**
+ * Auto Mode Colors
+ */
+@media (prefers-color-scheme: dark) {
+  .d2h-auto-color-scheme .d2h-files-diff,
+  .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+    background-color: #272822;
+    color: #d0d0d0;
+  }
+
+  .d2h-auto-color-scheme .d2h-wrapper {
+    color: #d0d0d0;
+    background-color: #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-header {
+    color: #d0d0d0;
+    background-color: #272822;
+    border-bottom: #494b40;
+  }
+
+  .d2h-auto-color-scheme .d2h-code-line del,
+  .d2h-auto-color-scheme .d2h-code-side-line del {
+    background-color: #604243;
+  }
+
+  .d2h-auto-color-scheme .d2h-code-line ins,
+  .d2h-auto-color-scheme .d2h-code-side-line ins {
+    background-color: #195219;
+  }
+
+  .d2h-auto-color-scheme .d2h-code-side-linenumber {
+    background-color: #272822;
+    color: #d0d0d0;
+    border-color: #494b40;
+  }
+
+  .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
+  .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+    background-color: #494b40;
+    border-color: #66695a;
+  }
+
+  .d2h-auto-color-scheme .d2h-del {
+    background-color: #905a5c;
+    border-color: #a07c7e;
+  }
+
+  .d2h-auto-color-scheme .d2h-ins {
+    background-color: #177016;
+    border-color: #219f1f;
+  }
+
+  .d2h-auto-color-scheme .d2h-info {
+    background-color: #32342c;
+    color: #929292;
+    border-color: #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+    background-color: #d0b44c;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+    background-color: #d0b44c;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-wrapper {
+    border: 1px solid #494b40;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-collapse {
+    border: 1px solid #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
+    background-color: #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-code-linenumber {
+    background-color: #272822;
+    color: #d0d0d0;
+    border-color: #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a {
+    color: #3572b0;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list > li {
+    border-bottom: #272822 solid 1px;
+  }
+
+  .d2h-auto-color-scheme .d2h-changed {
+    color: #d0b44c;
+  }
+
+  .d2h-auto-color-scheme .d2h-moved {
+    color: #3572b0;
+  }
+
+  .d2h-auto-color-scheme .d2h-tag {
+    background-color: #272822;
+  }
+
+  .d2h-auto-color-scheme .d2h-deleted-tag {
+    border: #a07c7e 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-added-tag {
+    border: #177016 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-changed-tag {
+    border: #d0b44c 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-moved-tag {
+    border: #3572b0 1px solid;
+  }
+}

From 0b76161d86218b5f8546c4858b5af94002c999bb Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sun, 17 Sep 2023 08:59:05 -0500
Subject: [PATCH 09/36] Use variables for dark mode

---
 src/ui/css/diff2html.css | 177 ++++++++++++++++++++++-----------------
 1 file changed, 99 insertions(+), 78 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 6e49b1bf..ca126a75 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -386,125 +386,146 @@
 /**
  * Dark Mode Colors
  */
+.d2h-wrapper {
+  --d2h-dark-color: #d0d0d0;
+  --d2h-dark-bg-color: #272822;
+  --d2h-dark-border-color: #494b40;
+  --d2h-dark-ligher-border: #66695a;
+
+  --d2h-dark-del-bg-color: #905a5c;
+  --d2h-dark-del-highlight-bg-color: #604243;
+  --d2h-dark-del-border-color: #a07c7e;
+
+  --d2h-dark-ins-bg-color: #177016;
+  --d2h-dark-ins-highlight-bg-color: #0f4a07;
+  --d2h-dark-ins-border-color: #219f1f;
+
+  --d2h-dark-info-bg-color: #32342c;
+  --d2h-dark-info-color: #929292;
+
+  --d2h-dark-change-color: #d0b44c;
+  --d2h-dark-moved-color: #3572b0;
+}
+
 .d2h-dark-color-scheme .d2h-files-diff,
 .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-  background-color: #272822;
-  color: #d0d0d0;
+  background-color: var(--d2h-dark-bg-color);
+  color: var(--d2h-dark-color);
 }
 
 .d2h-dark-color-scheme .d2h-wrapper {
-  color: #d0d0d0;
-  background-color: #272822;
+  color: var(--d2h-dark-color);
+  background-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-header {
-  color: #d0d0d0;
-  background-color: #272822;
-  border-bottom: #494b40;
+  color: var(--d2h-dark-color);
+  background-color: var(--d2h-dark-bg-color);
+  border-bottom: var(--d2h-dark-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-line del,
 .d2h-dark-color-scheme .d2h-code-side-line del {
-  background-color: #604243;
+  background-color: var(--d2h-dark-del-highlight-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-line ins,
 .d2h-dark-color-scheme .d2h-code-side-line ins {
-  background-color: #195219;
+  background-color: var(--d2h-dark-ins-highlight-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
-  background-color: #272822;
-  color: #d0d0d0;
-  border-color: #494b40;
+  background-color: var(--d2h-dark-bg-color);
+  color: var(--d2h-dark-color);
+  border-color: var(--d2h-dark-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
 .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-  background-color: #494b40;
-  border-color: #66695a;
+  background-color: var(--d2h-dark-border-color);
+  border-color: var(--d2h-dark-ligher-border);
 }
 
 .d2h-dark-color-scheme .d2h-del {
-  background-color: #905a5c;
-  border-color: #a07c7e;
+  background-color: var(--d2h-dark-del-bg-color);
+  border-color: var(--d2h-dark-del-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-ins {
-  background-color: #177016;
-  border-color: #219f1f;
+  background-color: var(--d2h-dark-ins-bg-color);
+  border-color: var(--d2h-dark-ins-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-info {
-  background-color: #32342c;
-  color: #929292;
-  border-color: #272822;
+  background-color: var(--d2h-dark-info-bg-color);
+  color: var(--d2h-dark-info-color);
+  border-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
-  background-color: #d0b44c;
+  background-color: var(--d2h-dark-change-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
-  background-color: #d0b44c;
+  background-color: var(--d2h-dark-change-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-wrapper {
-  border: 1px solid #494b40;
+  border: 1px solid var(--d2h-dark-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-collapse {
-  border: 1px solid #272822;
+  border: 1px solid var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
-  background-color: #272822;
+  background-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-linenumber {
-  background-color: #272822;
-  color: #d0d0d0;
-  border-color: #272822;
+  background-color: var(--d2h-dark-bg-color);
+  color: var(--d2h-dark-color);
+  border-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list-wrapper a {
-  color: #3572b0;
+  color: var(--d2h-dark-moved-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
-  color: #3572b0;
+  color: var(--d2h-dark-moved-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list > li {
-  border-bottom: #272822 solid 1px;
+  border-bottom: var(--d2h-dark-bg-color) solid 1px;
 }
 
 .d2h-dark-color-scheme .d2h-changed {
-  color: #d0b44c;
+  color: var(--d2h-dark-change-color);
 }
 
 .d2h-dark-color-scheme .d2h-moved {
-  color: #3572b0;
+  color: var(--d2h-dark-moved-color);
 }
 
 .d2h-dark-color-scheme .d2h-tag {
-  background-color: #272822;
+  background-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-deleted-tag {
-  border: #a07c7e 1px solid;
+  border: var(--d2h-dark-del-border-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-added-tag {
-  border: #177016 1px solid;
+  border: var(--d2h-dark-ins-bg-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-changed-tag {
-  border: #d0b44c 1px solid;
+  border: var(--d2h-dark-change-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-moved-tag {
-  border: #3572b0 1px solid;
+  border: var(--d2h-dark-moved-color) 1px solid;
 }
 
 /**
@@ -513,122 +534,122 @@
 @media (prefers-color-scheme: dark) {
   .d2h-auto-color-scheme .d2h-files-diff,
   .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-    background-color: #272822;
-    color: #d0d0d0;
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
   }
 
   .d2h-auto-color-scheme .d2h-wrapper {
-    color: #d0d0d0;
-    background-color: #272822;
+    color: var(--d2h-dark-color);
+    background-color: var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-header {
-    color: #d0d0d0;
-    background-color: #272822;
-    border-bottom: #494b40;
+    color: var(--d2h-dark-color);
+    background-color: var(--d2h-dark-bg-color);
+    border-bottom: var(--d2h-dark-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-code-line del,
   .d2h-auto-color-scheme .d2h-code-side-line del {
-    background-color: #604243;
+    background-color: var(--d2h-dark-del-highlight-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-code-line ins,
   .d2h-auto-color-scheme .d2h-code-side-line ins {
-    background-color: #195219;
+    background-color: var(--d2h-dark-ins-highlight-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-code-side-linenumber {
-    background-color: #272822;
-    color: #d0d0d0;
-    border-color: #494b40;
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
+    border-color: var(--d2h-dark-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
   .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
-    background-color: #494b40;
-    border-color: #66695a;
+    background-color: var(--d2h-dark-border-color);
+    border-color: var(--d2h-dark-ligher-border);
   }
 
   .d2h-auto-color-scheme .d2h-del {
-    background-color: #905a5c;
-    border-color: #a07c7e;
+    background-color: var(--d2h-dark-del-bg-color);
+    border-color: var(--d2h-dark-del-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-ins {
-    background-color: #177016;
-    border-color: #219f1f;
+    background-color: var(--d2h-dark-ins-bg-color);
+    border-color: var(--d2h-dark-ins-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-info {
-    background-color: #32342c;
-    color: #929292;
-    border-color: #272822;
+    background-color: var(--d2h-dark-info-bg-color);
+    color: var(--d2h-dark-info-color);
+    border-color: var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
-    background-color: #d0b44c;
+    background-color: var(--d2h-dark-change-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
-    background-color: #d0b44c;
+    background-color: var(--d2h-dark-change-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-wrapper {
-    border: 1px solid #494b40;
+    border: 1px solid var(--d2h-dark-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-collapse {
-    border: 1px solid #272822;
+    border: 1px solid var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
-    background-color: #272822;
+    background-color: var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-code-linenumber {
-    background-color: #272822;
-    color: #d0d0d0;
-    border-color: #272822;
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
+    border-color: var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list-wrapper a {
-    color: #3572b0;
+    color: var(--d2h-dark-moved-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
-    color: #3572b0;
+    color: var(--d2h-dark-moved-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list > li {
-    border-bottom: #272822 solid 1px;
+    border-bottom: var(--d2h-dark-bg-color) solid 1px;
   }
 
   .d2h-auto-color-scheme .d2h-changed {
-    color: #d0b44c;
+    color: var(--d2h-dark-change-color);
   }
 
   .d2h-auto-color-scheme .d2h-moved {
-    color: #3572b0;
+    color: var(--d2h-dark-moved-color);
   }
 
   .d2h-auto-color-scheme .d2h-tag {
-    background-color: #272822;
+    background-color: var(--d2h-dark-bg-color);
   }
 
   .d2h-auto-color-scheme .d2h-deleted-tag {
-    border: #a07c7e 1px solid;
+    border: var(--d2h-dark-del-border-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-added-tag {
-    border: #177016 1px solid;
+    border: var(--d2h-dark-ins-bg-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-changed-tag {
-    border: #d0b44c 1px solid;
+    border: var(--d2h-dark-change-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-moved-tag {
-    border: #3572b0 1px solid;
+    border: var(--d2h-dark-moved-color) 1px solid;
   }
 }

From 84a323f0def0521b58c45fecd4599a458030654d Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sun, 17 Sep 2023 08:59:24 -0500
Subject: [PATCH 10/36] Add color scheme to demo page

---
 .../templates/pages/demo/content.handlebars   | 22 ++++++++++++++-----
 website/templates/pages/demo/demo.ts          |  3 +++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/website/templates/pages/demo/content.handlebars b/website/templates/pages/demo/content.handlebars
index 813b9b13..15831955 100644
--- a/website/templates/pages/demo/content.handlebars
+++ b/website/templates/pages/demo/content.handlebars
@@ -33,7 +33,7 @@
     </div>
 
     <div class="columns is-desktop is-multiline">
-      <div class="column is-one-fifth-widescreen">
+      <div class="column is-one-sixth-widescreen">
         <label title="Output format of the HTML, either line by line or side by side">
           <p>Output Format</p>
           <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
@@ -42,14 +42,24 @@
           </select>
         </label>
       </div>
-      <div class="column is-one-fifth-widescreen">
+      <div class="column is-one-sixth-widescreen">
+        <label title="Color scheme to render. Auto uses user preference.">
+          <p>Color Scheme</p>
+          <select class="options-label-value" id="diff-url-options-color-scheme" name="colorScheme">
+            <option value="light" selected>Light</option>
+            <option value="dark">Dark</option>
+            <option value="auto">Auto</option>
+          </select>
+        </label>
+      </div>
+      <div class="column is-one-sixth-widescreen">
         <label title="Show the file list summary before the diff">
           <p>File Summary</p>
           <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList"
             checked />
         </label>
       </div>
-      <div class="column is-one-fifth-widescreen">
+      <div class="column is-one-sixth-widescreen">
         <label title="Level of matching for the comparison algorithm">
           <p>Matching Type</p>
           <select class="options-label-value" id="diff-url-options-matching" name="matching">
@@ -59,14 +69,14 @@
           </select>
         </label>
       </div>
-      <div class="column is-one-fifth-widescreen">
+      <div class="column is-one-sixth-widescreen">
         <label title="Similarity threshold for the matching algorithm">
           <p>Words Threshold</p>
           <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
             name="matchWordsThreshold" value="0.25" step="0.05" min="0" max="1" />
         </label>
       </div>
-      <div class="column is-one-fifth-widescreen">
+      <div class="column is-one-sixth-widescreen">
         <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">
           <p>Max Comparisons</p>
           <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
@@ -134,4 +144,4 @@
       providing better diff support for existing online services.
     </p>
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/website/templates/pages/demo/demo.ts b/website/templates/pages/demo/demo.ts
index 53c70192..76215733 100644
--- a/website/templates/pages/demo/demo.ts
+++ b/website/templates/pages/demo/demo.ts
@@ -200,6 +200,7 @@ type Elements = {
   };
   options: {
     outputFormat: HTMLInputElement;
+    colorScheme: HTMLInputElement;
     matching: HTMLInputElement;
     wordsThreshold: HTMLInputElement;
     matchingMaxComparisons: HTMLInputElement;
@@ -259,6 +260,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     },
     options: {
       outputFormat: getHTMLInputElementById('diff-url-options-output-format'),
+      colorScheme: getHTMLInputElementById('diff-url-options-color-scheme'),
       matching: getHTMLInputElementById('diff-url-options-matching'),
       wordsThreshold: getHTMLInputElementById('diff-url-options-match-words-threshold'),
       matchingMaxComparisons: getHTMLInputElementById('diff-url-options-matching-max-comparisons'),
@@ -272,6 +274,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   // Update HTML inputs from any changes in URL
   config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
+  config.colorScheme && (elements.options.colorScheme.value = config.colorScheme);
   config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
   config.matching && (elements.options.matching.value = config.matching);
   config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());

From 1b0c1a87a2611175044506d4e704d346ffbef917 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Sun, 17 Sep 2023 09:52:58 -0500
Subject: [PATCH 11/36] swap highlight and base

---
 src/ui/css/diff2html.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index ca126a75..66b90e62 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -392,12 +392,12 @@
   --d2h-dark-border-color: #494b40;
   --d2h-dark-ligher-border: #66695a;
 
-  --d2h-dark-del-bg-color: #905a5c;
-  --d2h-dark-del-highlight-bg-color: #604243;
+  --d2h-dark-del-bg-color: #604243;
+  --d2h-dark-del-highlight-bg-color: #905a5c;
   --d2h-dark-del-border-color: #a07c7e;
 
-  --d2h-dark-ins-bg-color: #177016;
-  --d2h-dark-ins-highlight-bg-color: #0f4a07;
+  --d2h-dark-ins-bg-color: #0f4a07;
+  --d2h-dark-ins-highlight-bg-color: #177016;
   --d2h-dark-ins-border-color: #219f1f;
 
   --d2h-dark-info-bg-color: #32342c;

From c22febdbd6977d1ced2f8a6b0b46676eb636afb8 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 18:13:01 -0500
Subject: [PATCH 12/36] Adjust colors for line-by-line

---
 src/ui/css/diff2html.css | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 66b90e62..dca682f3 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -403,8 +403,9 @@
   --d2h-dark-info-bg-color: #32342c;
   --d2h-dark-info-color: #929292;
 
-  --d2h-dark-change-color: #d0b44c;
-  --d2h-dark-moved-color: #3572b0;
+  --d2h-dark-change-color: #796620;
+  --d2h-dark-change-label-color: #d0b44c;
+  --d2h-dark-moved-label-color: #3572b0;
 }
 
 .d2h-dark-color-scheme .d2h-files-diff,
@@ -434,6 +435,12 @@
   background-color: var(--d2h-dark-ins-highlight-bg-color);
 }
 
+.d2h-dark-color-scheme .d2h-diff-tbody {
+  background-color: var(--d2h-dark-bg-color);
+  color: var(--d2h-dark-color);
+  border-color: var(--d2h-dark-border-color);
+}
+
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
   background-color: var(--d2h-dark-bg-color);
   color: var(--d2h-dark-color);
@@ -501,7 +508,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-changed {
-  color: var(--d2h-dark-change-color);
+  color: var(--d2h-dark-change-label-color);
 }
 
 .d2h-dark-color-scheme .d2h-moved {
@@ -521,7 +528,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-changed-tag {
-  border: var(--d2h-dark-change-color) 1px solid;
+  border: var(--d2h-dark-change-label-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-moved-tag {
@@ -559,6 +566,12 @@
     background-color: var(--d2h-dark-ins-highlight-bg-color);
   }
 
+  .d2h-auto-color-scheme .d2h-diff-tbody {
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
+    border-color: var(--d2h-dark-border-color);
+  }
+
   .d2h-auto-color-scheme .d2h-code-side-linenumber {
     background-color: var(--d2h-dark-bg-color);
     color: var(--d2h-dark-color);
@@ -626,7 +639,7 @@
   }
 
   .d2h-auto-color-scheme .d2h-changed {
-    color: var(--d2h-dark-change-color);
+    color: var(--d2h-dark-change-label-color);
   }
 
   .d2h-auto-color-scheme .d2h-moved {
@@ -646,7 +659,7 @@
   }
 
   .d2h-auto-color-scheme .d2h-changed-tag {
-    border: var(--d2h-dark-change-color) 1px solid;
+    border: var(--d2h-dark-change-label-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-moved-tag {

From 58c088977e9878dd43080de45064fcaa9eae549b Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 18:27:08 -0500
Subject: [PATCH 13/36] Fix color preference order

---
 src/ui/css/diff2html.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index dca682f3..1f675eb8 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -453,6 +453,12 @@
   border-color: var(--d2h-dark-ligher-border);
 }
 
+.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);
+}
+
 .d2h-dark-color-scheme .d2h-del {
   background-color: var(--d2h-dark-del-bg-color);
   border-color: var(--d2h-dark-del-border-color);
@@ -466,7 +472,7 @@
 .d2h-dark-color-scheme .d2h-info {
   background-color: var(--d2h-dark-info-bg-color);
   color: var(--d2h-dark-info-color);
-  border-color: var(--d2h-dark-bg-color);
+  border-color: var(--d2h-dark-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
@@ -489,12 +495,6 @@
   background-color: var(--d2h-dark-bg-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-bg-color);
-}
-
 .d2h-dark-color-scheme .d2h-file-list-wrapper a {
   color: var(--d2h-dark-moved-color);
 }
@@ -584,6 +584,12 @@
     border-color: var(--d2h-dark-ligher-border);
   }
 
+  .d2h-auto-color-scheme .d2h-code-linenumber {
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
+    border-color: var(--d2h-dark-border-color);
+  }
+
   .d2h-auto-color-scheme .d2h-del {
     background-color: var(--d2h-dark-del-bg-color);
     border-color: var(--d2h-dark-del-border-color);
@@ -597,7 +603,7 @@
   .d2h-auto-color-scheme .d2h-info {
     background-color: var(--d2h-dark-info-bg-color);
     color: var(--d2h-dark-info-color);
-    border-color: var(--d2h-dark-bg-color);
+    border-color: var(--d2h-dark-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
@@ -620,12 +626,6 @@
     background-color: var(--d2h-dark-bg-color);
   }
 
-  .d2h-auto-color-scheme .d2h-code-linenumber {
-    background-color: var(--d2h-dark-bg-color);
-    color: var(--d2h-dark-color);
-    border-color: var(--d2h-dark-bg-color);
-  }
-
   .d2h-auto-color-scheme .d2h-file-list-wrapper a {
     color: var(--d2h-dark-moved-color);
   }

From 14989f1ddd3759f33c58d38fc7524a8bbe4d6ad8 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 18:31:16 -0500
Subject: [PATCH 14/36] rename test to match Class & function

---
 ...file-list-printer-tests.ts => file-list-renderer-tests.ts} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/__tests__/{file-list-printer-tests.ts => file-list-renderer-tests.ts} (98%)

diff --git a/src/__tests__/file-list-printer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
similarity index 98%
rename from src/__tests__/file-list-printer-tests.ts
rename to src/__tests__/file-list-renderer-tests.ts
index 486d8daa..114b0692 100644
--- a/src/__tests__/file-list-printer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -1,8 +1,8 @@
 import { render } from '../file-list-renderer';
 import HoganJsUtils from '../hoganjs-utils';
 
-describe('FileListPrinter', () => {
-  describe('generateFileList', () => {
+describe('FileListRenderer', () => {
+  describe('render', () => {
     it('should expose old and new files to templates', () => {
       const hoganUtils = new HoganJsUtils({
         rawTemplates: {

From 4e6bb497880a35ade6454fae100011f53673ce53 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 18:41:51 -0500
Subject: [PATCH 15/36] Update FileListRenderer to class

---
 src/__tests__/file-list-renderer-tests.ts |  9 ++--
 src/diff2html.ts                          |  4 +-
 src/file-list-renderer.ts                 | 56 +++++++++++++----------
 3 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/__tests__/file-list-renderer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
index 114b0692..4d16b621 100644
--- a/src/__tests__/file-list-renderer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -1,4 +1,4 @@
-import { render } from '../file-list-renderer';
+import { FileListRenderer } from '../file-list-renderer';
 import HoganJsUtils from '../hoganjs-utils';
 
 describe('FileListRenderer', () => {
@@ -10,6 +10,7 @@ describe('FileListRenderer', () => {
           'file-summary-line': '{{oldName}}, {{newName}}, {{fileName}}',
         },
       });
+      const fileListRenderer = new FileListRenderer(hoganUtils);
       const files = [
         {
           isCombined: false,
@@ -55,7 +56,7 @@ describe('FileListRenderer', () => {
         },
       ];
 
-      const fileHtml = render(files, hoganUtils);
+      const fileHtml = fileListRenderer.render(files);
 
       expect(fileHtml).toMatchInlineSnapshot(`
         "my/file/name.js, my/file/name.js, my/file/name.js
@@ -67,6 +68,8 @@ describe('FileListRenderer', () => {
 
     it('should work for all kinds of files', () => {
       const hoganUtils = new HoganJsUtils({});
+      const fileListRenderer = new FileListRenderer(hoganUtils);
+
       const files = [
         {
           isCombined: false,
@@ -111,7 +114,7 @@ describe('FileListRenderer', () => {
           isDeleted: true,
         },
       ];
-      const fileHtml = render(files, hoganUtils);
+      const fileHtml = fileListRenderer.render(files);
       expect(fileHtml).toMatchInlineSnapshot(`
         "<div class="d2h-file-list-wrapper">
             <div class="d2h-file-list-header">
diff --git a/src/diff2html.ts b/src/diff2html.ts
index 5daed0eb..8da24c77 100644
--- a/src/diff2html.ts
+++ b/src/diff2html.ts
@@ -1,5 +1,5 @@
 import * as DiffParser from './diff-parser';
-import * as fileListPrinter from './file-list-renderer';
+import { FileListRenderer } from './file-list-renderer';
 import LineByLineRenderer, { LineByLineRendererConfig, defaultLineByLineRendererConfig } from './line-by-line-renderer';
 import SideBySideRenderer, { SideBySideRendererConfig, defaultSideBySideRendererConfig } from './side-by-side-renderer';
 import { DiffFile, OutputFormatType } from './types';
@@ -32,7 +32,7 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon
 
   const hoganUtils = new HoganJsUtils(config);
 
-  const fileList = config.drawFileList ? fileListPrinter.render(diffJson, hoganUtils) : '';
+  const fileList = config.drawFileList ? new FileListRenderer(hoganUtils).render(diffJson) : '';
 
   const diffOutput =
     config.outputFormat === 'side-by-side'
diff --git a/src/file-list-renderer.ts b/src/file-list-renderer.ts
index 90836c48..b560b289 100644
--- a/src/file-list-renderer.ts
+++ b/src/file-list-renderer.ts
@@ -5,29 +5,37 @@ import { DiffFile } from './types';
 const baseTemplatesPath = 'file-summary';
 const iconsBaseTemplatesPath = 'icon';
 
-export function render(diffFiles: DiffFile[], hoganUtils: HoganJsUtils): string {
-  const files = diffFiles
-    .map(file =>
-      hoganUtils.render(
-        baseTemplatesPath,
-        'line',
-        {
-          fileHtmlId: renderUtils.getHtmlId(file),
-          oldName: file.oldName,
-          newName: file.newName,
-          fileName: renderUtils.filenameDiff(file),
-          deletedLines: '-' + file.deletedLines,
-          addedLines: '+' + file.addedLines,
-        },
-        {
-          fileIcon: hoganUtils.template(iconsBaseTemplatesPath, renderUtils.getFileIcon(file)),
-        },
-      ),
-    )
-    .join('\n');
+export class FileListRenderer {
+  private readonly hoganUtils: HoganJsUtils;
 
-  return hoganUtils.render(baseTemplatesPath, 'wrapper', {
-    filesNumber: diffFiles.length,
-    files: files,
-  });
+  constructor(hoganUtils: HoganJsUtils) {
+    this.hoganUtils = hoganUtils;
+  }
+
+  render(diffFiles: DiffFile[]): string {
+    const files = diffFiles
+      .map(file =>
+        this.hoganUtils.render(
+          baseTemplatesPath,
+          'line',
+          {
+            fileHtmlId: renderUtils.getHtmlId(file),
+            oldName: file.oldName,
+            newName: file.newName,
+            fileName: renderUtils.filenameDiff(file),
+            deletedLines: '-' + file.deletedLines,
+            addedLines: '+' + file.addedLines,
+          },
+          {
+            fileIcon: this.hoganUtils.template(iconsBaseTemplatesPath, renderUtils.getFileIcon(file)),
+          },
+        ),
+      )
+      .join('\n');
+
+    return this.hoganUtils.render(baseTemplatesPath, 'wrapper', {
+      filesNumber: diffFiles.length,
+      files: files,
+    });
+  }
 }

From c244b0dd51868584e55961a46f615289d7f35b46 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 19:08:01 -0500
Subject: [PATCH 16/36] Add ColorSchemeType for file list

---
 src/__tests__/file-list-renderer-tests.ts   | 93 +++++++++++++++++++++
 src/file-list-renderer.ts                   | 15 +++-
 src/templates/file-summary-wrapper.mustache |  2 +-
 3 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/file-list-renderer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
index 4d16b621..67e4225d 100644
--- a/src/__tests__/file-list-renderer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -1,5 +1,6 @@
 import { FileListRenderer } from '../file-list-renderer';
 import HoganJsUtils from '../hoganjs-utils';
+import { ColorSchemeType } from '../types';
 
 describe('FileListRenderer', () => {
   describe('render', () => {
@@ -175,5 +176,97 @@ describe('FileListRenderer', () => {
         </div>"
       `);
     });
+
+    describe('with dark colorScheme', () => {
+      it('should work for all kinds of files', () => {
+        const hoganUtils = new HoganJsUtils({});
+        const fileListRenderer = new FileListRenderer(hoganUtils, {
+          colorScheme: ColorSchemeType.DARK,
+        });
+
+        const files = [
+          {
+            isCombined: false,
+            isGitDiff: false,
+            blocks: [],
+            addedLines: 12,
+            deletedLines: 41,
+            language: 'js',
+            oldName: 'my/file/name.js',
+            newName: 'my/file/name.js',
+          },
+        ];
+        const fileHtml = fileListRenderer.render(files);
+        expect(fileHtml).toMatchInlineSnapshot(`
+          "<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
+              <div class="d2h-file-list-header">
+                  <span class="d2h-file-list-title">Files changed (1)</span>
+                  <a class="d2h-file-switch d2h-hide">hide</a>
+                  <a class="d2h-file-switch d2h-show">show</a>
+              </div>
+              <ol class="d2h-file-list">
+              <li class="d2h-file-list-line">
+              <span class="d2h-file-name-wrapper">
+                <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                     viewBox="0 0 14 16" width="14">
+                    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+                </svg>      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>
+                <span class="d2h-file-stats">
+                    <span class="d2h-lines-added">+12</span>
+                    <span class="d2h-lines-deleted">-41</span>
+                </span>
+              </span>
+          </li>
+              </ol>
+          </div>"
+        `);
+      });
+    });
+
+    describe('with auto colorScheme', () => {
+      it('should work for all kinds of files', () => {
+        const hoganUtils = new HoganJsUtils({});
+        const fileListRenderer = new FileListRenderer(hoganUtils, {
+          colorScheme: ColorSchemeType.AUTO,
+        });
+
+        const files = [
+          {
+            isCombined: false,
+            isGitDiff: false,
+            blocks: [],
+            addedLines: 12,
+            deletedLines: 41,
+            language: 'js',
+            oldName: 'my/file/name.js',
+            newName: 'my/file/name.js',
+          },
+        ];
+        const fileHtml = fileListRenderer.render(files);
+        expect(fileHtml).toMatchInlineSnapshot(`
+          "<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
+              <div class="d2h-file-list-header">
+                  <span class="d2h-file-list-title">Files changed (1)</span>
+                  <a class="d2h-file-switch d2h-hide">hide</a>
+                  <a class="d2h-file-switch d2h-show">show</a>
+              </div>
+              <ol class="d2h-file-list">
+              <li class="d2h-file-list-line">
+              <span class="d2h-file-name-wrapper">
+                <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                     viewBox="0 0 14 16" width="14">
+                    <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+                </svg>      <a href="#d2h-781444" class="d2h-file-name">my/file/name.js</a>
+                <span class="d2h-file-stats">
+                    <span class="d2h-lines-added">+12</span>
+                    <span class="d2h-lines-deleted">-41</span>
+                </span>
+              </span>
+          </li>
+              </ol>
+          </div>"
+        `);
+      });
+    });
   });
 });
diff --git a/src/file-list-renderer.ts b/src/file-list-renderer.ts
index b560b289..b9e7d19e 100644
--- a/src/file-list-renderer.ts
+++ b/src/file-list-renderer.ts
@@ -1,15 +1,25 @@
 import * as renderUtils from './render-utils';
 import HoganJsUtils from './hoganjs-utils';
-import { DiffFile } from './types';
+import { ColorSchemeType, DiffFile } from './types';
 
 const baseTemplatesPath = 'file-summary';
 const iconsBaseTemplatesPath = 'icon';
 
+export interface FileListRendererConfig {
+  colorScheme?: ColorSchemeType;
+}
+
+export const defaultFileListRendererConfig = {
+  colorScheme: ColorSchemeType.LIGHT,
+};
+
 export class FileListRenderer {
   private readonly hoganUtils: HoganJsUtils;
+  private readonly config: typeof defaultFileListRendererConfig;
 
-  constructor(hoganUtils: HoganJsUtils) {
+  constructor(hoganUtils: HoganJsUtils, config: FileListRendererConfig = {}) {
     this.hoganUtils = hoganUtils;
+    this.config = { ...defaultFileListRendererConfig, ...config };
   }
 
   render(diffFiles: DiffFile[]): string {
@@ -34,6 +44,7 @@ export class FileListRenderer {
       .join('\n');
 
     return this.hoganUtils.render(baseTemplatesPath, 'wrapper', {
+      colorScheme: renderUtils.colorSchemeToCss(this.config.colorScheme),
       filesNumber: diffFiles.length,
       files: files,
     });
diff --git a/src/templates/file-summary-wrapper.mustache b/src/templates/file-summary-wrapper.mustache
index 126854c2..600f4a32 100644
--- a/src/templates/file-summary-wrapper.mustache
+++ b/src/templates/file-summary-wrapper.mustache
@@ -1,4 +1,4 @@
-<div class="d2h-file-list-wrapper">
+<div class="d2h-file-list-wrapper{{colorScheme}}">
     <div class="d2h-file-list-header">
         <span class="d2h-file-list-title">Files changed ({{filesNumber}})</span>
         <a class="d2h-file-switch d2h-hide">hide</a>

From 0dccfa26a5bdcf9c5d4b88328a590916046b1dd6 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 19:09:22 -0500
Subject: [PATCH 17/36] Pass default from default render config

---
 src/file-list-renderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/file-list-renderer.ts b/src/file-list-renderer.ts
index b9e7d19e..bbb16983 100644
--- a/src/file-list-renderer.ts
+++ b/src/file-list-renderer.ts
@@ -10,7 +10,7 @@ export interface FileListRendererConfig {
 }
 
 export const defaultFileListRendererConfig = {
-  colorScheme: ColorSchemeType.LIGHT,
+  colorScheme: renderUtils.defaultRenderConfig.colorScheme,
 };
 
 export class FileListRenderer {

From 669ee2bff85dbaff3e2ef389b15fa511b38f5963 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 19:40:50 -0500
Subject: [PATCH 18/36] Fix del/ins change colors

---
 src/ui/css/diff2html.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 1f675eb8..9fafbc96 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -403,7 +403,8 @@
   --d2h-dark-info-bg-color: #32342c;
   --d2h-dark-info-color: #929292;
 
-  --d2h-dark-change-color: #796620;
+  --d2h-dark-change-del-color: #9b7707;
+  --d2h-dark-change-ins-color: #366b36;
   --d2h-dark-change-label-color: #d0b44c;
   --d2h-dark-moved-label-color: #3572b0;
 }
@@ -476,11 +477,11 @@
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
-  background-color: var(--d2h-dark-change-color);
+  background-color: var(--d2h-dark-change-del-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
-  background-color: var(--d2h-dark-change-color);
+  background-color: var(--d2h-dark-change-ins-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-wrapper {
@@ -607,11 +608,11 @@
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
-    background-color: var(--d2h-dark-change-color);
+    background-color: var(--d2h-dark-change-del-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
-    background-color: var(--d2h-dark-change-color);
+    background-color: var(--d2h-dark-change-ins-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-wrapper {

From 9f8d6bd4ca2d273a247ad343a0d575c6197aa1d6 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 20:10:30 -0500
Subject: [PATCH 19/36] Pass config to file list renderer

---
 src/__tests__/diff2html-tests.ts | 162 ++++++++++++++++++++++++++++++-
 src/diff2html.ts                 |   5 +-
 2 files changed, 165 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index 5591a615..ef68562c 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -1260,7 +1260,7 @@ describe('Diff2Html', () => {
     });
 
     describe('with auto colorScheme', () => {
-      it('should return a html diff with dark mode', () => {
+      it('should return a html diff with auto color scheme', () => {
         const result = html(diffExample1, {
           drawFileList: false,
           colorScheme: ColorSchemeType.AUTO,
@@ -1319,6 +1319,86 @@ describe('Diff2Html', () => {
           </div>"
         `);
       });
+
+      it('should include auto mode on file list', () => {
+        const result = html(diffExample1, {
+          drawFileList: true,
+          colorScheme: ColorSchemeType.AUTO,
+        });
+        expect(result).toMatchInlineSnapshot(`
+        "<div class="d2h-file-list-wrapper d2h-auto-color-scheme">
+            <div class="d2h-file-list-header">
+                <span class="d2h-file-list-title">Files changed (1)</span>
+                <a class="d2h-file-switch d2h-hide">hide</a>
+                <a class="d2h-file-switch d2h-show">show</a>
+            </div>
+            <ol class="d2h-file-list">
+            <li class="d2h-file-list-line">
+            <span class="d2h-file-name-wrapper">
+              <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                   viewBox="0 0 14 16" width="14">
+                  <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+              </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
+              <span class="d2h-file-stats">
+                  <span class="d2h-lines-added">+1</span>
+                  <span class="d2h-lines-deleted">-1</span>
+              </span>
+            </span>
+        </li>
+            </ol>
+        </div><div class="d2h-wrapper d2h-auto-color-scheme">
+            <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+            <div class="d2h-file-header">
+            <span class="d2h-file-name-wrapper">
+            <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+            </svg>    <span class="d2h-file-name">sample</span>
+            <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+        <label class="d2h-file-collapse">
+            <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+            Viewed
+        </label>
+            </div>
+            <div class="d2h-file-diff">
+                <div class="d2h-code-wrapper">
+                    <table class="d2h-diff-table">
+                        <tbody class="d2h-diff-tbody">
+                        <tr>
+            <td class="d2h-code-linenumber d2h-info"></td>
+            <td class="d2h-info">
+                <div class="d2h-code-line">@@ -1 +1 @@</div>
+            </td>
+        </tr><tr>
+            <td class="d2h-code-linenumber d2h-del d2h-change">
+              <div class="line-num1">1</div>
+        <div class="line-num2"></div>
+            </td>
+            <td class="d2h-del d2h-change">
+                <div class="d2h-code-line">
+                    <span class="d2h-code-line-prefix">-</span>
+                    <span class="d2h-code-line-ctn"><del>test</del></span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class="d2h-code-linenumber d2h-ins d2h-change">
+              <div class="line-num1"></div>
+        <div class="line-num2">1</div>
+            </td>
+            <td class="d2h-ins d2h-change">
+                <div class="d2h-code-line">
+                    <span class="d2h-code-line-prefix">+</span>
+                    <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                </div>
+            </td>
+        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        </div>"
+        `);
+      });
     });
 
     describe('with dark colorScheme', () => {
@@ -1381,6 +1461,86 @@ describe('Diff2Html', () => {
           </div>"
         `);
       });
+
+      it('should include dark mode on file list', () => {
+        const result = html(diffExample1, {
+          drawFileList: true,
+          colorScheme: ColorSchemeType.DARK,
+        });
+        expect(result).toMatchInlineSnapshot(`
+        "<div class="d2h-file-list-wrapper d2h-dark-color-scheme">
+            <div class="d2h-file-list-header">
+                <span class="d2h-file-list-title">Files changed (1)</span>
+                <a class="d2h-file-switch d2h-hide">hide</a>
+                <a class="d2h-file-switch d2h-show">show</a>
+            </div>
+            <ol class="d2h-file-list">
+            <li class="d2h-file-list-line">
+            <span class="d2h-file-name-wrapper">
+              <svg aria-hidden="true" class="d2h-icon d2h-changed" height="16" title="modified" version="1.1"
+                   viewBox="0 0 14 16" width="14">
+                  <path d="M13 1H1C0.45 1 0 1.45 0 2v12c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V2c0-0.55-0.45-1-1-1z m0 13H1V2h12v12zM4 8c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"></path>
+              </svg>      <a href="#d2h-675094" class="d2h-file-name">sample</a>
+              <span class="d2h-file-stats">
+                  <span class="d2h-lines-added">+1</span>
+                  <span class="d2h-lines-deleted">-1</span>
+              </span>
+            </span>
+        </li>
+            </ol>
+        </div><div class="d2h-wrapper d2h-dark-color-scheme">
+            <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
+            <div class="d2h-file-header">
+            <span class="d2h-file-name-wrapper">
+            <svg aria-hidden="true" class="d2h-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+                <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z"></path>
+            </svg>    <span class="d2h-file-name">sample</span>
+            <span class="d2h-tag d2h-changed d2h-changed-tag">CHANGED</span></span>
+        <label class="d2h-file-collapse">
+            <input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
+            Viewed
+        </label>
+            </div>
+            <div class="d2h-file-diff">
+                <div class="d2h-code-wrapper">
+                    <table class="d2h-diff-table">
+                        <tbody class="d2h-diff-tbody">
+                        <tr>
+            <td class="d2h-code-linenumber d2h-info"></td>
+            <td class="d2h-info">
+                <div class="d2h-code-line">@@ -1 +1 @@</div>
+            </td>
+        </tr><tr>
+            <td class="d2h-code-linenumber d2h-del d2h-change">
+              <div class="line-num1">1</div>
+        <div class="line-num2"></div>
+            </td>
+            <td class="d2h-del d2h-change">
+                <div class="d2h-code-line">
+                    <span class="d2h-code-line-prefix">-</span>
+                    <span class="d2h-code-line-ctn"><del>test</del></span>
+                </div>
+            </td>
+        </tr><tr>
+            <td class="d2h-code-linenumber d2h-ins d2h-change">
+              <div class="line-num1"></div>
+        <div class="line-num2">1</div>
+            </td>
+            <td class="d2h-ins d2h-change">
+                <div class="d2h-code-line">
+                    <span class="d2h-code-line-prefix">+</span>
+                    <span class="d2h-code-line-ctn"><ins>test1</ins></span>
+                </div>
+            </td>
+        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        </div>"
+        `);
+      });
     });
   });
 });
diff --git a/src/diff2html.ts b/src/diff2html.ts
index 8da24c77..06f00f73 100644
--- a/src/diff2html.ts
+++ b/src/diff2html.ts
@@ -32,7 +32,10 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon
 
   const hoganUtils = new HoganJsUtils(config);
 
-  const fileList = config.drawFileList ? new FileListRenderer(hoganUtils).render(diffJson) : '';
+  const { colorScheme } = config;
+  const fileListRendererConfig = { colorScheme };
+
+  const fileList = config.drawFileList ? new FileListRenderer(hoganUtils, fileListRendererConfig).render(diffJson) : '';
 
   const diffOutput =
     config.outputFormat === 'side-by-side'

From 79268800ff6ad3cef0232d4e14a4cd3ec94491f1 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 20:27:26 -0500
Subject: [PATCH 20/36] Add colors for file list

---
 src/ui/css/diff2html.css | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 9fafbc96..32ffe58e 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -386,7 +386,7 @@
 /**
  * Dark Mode Colors
  */
-.d2h-wrapper {
+:root {
   --d2h-dark-color: #d0d0d0;
   --d2h-dark-bg-color: #272822;
   --d2h-dark-border-color: #494b40;
@@ -395,10 +395,12 @@
   --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;
@@ -406,6 +408,7 @@
   --d2h-dark-change-del-color: #9b7707;
   --d2h-dark-change-ins-color: #366b36;
   --d2h-dark-change-label-color: #d0b44c;
+
   --d2h-dark-moved-label-color: #3572b0;
 }
 
@@ -426,6 +429,16 @@
   border-bottom: var(--d2h-dark-border-color);
 }
 
+.d2h-dark-color-scheme .d2h-lines-added {
+  border: 1px solid var(--d2h-dark-ins-border-color);
+  color: var(--d2h-dark-ins-label-color);
+}
+
+.d2h-dark-color-scheme .d2h-lines-deleted {
+  border: 1px solid var(--d2h-dark-del-border-color);
+  color: var(--d2h-dark-del-label-color);
+}
+
 .d2h-dark-color-scheme .d2h-code-line del,
 .d2h-dark-color-scheme .d2h-code-side-line del {
   background-color: var(--d2h-dark-del-highlight-bg-color);
@@ -557,6 +570,16 @@
     border-bottom: var(--d2h-dark-border-color);
   }
 
+  .d2h-auto-color-scheme .d2h-lines-added {
+    border: 1px solid var(--d2h-dark-ins-border-color);
+    color: var(--d2h-dark-ins-label-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-lines-deleted {
+    border: 1px solid var(--d2h-dark-del-border-color);
+    color: var(--d2h-dark-del-label-color);
+  }
+
   .d2h-auto-color-scheme .d2h-code-line del,
   .d2h-auto-color-scheme .d2h-code-side-line del {
     background-color: var(--d2h-dark-del-highlight-bg-color);

From 0029890ead7f20af49429a2d751c868439e3abfc Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 21:16:33 -0500
Subject: [PATCH 21/36] Add colorScheme information to README

---
 README.md | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9760114c..63c24daa 100644
--- a/README.md
+++ b/README.md
@@ -201,7 +201,7 @@ diff2htmlUi.draw();
 
 ```html
 <!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
 
 <!-- Javascripts -->
@@ -227,6 +227,21 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 ```
 
+When using the `auto` color scheme, you will need to specify both the light and dark themes for highlight.js to use.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
+  media="screen and (prefers-color-scheme: light)"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
+  media="screen and (prefers-color-scheme: dark)"
+/>
+```
+
 #### Collapsable File Summary List
 
 > Add the dependencies.
@@ -386,6 +401,8 @@ The HTML output accepts a Javascript object with configuration. Possible options
   > [src/templates](https://github.com/rtfpessoa/diff2html/tree/master/src/templates)
 - `highlightLanguages`: Map of extension to language name, used for highlighting. This overrides the default language
   detection based on file extensions.
+- `colorScheme`: color scheme to use for the diff, default is `light`. Possible values are `light`, `dark`, and `auto`
+  which will use the browser's preferred color scheme.
 
 ### Diff2Html Browser
 

From 93103e2c495ed8b926812b021da14a31ef5c2029 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 22:37:11 -0500
Subject: [PATCH 22/36] Convert light colors to variables

---
 src/ui/css/diff2html.css | 116 +++++++++++++++++++++++++--------------
 1 file changed, 76 insertions(+), 40 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 32ffe58e..2d78e2b4 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -5,6 +5,42 @@
  *
  */
 
+:root {
+  --d2h-color: rgba(0, 0, 0, 0.3);
+  --d2h-bg-color: #fff;
+  --d2h-border-color: #ddd;
+
+  --d2h-line-border-color: #eeeeee;
+
+  --d2h-file-header-color: #f7f7f7;
+  --d2h-file-header-border-color: #d8d8d8;
+
+  --d2h-empty-placeholder-bg-color: #f1f1f1;
+  --d2h-empty-placeholder-border-color: #e1e1e1;
+
+  --d2h-selected-color: #c8e1ff;
+
+  --d2h-ins-bg-color: #dfd;
+  --d2h-ins-border-color: #b4e2b4;
+  --d2h-ins-highlight-bg-color: #97f295;
+  --d2h-ins-label-color: #399839;
+
+  --d2h-del-bg-color: #fee8e9;
+  --d2h-del-border-color: #e9aeae;
+  --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-moved-label-color: #3572b0;
+}
+
 .d2h-wrapper {
   text-align: left;
 }
@@ -13,8 +49,8 @@
   display: flex;
   height: 35px;
   padding: 5px 10px;
-  border-bottom: 1px solid #d8d8d8;
-  background-color: #f7f7f7;
+  border-bottom: 1px solid var(--d2h-file-header-border-color);
+  background-color: var(--d2h-file-header-color);
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
@@ -34,18 +70,18 @@
 
 .d2h-lines-added {
   text-align: right;
-  border: 1px solid #b4e2b4;
+  border: 1px solid var(--d2h-ins-border-color);
   border-radius: 5px 0 0 5px;
-  color: #399839;
+  color: var(--d2h-ins-label-color);
   padding: 2px;
   vertical-align: middle;
 }
 
 .d2h-lines-deleted {
   text-align: left;
-  border: 1px solid #e9aeae;
+  border: 1px solid var(--d2h-del-border-color);
   border-radius: 0 5px 5px 0;
-  color: #c33;
+  color: var(--d2h-del-label-color);
   padding: 2px;
   vertical-align: middle;
   margin-left: 1px;
@@ -69,7 +105,7 @@
 }
 
 .d2h-file-wrapper {
-  border: 1px solid #ddd;
+  border: 1px solid var(--d2h-border-color);
   border-radius: 3px;
   margin-bottom: 1em;
 }
@@ -81,12 +117,12 @@
   font-size: 12px;
   align-items: center;
   border-radius: 3px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--d2h-border-color);
   padding: 4px 8px;
 }
 
 .d2h-file-collapse.d2h-selected {
-  background-color: #c8e1ff;
+  background-color: var(--d2h-selected-color);
 }
 
 .d2h-file-collapse-input {
@@ -155,7 +191,7 @@
   display: inline-block;
   margin-top: -1px;
   text-decoration: none;
-  background-color: #ffb6ba;
+  background-color: var(--d2h-del-highlight-bg-color);
   border-radius: 0.2em;
 }
 
@@ -164,7 +200,7 @@
   display: inline-block;
   margin-top: -1px;
   text-decoration: none;
-  background-color: #97f295;
+  background-color: var(--d2h-ins-highlight-bg-color);
   border-radius: 0.2em;
   text-align: left;
 }
@@ -201,10 +237,10 @@
   /* Keep the numbers fixed on line contents scroll */
   position: absolute;
   display: inline-block;
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.3);
+  background-color: var(--d2h-bg-color);
+  color: var(--d2h-color);
   text-align: right;
-  border: solid #eeeeee;
+  border: solid var(--d2h-line-border-color);
   border-width: 0 1px 0 1px;
   cursor: pointer;
 }
@@ -219,10 +255,10 @@
   display: inline-block;
   box-sizing: border-box;
   width: 4em;
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.3);
+  background-color: var(--d2h-bg-color);
+  color: var(--d2h-color);
   text-align: right;
-  border: solid #eeeeee;
+  border: solid var(--d2h-line-border-color);
   border-width: 0 1px 0 1px;
   cursor: pointer;
   overflow: hidden;
@@ -236,8 +272,8 @@
 
 .d2h-code-side-emptyplaceholder,
 .d2h-emptyplaceholder {
-  background-color: #f1f1f1;
-  border-color: #e1e1e1;
+  background-color: var(--d2h-empty-placeholder-bg-color);
+  border-color: var(--d2h-empty-placeholder-border-color);
 }
 
 .d2h-code-linenumber,
@@ -257,27 +293,27 @@
  */
 
 .d2h-del {
-  background-color: #fee8e9;
-  border-color: #e9aeae;
+  background-color: var(--d2h-del-bg-color);
+  border-color: var(--d2h-del-border-color);
 }
 
 .d2h-ins {
-  background-color: #dfd;
-  border-color: #b4e2b4;
+  background-color: var(--d2h-ins-bg-color);
+  border-color: var(--d2h-ins-border-color);
 }
 
 .d2h-info {
-  background-color: #f8fafd;
-  color: rgba(0, 0, 0, 0.3);
-  border-color: #d5e4f2;
+  background-color: var(--d2h-info-bg-color);
+  color: var(--d2h-color);
+  border-color: var(--d2h-info-border-color);
 }
 
 .d2h-file-diff .d2h-del.d2h-change {
-  background-color: #fdf2d0;
+  background-color: var(--d2h-change-del-color);
 }
 
 .d2h-file-diff .d2h-ins.d2h-change {
-  background-color: #ded;
+  background-color: var(--d2h-change-ins-color);
 }
 
 /*
@@ -290,11 +326,11 @@
 
 .d2h-file-list-wrapper a {
   text-decoration: none;
-  color: #3572b0;
+  color: var(--d2h-moved-label-color);
 }
 
 .d2h-file-list-wrapper a:visited {
-  color: #3572b0;
+  color: var(--d2h-moved-label-color);
 }
 
 .d2h-file-list-header {
@@ -320,7 +356,7 @@
 }
 
 .d2h-file-list > li {
-  border-bottom: #ddd solid 1px;
+  border-bottom: var(--d2h-border-color) solid 1px;
   padding: 5px 10px;
   margin: 0;
 }
@@ -342,19 +378,19 @@
 }
 
 .d2h-deleted {
-  color: #c33;
+  color: var(--d2h-del-label-color);
 }
 
 .d2h-added {
-  color: #399839;
+  color: var(--d2h-ins-label-color);
 }
 
 .d2h-changed {
-  color: #d0b44c;
+  color: var(--d2h-change-label-color);
 }
 
 .d2h-moved {
-  color: #3572b0;
+  color: var(--d2h-moved-label-color);
 }
 
 .d2h-tag {
@@ -364,23 +400,23 @@
   font-size: 10px;
   margin-left: 5px;
   padding: 0 2px;
-  background-color: #fff;
+  background-color: var(--d2h-bg-color);
 }
 
 .d2h-deleted-tag {
-  border: #c33 1px solid;
+  border: var(--d2h-del-label-color) 1px solid;
 }
 
 .d2h-added-tag {
-  border: #399839 1px solid;
+  border: var(--d2h-ins-label-color) 1px solid;
 }
 
 .d2h-changed-tag {
-  border: #d0b44c 1px solid;
+  border: var(--d2h-change-label-color) 1px solid;
 }
 
 .d2h-moved-tag {
-  border: #3572b0 1px solid;
+  border: var(--d2h-moved-label-color) 1px solid;
 }
 
 /**

From efd28ffb3a94a114990c4003921fb52a5811cf95 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 23:02:52 -0500
Subject: [PATCH 23/36] Move dark variables and match pattern

---
 src/ui/css/diff2html.css | 79 +++++++++++++++++++++-------------------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 2d78e2b4..7a5a6697 100644
--- a/src/ui/css/diff2html.css
+++ b/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 {

From 9806d677f3e69d6020d188ba8f554f4bd59f3512 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 23:10:43 -0500
Subject: [PATCH 24/36] Add file header

---
 src/ui/css/diff2html.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 7a5a6697..5e4fb7a5 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -12,7 +12,7 @@
 
   --d2h-line-border-color: #eeeeee;
 
-  --d2h-file-header-color: #f7f7f7;
+  --d2h-file-header-bg-color: #f7f7f7;
   --d2h-file-header-border-color: #d8d8d8;
 
   --d2h-empty-placeholder-bg-color: #f1f1f1;
@@ -49,6 +49,9 @@
 
   --d2h-dark-line-border-color: #5a5c51;
 
+  --d2h-dark-file-header-bg-color: #4f5146;
+  --d2h-dark-file-header-border-color: #3f4136;
+
   --d2h-dark-empty-placeholder-bg-color: #494b40;
   --d2h-dark-empty-placeholder-border-color: #66695a;
 
@@ -81,7 +84,7 @@
   height: 35px;
   padding: 5px 10px;
   border-bottom: 1px solid var(--d2h-file-header-border-color);
-  background-color: var(--d2h-file-header-color);
+  background-color: var(--d2h-file-header-bg-color);
   font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
@@ -465,8 +468,8 @@
 
 .d2h-dark-color-scheme .d2h-file-header {
   color: var(--d2h-dark-color);
-  background-color: var(--d2h-dark-bg-color);
-  border-bottom: var(--d2h-dark-border-color);
+  background-color: var(--d2h-dark-file-header-bg-color);
+  border-bottom: var(--d2h-dark-file-header-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-lines-added {
@@ -605,8 +608,8 @@
 
   .d2h-auto-color-scheme .d2h-file-header {
     color: var(--d2h-dark-color);
-    background-color: var(--d2h-dark-bg-color);
-    border-bottom: var(--d2h-dark-border-color);
+    background-color: var(--d2h-dark-file-header-bg-color);
+    border-bottom: var(--d2h-dark-file-header-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-lines-added {

From 786e5cc027ac34db3db6ef989928fd20cd65d7b9 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Mon, 18 Sep 2023 23:17:17 -0500
Subject: [PATCH 25/36] Fix remaining --d2h-dark-line-border-color

---
 src/ui/css/diff2html.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 5e4fb7a5..615a11b5 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -501,7 +501,7 @@
 .d2h-dark-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-dark-line-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
@@ -513,7 +513,7 @@
 .d2h-dark-color-scheme .d2h-code-linenumber {
   background-color: var(--d2h-dark-bg-color);
   color: var(--d2h-dark-color);
-  border-color: var(--d2h-line-border-color);
+  border-color: var(--d2h-dark-line-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-del {
@@ -641,7 +641,7 @@
   .d2h-auto-color-scheme .d2h-code-side-linenumber {
     background-color: var(--d2h-dark-bg-color);
     color: var(--d2h-dark-color);
-    border-color: var(--d2h-line-border-color);
+    border-color: var(--d2h-dark-line-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
@@ -653,7 +653,7 @@
   .d2h-auto-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-dark-line-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-del {

From 1aa822da56763211d4c6e0db3ad881ed49a9835a Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 07:52:23 -0500
Subject: [PATCH 26/36] Update test text

---
 src/__tests__/diff2html-tests.ts          | 4 ++--
 src/__tests__/file-list-renderer-tests.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index ef68562c..12bb698a 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -1320,7 +1320,7 @@ describe('Diff2Html', () => {
         `);
       });
 
-      it('should include auto mode on file list', () => {
+      it('should include auto colorScheme on file list', () => {
         const result = html(diffExample1, {
           drawFileList: true,
           colorScheme: ColorSchemeType.AUTO,
@@ -1462,7 +1462,7 @@ describe('Diff2Html', () => {
         `);
       });
 
-      it('should include dark mode on file list', () => {
+      it('should include dark colorScheme on file list', () => {
         const result = html(diffExample1, {
           drawFileList: true,
           colorScheme: ColorSchemeType.DARK,
diff --git a/src/__tests__/file-list-renderer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
index 67e4225d..851f980a 100644
--- a/src/__tests__/file-list-renderer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -178,7 +178,7 @@ describe('FileListRenderer', () => {
     });
 
     describe('with dark colorScheme', () => {
-      it('should work for all kinds of files', () => {
+      it('should should include dark colorScheme', () => {
         const hoganUtils = new HoganJsUtils({});
         const fileListRenderer = new FileListRenderer(hoganUtils, {
           colorScheme: ColorSchemeType.DARK,
@@ -224,7 +224,7 @@ describe('FileListRenderer', () => {
     });
 
     describe('with auto colorScheme', () => {
-      it('should work for all kinds of files', () => {
+      it('should should include auto colorScheme', () => {
         const hoganUtils = new HoganJsUtils({});
         const fileListRenderer = new FileListRenderer(hoganUtils, {
           colorScheme: ColorSchemeType.AUTO,

From 8d9a8a8265f006e73f90a0b8d34f3ee1ebe8cb37 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 17:45:22 -0500
Subject: [PATCH 27/36] Fix --d2h-dark-moved-label-color references

---
 src/ui/css/diff2html.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 615a11b5..4a30ba5d 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -553,11 +553,11 @@
 }
 
 .d2h-dark-color-scheme .d2h-file-list-wrapper a {
-  color: var(--d2h-dark-moved-color);
+  color: var(--d2h-dark-moved-label-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
-  color: var(--d2h-dark-moved-color);
+  color: var(--d2h-dark-moved-label-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list > li {
@@ -569,7 +569,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-moved {
-  color: var(--d2h-dark-moved-color);
+  color: var(--d2h-dark-moved-label-color);
 }
 
 .d2h-dark-color-scheme .d2h-tag {
@@ -589,7 +589,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-moved-tag {
-  border: var(--d2h-dark-moved-color) 1px solid;
+  border: var(--d2h-dark-moved-label-color) 1px solid;
 }
 
 /**
@@ -693,11 +693,11 @@
   }
 
   .d2h-auto-color-scheme .d2h-file-list-wrapper a {
-    color: var(--d2h-dark-moved-color);
+    color: var(--d2h-dark-moved-label-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
-    color: var(--d2h-dark-moved-color);
+    color: var(--d2h-dark-moved-label-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list > li {
@@ -709,7 +709,7 @@
   }
 
   .d2h-auto-color-scheme .d2h-moved {
-    color: var(--d2h-dark-moved-color);
+    color: var(--d2h-dark-moved-label-color);
   }
 
   .d2h-auto-color-scheme .d2h-tag {
@@ -729,6 +729,6 @@
   }
 
   .d2h-auto-color-scheme .d2h-moved-tag {
-    border: var(--d2h-dark-moved-color) 1px solid;
+    border: var(--d2h-dark-moved-label-color) 1px solid;
   }
 }

From b26353c04de1aece6c45b5b239a902eb0e01c356 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 19:47:17 -0500
Subject: [PATCH 28/36] Normalize remaining variables

---
 src/ui/css/diff2html.css | 59 +++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 4a30ba5d..da378047 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -6,10 +6,11 @@
  */
 
 :root {
-  --d2h-color: rgba(0, 0, 0, 0.3);
   --d2h-bg-color: #fff;
   --d2h-border-color: #ddd;
 
+  --d2h-dim-color: rgba(0, 0, 0, 0.3);
+
   --d2h-line-border-color: #eeeeee;
 
   --d2h-file-header-bg-color: #f7f7f7;
@@ -47,6 +48,8 @@
   --d2h-dark-bg-color: #272822;
   --d2h-dark-border-color: #494b40;
 
+  --d2h-dark-dim-color: #929292;
+
   --d2h-dark-line-border-color: #5a5c51;
 
   --d2h-dark-file-header-bg-color: #4f5146;
@@ -55,6 +58,8 @@
   --d2h-dark-empty-placeholder-bg-color: #494b40;
   --d2h-dark-empty-placeholder-border-color: #66695a;
 
+  --d2h-dark-selected-color: #00489f;
+
   --d2h-dark-ins-bg-color: #0f4a07;
   --d2h-dark-ins-border-color: #219f1f;
   --d2h-dark-ins-highlight-bg-color: #177016;
@@ -69,7 +74,7 @@
   --d2h-dark-change-ins-color: #366b36;
 
   --d2h-dark-info-bg-color: #32342c;
-  --d2h-dark-info-color: #929292;
+  --d2h-dark-info-border-color: #4f5146;
 
   --d2h-dark-change-label-color: #d0b44c;
   --d2h-dark-moved-label-color: #3572b0;
@@ -272,7 +277,7 @@
   position: absolute;
   display: inline-block;
   background-color: var(--d2h-bg-color);
-  color: var(--d2h-color);
+  color: var(--d2h-dim-color);
   text-align: right;
   border: solid var(--d2h-line-border-color);
   border-width: 0 1px 0 1px;
@@ -290,7 +295,7 @@
   box-sizing: border-box;
   width: 4em;
   background-color: var(--d2h-bg-color);
-  color: var(--d2h-color);
+  color: var(--d2h-dim-color);
   text-align: right;
   border: solid var(--d2h-line-border-color);
   border-width: 0 1px 0 1px;
@@ -338,7 +343,7 @@
 
 .d2h-info {
   background-color: var(--d2h-info-bg-color);
-  color: var(--d2h-color);
+  color: var(--d2h-dim-color);
   border-color: var(--d2h-info-border-color);
 }
 
@@ -500,7 +505,7 @@
 
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
   background-color: var(--d2h-dark-bg-color);
-  color: var(--d2h-dark-color);
+  color: var(--d2h-dark-dim-color);
   border-color: var(--d2h-dark-line-border-color);
 }
 
@@ -512,7 +517,7 @@
 
 .d2h-dark-color-scheme .d2h-code-linenumber {
   background-color: var(--d2h-dark-bg-color);
-  color: var(--d2h-dark-color);
+  color: var(--d2h-dark-dim-color);
   border-color: var(--d2h-dark-line-border-color);
 }
 
@@ -528,8 +533,8 @@
 
 .d2h-dark-color-scheme .d2h-info {
   background-color: var(--d2h-dark-info-bg-color);
-  color: var(--d2h-dark-info-color);
-  border-color: var(--d2h-dark-border-color);
+  color: var(--d2h-dark-dim-color);
+  border-color: var(--d2h-dark-info-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
@@ -549,7 +554,7 @@
 }
 
 .d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
-  background-color: var(--d2h-dark-bg-color);
+  background-color: var(--d2h-dark-selected-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-list-wrapper a {
@@ -564,6 +569,14 @@
   border-bottom: var(--d2h-dark-bg-color) solid 1px;
 }
 
+.d2h-dark-color-scheme .d2h-deleted {
+  color: var(--d2h-dark-del-label-color);
+}
+
+.d2h-dark-color-scheme .d2h-added {
+  color: var(--d2h-dark-ins-label-color);
+}
+
 .d2h-dark-color-scheme .d2h-changed {
   color: var(--d2h-dark-change-label-color);
 }
@@ -577,11 +590,11 @@
 }
 
 .d2h-dark-color-scheme .d2h-deleted-tag {
-  border: var(--d2h-dark-del-border-color) 1px solid;
+  border: var(--d2h-dark-del-label-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-added-tag {
-  border: var(--d2h-dark-ins-bg-color) 1px solid;
+  border: var(--d2h-dark-ins-label-color) 1px solid;
 }
 
 .d2h-dark-color-scheme .d2h-changed-tag {
@@ -640,7 +653,7 @@
 
   .d2h-auto-color-scheme .d2h-code-side-linenumber {
     background-color: var(--d2h-dark-bg-color);
-    color: var(--d2h-dark-color);
+    color: var(--d2h-dark-dim-color);
     border-color: var(--d2h-dark-line-border-color);
   }
 
@@ -652,7 +665,7 @@
 
   .d2h-auto-color-scheme .d2h-code-linenumber {
     background-color: var(--d2h-dark-bg-color);
-    color: var(--d2h-dark-color);
+    color: var(--d2h-dark-dim-color);
     border-color: var(--d2h-dark-line-border-color);
   }
 
@@ -668,8 +681,8 @@
 
   .d2h-auto-color-scheme .d2h-info {
     background-color: var(--d2h-dark-info-bg-color);
-    color: var(--d2h-dark-info-color);
-    border-color: var(--d2h-dark-border-color);
+    color: var(--d2h-dark-color);
+    border-color: var(--d2h-dark-info-border-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
@@ -689,7 +702,7 @@
   }
 
   .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
-    background-color: var(--d2h-dark-bg-color);
+    background-color: var(--d2h-dark-selected-color);
   }
 
   .d2h-auto-color-scheme .d2h-file-list-wrapper a {
@@ -704,6 +717,14 @@
     border-bottom: var(--d2h-dark-bg-color) solid 1px;
   }
 
+  .d2h-dark-color-scheme .d2h-deleted {
+    color: var(--d2h-dark-del-label-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-added {
+    color: var(--d2h-dark-ins-label-color);
+  }
+
   .d2h-auto-color-scheme .d2h-changed {
     color: var(--d2h-dark-change-label-color);
   }
@@ -717,11 +738,11 @@
   }
 
   .d2h-auto-color-scheme .d2h-deleted-tag {
-    border: var(--d2h-dark-del-border-color) 1px solid;
+    border: var(--d2h-dark-del-label-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-added-tag {
-    border: var(--d2h-dark-ins-bg-color) 1px solid;
+    border: var(--d2h-dark-ins-label-color) 1px solid;
   }
 
   .d2h-auto-color-scheme .d2h-changed-tag {

From 3865a5f27ea7e7158719a47e9fa832c917fc9384 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 19:54:40 -0500
Subject: [PATCH 29/36] Adjust colors

---
 src/ui/css/diff2html.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index da378047..b16db9c0 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -44,8 +44,8 @@
    * Dark Color Scheme
    */
 
-  --d2h-dark-color: #d0d0d0;
-  --d2h-dark-bg-color: #272822;
+  --d2h-dark-color: #e6edf3;
+  --d2h-dark-bg-color: #171814;
   --d2h-dark-border-color: #494b40;
 
   --d2h-dark-dim-color: #929292;

From 863246eed04153d6e5af996b27c594058e9a95c4 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 20:18:35 -0500
Subject: [PATCH 30/36] remove redundant classes

---
 src/ui/css/diff2html.css | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index b16db9c0..21c4b3ff 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -461,18 +461,13 @@
 /**
  * Dark Mode Colors
  */
-.d2h-dark-color-scheme .d2h-files-diff {
-  background-color: var(--d2h-dark-bg-color);
-  color: var(--d2h-dark-color);
-}
 
-.d2h-dark-color-scheme .d2h-wrapper {
+.d2h-dark-color-scheme {
   color: var(--d2h-dark-color);
   background-color: var(--d2h-dark-bg-color);
 }
 
 .d2h-dark-color-scheme .d2h-file-header {
-  color: var(--d2h-dark-color);
   background-color: var(--d2h-dark-file-header-bg-color);
   border-bottom: var(--d2h-dark-file-header-border-color);
 }
@@ -498,14 +493,10 @@
 }
 
 .d2h-dark-color-scheme .d2h-diff-tbody {
-  background-color: var(--d2h-dark-bg-color);
-  color: var(--d2h-dark-color);
   border-color: var(--d2h-dark-border-color);
 }
 
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
-  background-color: var(--d2h-dark-bg-color);
-  color: var(--d2h-dark-dim-color);
   border-color: var(--d2h-dark-line-border-color);
 }
 
@@ -609,18 +600,12 @@
  * Auto Mode Colors
  */
 @media (prefers-color-scheme: dark) {
-  .d2h-auto-color-scheme .d2h-files-diff {
+  .d2h-auto-color-scheme {
     background-color: var(--d2h-dark-bg-color);
     color: var(--d2h-dark-color);
   }
 
-  .d2h-auto-color-scheme .d2h-wrapper {
-    color: var(--d2h-dark-color);
-    background-color: var(--d2h-dark-bg-color);
-  }
-
   .d2h-auto-color-scheme .d2h-file-header {
-    color: var(--d2h-dark-color);
     background-color: var(--d2h-dark-file-header-bg-color);
     border-bottom: var(--d2h-dark-file-header-border-color);
   }
@@ -646,8 +631,6 @@
   }
 
   .d2h-auto-color-scheme .d2h-diff-tbody {
-    background-color: var(--d2h-dark-bg-color);
-    color: var(--d2h-dark-color);
     border-color: var(--d2h-dark-border-color);
   }
 
@@ -681,7 +664,7 @@
 
   .d2h-auto-color-scheme .d2h-info {
     background-color: var(--d2h-dark-info-bg-color);
-    color: var(--d2h-dark-color);
+    color: var(--d2h-dark-dim-color);
     border-color: var(--d2h-dark-info-border-color);
   }
 

From 4b42e4b0de10eddb5125acbe73d46f9e9118bffb Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 20:46:45 -0500
Subject: [PATCH 31/36] Toggle colorscheme on Demo body

---
 .../templates/pages/demo/content.handlebars    |  2 +-
 website/templates/pages/demo/demo.css          | 18 ++++++++++++++++++
 website/templates/pages/demo/demo.ts           |  9 +++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/website/templates/pages/demo/content.handlebars b/website/templates/pages/demo/content.handlebars
index 15831955..0db7b0a7 100644
--- a/website/templates/pages/demo/content.handlebars
+++ b/website/templates/pages/demo/content.handlebars
@@ -2,7 +2,7 @@
   <div class="hero-body">
     <div class="container">
       <h1 class="title is-size-1 is-spaced">Demo<a href="#help">
-          <svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64"
+          <svg fill="currentColor" height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64"
             aria-hidden="true">
             <path
               d="M15.67 7.06l-1.08-1.34c-.17-.22-.28-.48-.31-.77l-.19-1.7a1.51 1.51 0 0 0-1.33-1.33l-1.7-.19c-.3-.03-.56-.16-.78-.33L8.94.32c-.55-.44-1.33-.44-1.88 0L5.72 1.4c-.22.17-.48.28-.77.31l-1.7.19c-.7.08-1.25.63-1.33 1.33l-.19 1.7c-.03.3-.16.56-.33.78L.32 7.05c-.44.55-.44 1.33 0 1.88l1.08 1.34c.17.22.28.48.31.77l.19 1.7c.08.7.63 1.25 1.33 1.33l1.7.19c.3.03.56.16.78.33l1.34 1.08c.55.44 1.33.44 1.88 0l1.34-1.08c.22-.17.48-.28.77-.31l1.7-.19c.7-.08 1.25-.63 1.33-1.33l.19-1.7c.03-.3.16-.56.33-.78l1.08-1.34c.44-.55.44-1.33 0-1.88zM9 11.5c0 .28-.22.5-.5.5h-1c-.27 0-.5-.22-.5-.5v-1c0-.28.23-.5.5-.5h1c.28 0 .5.22.5.5v1zm1.56-4.89c-.06.17-.17.33-.3.47-.13.16-.14.19-.33.38-.16.17-.31.3-.52.45-.11.09-.2.19-.28.27-.08.08-.14.17-.19.27-.05.1-.08.19-.11.3-.03.11-.03.13-.03.25H7.13c0-.22 0-.31.03-.48.03-.19.08-.36.14-.52.06-.14.14-.28.25-.42.11-.13.23-.25.41-.38.27-.19.36-.3.48-.52.12-.22.2-.38.2-.59 0-.27-.06-.45-.2-.58-.13-.13-.31-.19-.58-.19-.09 0-.19.02-.3.05-.11.03-.17.09-.25.16-.08.07-.14.11-.2.2a.41.41 0 0 0-.09.28h-2c0-.38.13-.56.27-.83.16-.27.36-.5.61-.67.25-.17.55-.3.88-.38.33-.08.7-.13 1.09-.13.44 0 .83.05 1.17.13.34.09.63.22.88.39.23.17.41.38.55.63.13.25.19.55.19.88 0 .22 0 .42-.08.59l-.02-.01z">
diff --git a/website/templates/pages/demo/demo.css b/website/templates/pages/demo/demo.css
index f8e6cbbc..e2ced3f6 100644
--- a/website/templates/pages/demo/demo.css
+++ b/website/templates/pages/demo/demo.css
@@ -5,3 +5,21 @@
 .diff-url-btn.is-small {
   font-size: 0.85rem;
 }
+
+.d2h-dark-color-scheme .title {
+  color: #fff;
+}
+
+.d2h-dark-color-scheme .footer {
+  background-color: #2d2d2d;
+}
+
+@media (prefers-color-scheme: dark) {
+  .d2h-auto-color-scheme .title {
+    color: #fff;
+  }
+
+  .d2h-auto-color-scheme .footer {
+    background-color: #2d2d2d;
+  }
+}
diff --git a/website/templates/pages/demo/demo.ts b/website/templates/pages/demo/demo.ts
index 76215733..1030f9b7 100644
--- a/website/templates/pages/demo/demo.ts
+++ b/website/templates/pages/demo/demo.ts
@@ -5,6 +5,8 @@ import '../../../main.css';
 import 'highlight.js/styles/github.css';
 import '../../../../src/ui/css/diff2html.css';
 import './demo.css';
+import { colorSchemeToCss } from '../../../../src/render-utils';
+import { ColorSchemeType } from '../../../../src/types';
 
 /*
  * Example URLs:
@@ -155,9 +157,16 @@ async function getDiff(request: Request): Promise<string> {
 
 function draw(diffString: string, config: Diff2HtmlUIConfig, elements: Elements): void {
   const diff2htmlUi = new Diff2HtmlUI(elements.structure.diffTarget, diffString, config);
+
+  setBodyColorScheme(diff2htmlUi.config.colorScheme);
+
   diff2htmlUi.draw();
 }
 
+function setBodyColorScheme(colorScheme: ColorSchemeType): void {
+  document.body.className = colorSchemeToCss(colorScheme);
+}
+
 async function prepareInitialState(elements: Elements): Promise<[Diff2HtmlUIConfig, string]> {
   const urlParams = getParamsFromSearch(window.location.search);
   const currentUrl = (urlParams && urlParams[searchParam]) || 'https://github.com/rtfpessoa/diff2html/pull/106';

From 0de1e040b06d70e5009490376d8c8bbcd7e44786 Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 20:51:38 -0500
Subject: [PATCH 32/36] Create modified github theme for demo

---
 website/templates/pages/demo/demo.ts          |   2 +-
 .../pages/demo/github-highlights.css          | 332 ++++++++++++++++++
 2 files changed, 333 insertions(+), 1 deletion(-)
 create mode 100644 website/templates/pages/demo/github-highlights.css

diff --git a/website/templates/pages/demo/demo.ts b/website/templates/pages/demo/demo.ts
index 1030f9b7..9475280a 100644
--- a/website/templates/pages/demo/demo.ts
+++ b/website/templates/pages/demo/demo.ts
@@ -2,7 +2,7 @@ import { Diff2HtmlUI, defaultDiff2HtmlUIConfig, Diff2HtmlUIConfig } from '../../
 
 import '../../../main.ts';
 import '../../../main.css';
-import 'highlight.js/styles/github.css';
+import './github-highlights.css';
 import '../../../../src/ui/css/diff2html.css';
 import './demo.css';
 import { colorSchemeToCss } from '../../../../src/render-utils';
diff --git a/website/templates/pages/demo/github-highlights.css b/website/templates/pages/demo/github-highlights.css
new file mode 100644
index 00000000..6492281b
--- /dev/null
+++ b/website/templates/pages/demo/github-highlights.css
@@ -0,0 +1,332 @@
+/*!
+  Theme Adapted from highlight.js github theme
+  Theme: Modified GitHub Dark
+  Description: Dark theme as seen on github.com, modified for diff2html demo
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  color: #24292e;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #d73a49;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #6f42c1;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #005cc5;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #032f62;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #e36209;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #6a737d;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #22863a;
+}
+.hljs-subst {
+  color: #24292e;
+}
+.hljs-section {
+  color: #005cc5;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #735c0f;
+}
+.hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #24292e;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.d2h-dark-color-scheme .hljs {
+  color: #c9d1d9;
+}
+.d2h-dark-color-scheme .hljs-doctag,
+.d2h-dark-color-scheme .hljs-keyword,
+.d2h-dark-color-scheme .hljs-meta .hljs-keyword,
+.d2h-dark-color-scheme .hljs-template-tag,
+.d2h-dark-color-scheme .hljs-template-variable,
+.d2h-dark-color-scheme .hljs-type,
+.d2h-dark-color-scheme .hljs-variable.language_ {
+  color: #ff7b72;
+}
+.d2h-dark-color-scheme .hljs-title,
+.d2h-dark-color-scheme .hljs-title.class_,
+.d2h-dark-color-scheme .hljs-title.class_.inherited__,
+.d2h-dark-color-scheme .hljs-title.function_ {
+  color: #d2a8ff;
+}
+.d2h-dark-color-scheme .hljs-attr,
+.d2h-dark-color-scheme .hljs-attribute,
+.d2h-dark-color-scheme .hljs-literal,
+.d2h-dark-color-scheme .hljs-meta,
+.d2h-dark-color-scheme .hljs-number,
+.d2h-dark-color-scheme .hljs-operator,
+.d2h-dark-color-scheme .hljs-selector-attr,
+.d2h-dark-color-scheme .hljs-selector-class,
+.d2h-dark-color-scheme .hljs-selector-id,
+.d2h-dark-color-scheme .hljs-variable {
+  color: #79c0ff;
+}
+.d2h-dark-color-scheme .hljs-meta .hljs-string,
+.d2h-dark-color-scheme .hljs-regexp,
+.d2h-dark-color-scheme .hljs-string {
+  color: #a5d6ff;
+}
+.d2h-dark-color-scheme .hljs-built_in,
+.d2h-dark-color-scheme .hljs-symbol {
+  color: #ffa657;
+}
+.d2h-dark-color-scheme .hljs-code,
+.d2h-dark-color-scheme .hljs-comment,
+.d2h-dark-color-scheme .hljs-formula {
+  color: #8b949e;
+}
+.d2h-dark-color-scheme .hljs-name,
+.d2h-dark-color-scheme .hljs-quote,
+.d2h-dark-color-scheme .hljs-selector-pseudo,
+.d2h-dark-color-scheme .hljs-selector-tag {
+  color: #7ee787;
+}
+.d2h-dark-color-scheme .hljs-subst {
+  color: #c9d1d9;
+}
+.d2h-dark-color-scheme .hljs-section {
+  color: #1f6feb;
+  font-weight: 700;
+}
+.d2h-dark-color-scheme .hljs-bullet {
+  color: #f2cc60;
+}
+.d2h-dark-color-scheme .hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.d2h-dark-color-scheme .hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+.d2h-dark-color-scheme .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.d2h-dark-color-scheme .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
+@media (prefers-color-scheme: dark) {
+  .d2h-auto-color-scheme .hljs {
+    color: #c9d1d9;
+  }
+  .d2h-auto-color-scheme .hljs-doctag,
+  .d2h-auto-color-scheme .hljs-keyword,
+  .d2h-auto-color-scheme .hljs-meta .hljs-keyword,
+  .d2h-auto-color-scheme .hljs-template-tag,
+  .d2h-auto-color-scheme .hljs-template-variable,
+  .d2h-auto-color-scheme .hljs-type,
+  .d2h-auto-color-scheme .hljs-variable.language_ {
+    color: #ff7b72;
+  }
+  .d2h-auto-color-scheme .hljs-title,
+  .d2h-auto-color-scheme .hljs-title.class_,
+  .d2h-auto-color-scheme .hljs-title.class_.inherited__,
+  .d2h-auto-color-scheme .hljs-title.function_ {
+    color: #d2a8ff;
+  }
+  .d2h-auto-color-scheme .hljs-attr,
+  .d2h-auto-color-scheme .hljs-attribute,
+  .d2h-auto-color-scheme .hljs-literal,
+  .d2h-auto-color-scheme .hljs-meta,
+  .d2h-auto-color-scheme .hljs-number,
+  .d2h-auto-color-scheme .hljs-operator,
+  .d2h-auto-color-scheme .hljs-selector-attr,
+  .d2h-auto-color-scheme .hljs-selector-class,
+  .d2h-auto-color-scheme .hljs-selector-id,
+  .d2h-auto-color-scheme .hljs-variable {
+    color: #79c0ff;
+  }
+  .d2h-auto-color-scheme .hljs-meta .hljs-string,
+  .d2h-auto-color-scheme .hljs-regexp,
+  .d2h-auto-color-scheme .hljs-string {
+    color: #a5d6ff;
+  }
+  .d2h-auto-color-scheme .hljs-built_in,
+  .d2h-auto-color-scheme .hljs-symbol {
+    color: #ffa657;
+  }
+  .d2h-auto-color-scheme .hljs-code,
+  .d2h-auto-color-scheme .hljs-comment,
+  .d2h-auto-color-scheme .hljs-formula {
+    color: #8b949e;
+  }
+  .d2h-auto-color-scheme .hljs-name,
+  .d2h-auto-color-scheme .hljs-quote,
+  .d2h-auto-color-scheme .hljs-selector-pseudo,
+  .d2h-auto-color-scheme .hljs-selector-tag {
+    color: #7ee787;
+  }
+  .d2h-auto-color-scheme .hljs-subst {
+    color: #c9d1d9;
+  }
+  .d2h-auto-color-scheme .hljs-section {
+    color: #1f6feb;
+    font-weight: 700;
+  }
+  .d2h-auto-color-scheme .hljs-bullet {
+    color: #f2cc60;
+  }
+  .d2h-auto-color-scheme .hljs-emphasis {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+  .d2h-auto-color-scheme .hljs-strong {
+    color: #c9d1d9;
+    font-weight: 700;
+  }
+  .d2h-auto-color-scheme .hljs-addition {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+  .d2h-auto-color-scheme .hljs-deletion {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .d2h-auto-color-scheme .hljs {
+    color: #24292e;
+  }
+  .d2h-auto-color-scheme .hljs-doctag,
+  .d2h-auto-color-scheme .hljs-keyword,
+  .d2h-auto-color-scheme .hljs-meta .hljs-keyword,
+  .d2h-auto-color-scheme .hljs-template-tag,
+  .d2h-auto-color-scheme .hljs-template-variable,
+  .d2h-auto-color-scheme .hljs-type,
+  .d2h-auto-color-scheme .hljs-variable.language_ {
+    color: #d73a49;
+  }
+  .d2h-auto-color-scheme .hljs-title,
+  .d2h-auto-color-scheme .hljs-title.class_,
+  .d2h-auto-color-scheme .hljs-title.class_.inherited__,
+  .d2h-auto-color-scheme .hljs-title.function_ {
+    color: #6f42c1;
+  }
+  .d2h-auto-color-scheme .hljs-attr,
+  .d2h-auto-color-scheme .hljs-attribute,
+  .d2h-auto-color-scheme .hljs-literal,
+  .d2h-auto-color-scheme .hljs-meta,
+  .d2h-auto-color-scheme .hljs-number,
+  .d2h-auto-color-scheme .hljs-operator,
+  .d2h-auto-color-scheme .hljs-selector-attr,
+  .d2h-auto-color-scheme .hljs-selector-class,
+  .d2h-auto-color-scheme .hljs-selector-id,
+  .d2h-auto-color-scheme .hljs-variable {
+    color: #005cc5;
+  }
+  .d2h-auto-color-scheme .hljs-meta .hljs-string,
+  .d2h-auto-color-scheme .hljs-regexp,
+  .d2h-auto-color-scheme .hljs-string {
+    color: #032f62;
+  }
+  .d2h-auto-color-scheme .hljs-built_in,
+  .d2h-auto-color-scheme .hljs-symbol {
+    color: #e36209;
+  }
+  .d2h-auto-color-scheme .hljs-code,
+  .d2h-auto-color-scheme .hljs-comment,
+  .d2h-auto-color-scheme .hljs-formula {
+    color: #6a737d;
+  }
+  .d2h-auto-color-scheme .hljs-name,
+  .d2h-auto-color-scheme .hljs-quote,
+  .d2h-auto-color-scheme .hljs-selector-pseudo,
+  .d2h-auto-color-scheme .hljs-selector-tag {
+    color: #22863a;
+  }
+  .d2h-auto-color-scheme .hljs-subst {
+    color: #24292e;
+  }
+  .d2h-auto-color-scheme .hljs-section {
+    color: #005cc5;
+    font-weight: 700;
+  }
+  .d2h-auto-color-scheme .hljs-bullet {
+    color: #735c0f;
+  }
+  .d2h-auto-color-scheme .hljs-emphasis {
+    color: #24292e;
+    font-style: italic;
+  }
+  .d2h-auto-color-scheme .hljs-strong {
+    color: #24292e;
+    font-weight: 700;
+  }
+  .d2h-auto-color-scheme .hljs-addition {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+  .d2h-auto-color-scheme .hljs-deletion {
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+}

From f7aacc4fc01e1bae878b6d76271bdd52288dc5dd Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 19 Sep 2023 20:54:19 -0500
Subject: [PATCH 33/36] darken header

---
 src/ui/css/diff2html.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 21c4b3ff..528cd93f 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -52,7 +52,7 @@
 
   --d2h-dark-line-border-color: #5a5c51;
 
-  --d2h-dark-file-header-bg-color: #4f5146;
+  --d2h-dark-file-header-bg-color: #272823;
   --d2h-dark-file-header-border-color: #3f4136;
 
   --d2h-dark-empty-placeholder-bg-color: #494b40;

From d425892b6118d36a3cfb73d81de4606f82826e0d Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Wed, 20 Sep 2023 08:02:40 -0500
Subject: [PATCH 34/36] Remove duplicate "should"s

---
 src/__tests__/file-list-renderer-tests.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/file-list-renderer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
index 851f980a..41a7cd5a 100644
--- a/src/__tests__/file-list-renderer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -178,7 +178,7 @@ describe('FileListRenderer', () => {
     });
 
     describe('with dark colorScheme', () => {
-      it('should should include dark colorScheme', () => {
+      it('should include dark colorScheme', () => {
         const hoganUtils = new HoganJsUtils({});
         const fileListRenderer = new FileListRenderer(hoganUtils, {
           colorScheme: ColorSchemeType.DARK,
@@ -224,7 +224,7 @@ describe('FileListRenderer', () => {
     });
 
     describe('with auto colorScheme', () => {
-      it('should should include auto colorScheme', () => {
+      it('should include auto colorScheme', () => {
         const hoganUtils = new HoganJsUtils({});
         const fileListRenderer = new FileListRenderer(hoganUtils, {
           colorScheme: ColorSchemeType.AUTO,

From 987d8cb65cd25bd08fc360a3955d8bdf66681ccf Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 26 Sep 2023 17:47:59 -0500
Subject: [PATCH 35/36] update to GitHub dark colors

---
 src/ui/css/diff2html.css | 48 +++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css
index 528cd93f..5c515ac8 100644
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@@ -44,39 +44,39 @@
    * Dark Color Scheme
    */
 
-  --d2h-dark-color: #e6edf3;
-  --d2h-dark-bg-color: #171814;
-  --d2h-dark-border-color: #494b40;
+  --d2h-dark-color: rgb(230, 237, 243);
+  --d2h-dark-bg-color: rgb(13, 17, 23);
+  --d2h-dark-border-color: rgb(48, 54, 61);
 
-  --d2h-dark-dim-color: #929292;
+  --d2h-dark-dim-color: rgb(110, 118, 129);
 
-  --d2h-dark-line-border-color: #5a5c51;
+  --d2h-dark-line-border-color: rgb(33, 38, 45);
 
-  --d2h-dark-file-header-bg-color: #272823;
-  --d2h-dark-file-header-border-color: #3f4136;
+  --d2h-dark-file-header-bg-color: rgb(22, 27, 34);
+  --d2h-dark-file-header-border-color: rgb(48, 54, 61);
 
-  --d2h-dark-empty-placeholder-bg-color: #494b40;
-  --d2h-dark-empty-placeholder-border-color: #66695a;
+  --d2h-dark-empty-placeholder-bg-color: #rgba(110, 118, 129, 0.1);
+  --d2h-dark-empty-placeholder-border-color: rgb(48, 54, 61);
 
-  --d2h-dark-selected-color: #00489f;
+  --d2h-dark-selected-color: rgba(56, 139, 253, 0.1);
 
-  --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-ins-bg-color: rgba(46, 160, 67, 0.15);
+  --d2h-dark-ins-border-color: rgba(46, 160, 67, 0.4);
+  --d2h-dark-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
+  --d2h-dark-ins-label-color: rgb(63, 185, 80);
 
-  --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-del-bg-color: rgba(248, 81, 73, 0.1);
+  --d2h-dark-del-border-color: rgba(248, 81, 73, 0.4);
+  --d2h-dark-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
+  --d2h-dark-del-label-color: rgb(248, 81, 73);
 
-  --d2h-dark-change-del-color: #9b7707;
-  --d2h-dark-change-ins-color: #366b36;
+  --d2h-dark-change-del-color: rgba(210, 153, 34, 0.2);
+  --d2h-dark-change-ins-color: rgba(46, 160, 67, 0.25);
 
-  --d2h-dark-info-bg-color: #32342c;
-  --d2h-dark-info-border-color: #4f5146;
+  --d2h-dark-info-bg-color: rgba(56, 139, 253, 0.1);
+  --d2h-dark-info-border-color: rgba(56, 139, 253, 0.4);
 
-  --d2h-dark-change-label-color: #d0b44c;
+  --d2h-dark-change-label-color: rgb(210, 153, 34);
   --d2h-dark-moved-label-color: #3572b0;
 }
 
@@ -497,6 +497,8 @@
 }
 
 .d2h-dark-color-scheme .d2h-code-side-linenumber {
+  background-color: var(--d2h-dark-bg-color);
+  color: var(--d2h-dark-dim-color);
   border-color: var(--d2h-dark-line-border-color);
 }
 

From 7410d25ee4ae1544a7b82f676a69867c0cc23b5d Mon Sep 17 00:00:00 2001
From: Jordan Welch <jordanhwelch@gmail.com>
Date: Tue, 26 Sep 2023 18:06:06 -0500
Subject: [PATCH 36/36] Use d2h-light-color-scheme for light

---
 src/__tests__/diff2html-tests.ts            | 26 ++++++++++-----------
 src/__tests__/file-list-renderer-tests.ts   |  2 +-
 src/__tests__/line-by-line-tests.ts         |  6 ++---
 src/__tests__/side-by-side-printer-tests.ts |  6 ++---
 src/render-utils.ts                         |  7 +++---
 src/templates/file-summary-wrapper.mustache |  2 +-
 src/templates/generic-wrapper.mustache      |  2 +-
 7 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/__tests__/diff2html-tests.ts b/src/__tests__/diff2html-tests.ts
index 12bb698a..d9e4e8c3 100644
--- a/src/__tests__/diff2html-tests.ts
+++ b/src/__tests__/diff2html-tests.ts
@@ -205,7 +205,7 @@ describe('Diff2Html', () => {
     it('should generate pretty line by line html from diff', () => {
       const result = html(diffExample1, { drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -262,7 +262,7 @@ describe('Diff2Html', () => {
     it('should generate pretty line by line html from json', () => {
       const result = html(jsonExample1, { drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -319,7 +319,7 @@ describe('Diff2Html', () => {
     it('should generate pretty diff with files summary', () => {
       const result = html(diffExample1, { drawFileList: true });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper">
+        "<div class="d2h-file-list-wrapper d2h-light-color-scheme">
             <div class="d2h-file-list-header">
                 <span class="d2h-file-list-title">Files changed (1)</span>
                 <a class="d2h-file-switch d2h-hide">hide</a>
@@ -339,7 +339,7 @@ describe('Diff2Html', () => {
             </span>
         </li>
             </ol>
-        </div><div class="d2h-wrapper">
+        </div><div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -396,7 +396,7 @@ describe('Diff2Html', () => {
     it('should generate pretty side by side html from diff', () => {
       const result = html(diffExample1, { outputFormat: OutputFormatType.SIDE_BY_SIDE, drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
@@ -467,7 +467,7 @@ describe('Diff2Html', () => {
     it('should generate pretty side by side html from json', () => {
       const result = html(jsonExample1, { outputFormat: OutputFormatType.SIDE_BY_SIDE, drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
@@ -538,7 +538,7 @@ describe('Diff2Html', () => {
     it('should generate pretty side by side html from diff 2', () => {
       const result = html(diffExample1, { outputFormat: OutputFormatType.SIDE_BY_SIDE, drawFileList: true });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper">
+        "<div class="d2h-file-list-wrapper d2h-light-color-scheme">
             <div class="d2h-file-list-header">
                 <span class="d2h-file-list-title">Files changed (1)</span>
                 <a class="d2h-file-switch d2h-hide">hide</a>
@@ -558,7 +558,7 @@ describe('Diff2Html', () => {
             </span>
         </li>
             </ol>
-        </div><div class="d2h-wrapper">
+        </div><div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
@@ -652,7 +652,7 @@ describe('Diff2Html', () => {
         ' \n';
       const result = html(diffExample2, { drawFileList: false });
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-211439" class="d2h-file-wrapper" data-lang="md">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -878,7 +878,7 @@ describe('Diff2Html', () => {
 
       const result = html(diff);
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper">
+        "<div class="d2h-file-list-wrapper d2h-light-color-scheme">
             <div class="d2h-file-list-header">
                 <span class="d2h-file-list-title">Files changed (1)</span>
                 <a class="d2h-file-switch d2h-hide">hide</a>
@@ -898,7 +898,7 @@ describe('Diff2Html', () => {
             </span>
         </li>
             </ol>
-        </div><div class="d2h-wrapper">
+        </div><div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-597266" class="d2h-file-wrapper" data-lang="html">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -980,7 +980,7 @@ describe('Diff2Html', () => {
       const result = html(diff);
       /* eslint-disable no-irregular-whitespace */
       expect(result).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper">
+        "<div class="d2h-file-list-wrapper d2h-light-color-scheme">
             <div class="d2h-file-list-header">
                 <span class="d2h-file-list-title">Files changed (1)</span>
                 <a class="d2h-file-switch d2h-hide">hide</a>
@@ -1000,7 +1000,7 @@ describe('Diff2Html', () => {
             </span>
         </li>
             </ol>
-        </div><div class="d2h-wrapper">
+        </div><div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-719103" class="d2h-file-wrapper" data-lang="js">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
diff --git a/src/__tests__/file-list-renderer-tests.ts b/src/__tests__/file-list-renderer-tests.ts
index 41a7cd5a..52c703b8 100644
--- a/src/__tests__/file-list-renderer-tests.ts
+++ b/src/__tests__/file-list-renderer-tests.ts
@@ -117,7 +117,7 @@ describe('FileListRenderer', () => {
       ];
       const fileHtml = fileListRenderer.render(files);
       expect(fileHtml).toMatchInlineSnapshot(`
-        "<div class="d2h-file-list-wrapper">
+        "<div class="d2h-file-list-wrapper d2h-light-color-scheme">
             <div class="d2h-file-list-header">
                 <span class="d2h-file-list-title">Files changed (4)</span>
                 <a class="d2h-file-switch d2h-hide">hide</a>
diff --git a/src/__tests__/line-by-line-tests.ts b/src/__tests__/line-by-line-tests.ts
index 4e1ae326..e8f5bff4 100644
--- a/src/__tests__/line-by-line-tests.ts
+++ b/src/__tests__/line-by-line-tests.ts
@@ -449,7 +449,7 @@ describe('LineByLineRenderer', () => {
       });
       const html = lineByLineRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -523,7 +523,7 @@ describe('LineByLineRenderer', () => {
       });
       const html = lineByLineRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
@@ -583,7 +583,7 @@ describe('LineByLineRenderer', () => {
       const lineByLineRenderer = new LineByLineRenderer(hoganUtils);
       const html = lineByLineRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
             <div class="d2h-file-header">
             <span class="d2h-file-name-wrapper">
diff --git a/src/__tests__/side-by-side-printer-tests.ts b/src/__tests__/side-by-side-printer-tests.ts
index 681022e1..ab886aba 100644
--- a/src/__tests__/side-by-side-printer-tests.ts
+++ b/src/__tests__/side-by-side-printer-tests.ts
@@ -278,7 +278,7 @@ describe('SideBySideRenderer', () => {
       const sideBySideRenderer = new SideBySideRenderer(hoganUtils, { matching: LineMatchingType.LINES });
       const html = sideBySideRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="txt">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
@@ -363,7 +363,7 @@ describe('SideBySideRenderer', () => {
       const sideBySideRenderer = new SideBySideRenderer(hoganUtils, {});
       const html = sideBySideRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
@@ -434,7 +434,7 @@ describe('SideBySideRenderer', () => {
       const sideBySideRenderer = new SideBySideRenderer(hoganUtils);
       const html = sideBySideRenderer.render(exampleJson);
       expect(html).toMatchInlineSnapshot(`
-        "<div class="d2h-wrapper">
+        "<div class="d2h-wrapper d2h-light-color-scheme">
             <div id="d2h-675094" class="d2h-file-wrapper" data-lang="js">
             <div class="d2h-file-header">
               <span class="d2h-file-name-wrapper">
diff --git a/src/render-utils.ts b/src/render-utils.ts
index 27095253..f557796e 100644
--- a/src/render-utils.ts
+++ b/src/render-utils.ts
@@ -89,11 +89,12 @@ export function toCSSClass(lineType: LineType): CSSLineClass {
 export function colorSchemeToCss(colorScheme: ColorSchemeType): string {
   switch (colorScheme) {
     case ColorSchemeType.DARK:
-      return ' d2h-dark-color-scheme';
+      return 'd2h-dark-color-scheme';
     case ColorSchemeType.AUTO:
-      return ' d2h-auto-color-scheme';
+      return 'd2h-auto-color-scheme';
+    case ColorSchemeType.LIGHT:
     default:
-      return '';
+      return 'd2h-light-color-scheme';
   }
 }
 
diff --git a/src/templates/file-summary-wrapper.mustache b/src/templates/file-summary-wrapper.mustache
index 600f4a32..e0cb8975 100644
--- a/src/templates/file-summary-wrapper.mustache
+++ b/src/templates/file-summary-wrapper.mustache
@@ -1,4 +1,4 @@
-<div class="d2h-file-list-wrapper{{colorScheme}}">
+<div class="d2h-file-list-wrapper {{colorScheme}}">
     <div class="d2h-file-list-header">
         <span class="d2h-file-list-title">Files changed ({{filesNumber}})</span>
         <a class="d2h-file-switch d2h-hide">hide</a>
diff --git a/src/templates/generic-wrapper.mustache b/src/templates/generic-wrapper.mustache
index 613723bd..e186314f 100644
--- a/src/templates/generic-wrapper.mustache
+++ b/src/templates/generic-wrapper.mustache
@@ -1,3 +1,3 @@
-<div class="d2h-wrapper{{colorScheme}}">
+<div class="d2h-wrapper {{colorScheme}}">
     {{{content}}}
 </div>