Merge pull request #168 from rtfpessoa/daleyjem-feature/add-colorScheme

Add color scheme

Author: rtfpessoa

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`    |

src/__tests__/main-tests.ts

@@ -50,6 +50,7 @@ describe('cli', () => {
         maxLineSizeInBlockForComparison: 200,
         outputFormat: 'line-by-line',
         renderNothingWhenEmpty: false,
+        colorScheme: 'auto',
       },
       {
         diffyType: undefined,

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);

src/configuration.ts

@@ -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';

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

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-->