rtfpessoa · rtfpessoa · Jan 12, 2024 · Dec 27, 2023 · Dec 27, 2023 · Dec 27, 2023
diff --git a/README.md b/README.md
@@ -74,6 +74,7 @@ Usage: diff2html [ flags and/or options ] -- [git diff passthrough flags and opt
 | --fct | --fileContentToggle               | Adds a viewed checkbox to toggle file content                                                      | `true`, `false`              | `true`    |
 | --sc  | --synchronisedScroll              | Synchronised horizontal scroll                                                                     | `true`, `false`              | `true`    |
 | --hc  | --highlightCode                   | Highlight code                                                                                     | `true`, `false`              | `true`    |
+| --cs  | --colorScheme                     | Color scheme                                                                                       | `auto`, `dark`, `light`      | `auto`    |
 | --su  | --summary                         | Show files summary                                                                                 | `closed`, `open`, `hidden`   | `closed`  |
 | -d    | --diffStyle                       | Diff style                                                                                         | `word`, `char`               | `word`    |
 | --lm  | --matching                        | Diff line matching type                                                                            | `lines`, `words`, `none`     | `none`    |

diff --git a/package.json b/package.json
@@ -80,44 +80,44 @@
     ]
   },
   "dependencies": {
-    "clipboardy": "^3.0.0",
-    "diff2html": "^3.4.19",
+    "clipboardy": "^4.0.0",
+    "diff2html": "^3.4.47",
     "node-fetch": "^3.3.2",
-    "open": "^9.1.0",
+    "open": "^10.0.3",
     "yargs": "^17.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-typescript": "^7.22.5",
-    "@jest/globals": "^29.6.2",
-    "@types/hogan.js": "^3.0.1",
-    "@types/jest": "^29.5.3",
-    "@types/node": "20.4.8",
-    "@types/node-fetch": "^2.6.2",
-    "@types/request": "2.48.8",
-    "@typescript-eslint/eslint-plugin": "6.2.1",
-    "@typescript-eslint/parser": "6.2.1",
-    "babel-jest": "^29.6.2",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "2.28.0",
-    "eslint-plugin-jest": "27.2.3",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-typescript": "^7.23.3",
+    "@jest/globals": "^29.7.0",
+    "@types/hogan.js": "^3.0.5",
+    "@types/jest": "^29.5.11",
+    "@types/node": "20.11.0",
+    "@types/node-fetch": "^2.6.10",
+    "@types/request": "2.48.12",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
+    "babel-jest": "^29.7.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "27.6.3",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-optimize-regex": "1.2.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-sonarjs": "0.20.0",
+    "eslint-plugin-sonarjs": "0.23.0",
     "husky": "8.0.3",
     "is-ci-cli": "2.2.0",
-    "jest": "29.6.2",
-    "lint-staged": "13.2.3",
+    "jest": "29.7.0",
+    "lint-staged": "15.2.0",
     "markdown-toc": "^1.2.0",
-    "prettier": "3.0.1",
+    "prettier": "3.2.1",
     "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "typescript": "5.1.6"
+    "ts-node": "^10.9.2",
+    "typescript": "5.3.3"
   },
   "license": "MIT",
   "files": [

diff --git a/src/__tests__/main-tests.ts b/src/__tests__/main-tests.ts
@@ -50,6 +50,7 @@ describe('cli', () => {
         maxLineSizeInBlockForComparison: 200,
         outputFormat: 'line-by-line',
         renderNothingWhenEmpty: false,
+        colorScheme: 'auto',
       },
       {
         diffyType: undefined,

diff --git a/src/cli.ts b/src/cli.ts
@@ -13,9 +13,52 @@ import { put } from './http-utils.js';
 import * as log from './logger.js';
 import { Configuration, InputType, DiffyType } from './types.js';
 import * as utils from './utils.js';
+import { ColorSchemeType } from 'diff2html/lib/types.js';
 
 const defaultArgs = ['-M', '-C', 'HEAD'];
 
+const lightGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />`;
+const darkGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />`;
+const autoGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.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.9.0/styles/github-dark.min.css" media="screen and (prefers-color-scheme: dark)" />`;
+
+const lightBaseStyle = `<style>
+body {
+  background-color: var(--d2h-bg-color);
+}
+h1 {
+  color: var(--d2h-light-color);
+}
+</style>`;
+
+const darkBaseStyle = `<style>
+body {
+  background-color: rgb(13, 17, 23);
+}
+h1 {
+  color: var(--d2h-dark-color);
+}
+</style>`;
+
+const autoBaseStyle = `<style>
+@media screen and (prefers-color-scheme: light) {
+  body {
+    background-color: var(--d2h-bg-color);
+  }
+  h1 {
+    color: var(--d2h-light-color);
+  }
+}
+@media screen and (prefers-color-scheme: dark) {
+  body {
+    background-color: rgb(13, 17, 23);
+  }
+  h1 {
+    color: var(--d2h-dark-color);
+  }
+}
+</style>`;
+
 function generateGitDiffArgs(gitArgsArr: string[], ignore: string[]): string[] {
   const gitDiffArgs: string[] = ['diff'];
 
@@ -41,7 +84,7 @@ function runGitDiff(gitArgsArr: string[], ignore: string[]): string {
   return utils.execute('git', gitDiffArgs);
 }
 
-function prepareHTML(diffHTMLContent: string, config: Configuration): string {
+function prepareHTML(diffHTMLContent: string, config: Configuration, colorScheme?: ColorSchemeType): string {
   const template = utils.readFile(config.htmlWrapperTemplate);
 
   const diff2htmlPath = path.join(path.dirname(require.resolve('diff2html')), '..');
@@ -55,13 +98,21 @@ function prepareHTML(diffHTMLContent: string, config: Configuration): string {
   const pageTitle = config.pageTitle;
   const pageHeader = config.pageHeader;
 
+  const gitHubTheme =
+    colorScheme === 'light' ? lightGitHubTheme : colorScheme === 'dark' ? darkGitHubTheme : autoGitHubTheme;
+
+  const baseStyle = colorScheme === 'light' ? lightBaseStyle : colorScheme === 'dark' ? darkBaseStyle : autoBaseStyle;
+
   /* HACK:
    *   Replace needs to receive a function as the second argument to perform an exact replacement.
    *     This will avoid the replacements from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter
    */
   return [
     { searchValue: '<!--diff2html-title-->', replaceValue: pageTitle },
-    { searchValue: '<!--diff2html-css-->', replaceValue: `<style>\n${cssContent}\n</style>` },
+    {
+      searchValue: '<!--diff2html-css-->',
+      replaceValue: `${baseStyle}\n${gitHubTheme}\n<style>\n${cssContent}\n</style>`,
+    },
     { searchValue: '<!--diff2html-js-ui-->', replaceValue: `<script>\n${jsUiContent}\n</script>` },
     {
       searchValue: '//diff2html-fileListToggle',
@@ -118,7 +169,7 @@ export function getOutput(options: Diff2HtmlConfig, config: Configuration, input
   switch (config.formatType) {
     case 'html': {
       const htmlContent = html(diffJson, { ...options });
-      return prepareHTML(htmlContent, config);
+      return prepareHTML(htmlContent, config, options.colorScheme);
     }
     case 'json': {
       return JSON.stringify(diffJson);

diff --git a/src/configuration.ts b/src/configuration.ts
@@ -14,18 +14,18 @@ export function parseArgv(argv: Argv): [Diff2HtmlConfig, Configuration] {
       argv.style === 'side'
         ? OutputFormatType.SIDE_BY_SIDE
         : argv.style === 'line'
-        ? OutputFormatType.LINE_BY_LINE
-        : undefined,
+          ? OutputFormatType.LINE_BY_LINE
+          : undefined,
     diffStyle:
       argv.diffStyle === 'char' ? DiffStyleType.CHAR : argv.diffStyle === 'word' ? DiffStyleType.WORD : undefined,
     matching:
       argv.matching === 'lines'
         ? LineMatchingType.LINES
         : argv.matching === 'words'
-        ? LineMatchingType.WORDS
-        : argv.matching === 'none'
-        ? LineMatchingType.NONE
-        : undefined,
+          ? LineMatchingType.WORDS
+          : argv.matching === 'none'
+            ? LineMatchingType.NONE
+            : undefined,
     drawFileList: argv.summary !== 'hidden',
     matchWordsThreshold: argv.matchWordsThreshold,
     matchingMaxComparisons: argv.matchingMaxComparisons,
@@ -34,6 +34,7 @@ export function parseArgv(argv: Argv): [Diff2HtmlConfig, Configuration] {
     renderNothingWhenEmpty: argv.renderNothingWhenEmpty,
     maxLineSizeInBlockForComparison: argv.maxLineSizeInBlockForComparison,
     maxLineLengthHighlight: argv.maxLineLengthHighlight,
+    colorScheme: argv.colorScheme,
   };
 
   const defaultPageTitle = 'Diff to HTML by rtfpessoa';

diff --git a/src/yargs.ts b/src/yargs.ts
@@ -1,4 +1,5 @@
 import yargs from 'yargs';
+import { ColorSchemeType } from 'diff2html/lib/types.js';
 
 import {
   StyleType,
@@ -35,6 +36,7 @@ export type Argv = {
   title?: string;
   ignore?: string[];
   extraArguments: string[];
+  colorScheme: ColorSchemeType;
 };
 
 const defaults: Argv = {
@@ -59,6 +61,7 @@ const defaults: Argv = {
   htmlWrapperTemplate: undefined,
   title: undefined,
   extraArguments: [],
+  colorScheme: ColorSchemeType.AUTO,
 };
 
 type ArgvChoices = {
@@ -70,6 +73,7 @@ type ArgvChoices = {
   input: ReadonlyArray<InputType>;
   output: ReadonlyArray<OutputType>;
   diffy: ReadonlyArray<DiffyType>;
+  colorScheme: ReadonlyArray<ColorSchemeType>;
 };
 
 const choices: ArgvChoices = {
@@ -81,6 +85,7 @@ const choices: ArgvChoices = {
   input: ['file', 'command', 'stdin'],
   output: ['preview', 'stdout'],
   diffy: ['browser', 'pbcopy', 'print'],
+  colorScheme: [ColorSchemeType.AUTO, ColorSchemeType.DARK, ColorSchemeType.LIGHT],
 };
 
 export async function setup(): Promise<Argv> {
@@ -113,6 +118,12 @@ export async function setup(): Promise<Argv> {
       type: 'boolean',
       default: defaults.highlightCode,
     })
+    .option('colorScheme', {
+      alias: 'cs',
+      describe: 'Color scheme of HTML output',
+      choices: choices.colorScheme,
+      default: defaults.colorScheme,
+    })
     .option('summary', {
       alias: 'su',
       describe: 'Show files summary',

diff --git a/template.html b/template.html
@@ -9,8 +9,6 @@
       Author: rtfpessoa
     -->
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
-
     <!--diff2html-css-->
 
     <!--diff2html-js-ui-->

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "moduleResolution": "NodeNext",
     "target": "ESNext",
-    "module": "ESNext",
+    "module": "NodeNext",
     "lib": ["ESNext"],
     "jsx": "preserve",
     "rootDir": "src",