Add colorscheme variable to wrapper

Author: JHWelch

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>"
+        `);
+      });
+    });
   });
 });

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 {

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,13 +45,15 @@ export interface RenderConfig {
   matchWordsThreshold?: number;
   maxLineLengthHighlight?: number;
   diffStyle?: DiffStyleType;
+  colorScheme?: ColorSchemeType;
 }
 
 export const defaultRenderConfig = {
   matching: LineMatchingType.NONE,
   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
  */

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 {

src/templates/generic-wrapper.mustache

@@ -1,3 +1,3 @@
-<div class="d2h-wrapper">
+<div class="d2h-wrapper{{colorScheme}}">
     {{{content}}}
 </div>

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',
+}