fix artifacts

force release
Merge pull request #551 from rtfpessoa/bump-dependencies
2024-12-23 23:17:59 +00:00 · 2024-12-23 23:08:34 +00:00 · 2024-12-23 22:55:42 +00:00 · 2024-12-23 22:52:07 +00:00 · 2024-12-23 22:49:18 +00:00 · 2024-12-23 22:41:43 +00:00
45 changed files with 19910 additions and 8029 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,58 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-    document: 'readonly',
-    navigator: 'readonly',
-    window: 'readonly',
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:json/recommended',
-    'plugin:promise/recommended',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-    'plugin:node/recommended',
-    'plugin:sonarjs/recommended',
-    'plugin:jest/recommended',
-    'plugin:jest/style',
-    'prettier',
-  ],
-  plugins: ['@typescript-eslint', 'json', 'promise', 'import', 'node', 'sonarjs', 'jest', 'optimize-regex'],
-  rules: {
-    // Enable
-    'optimize-regex/optimize-regex': 'error',
-    // Hack: For some reason we need pass again the extensions
-    'node/no-missing-import': [
-      'error',
-      {
-        tryExtensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-      },
-    ],
-    // Disable
-    // https://github.com/benmosher/eslint-plugin-import/issues/1446
-    'import/named': 'off',
-    // We don't need this since we are using transpilation
-    'node/no-unsupported-features/es-syntax': 'off',
-    'no-process-exit': 'off',
-    // Too verbose
-    'sonarjs/no-duplicate-string': 'off',
-    // Too verbose
-    'sonarjs/cognitive-complexity': 'off',
-    // Too verbose
-    'sonarjs/no-nested-template-literals': 'off',
-  },
-};
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -19,7 +19,7 @@ jobs:
    environment: 'production'
    steps:
      - name: Download docs
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
        with:
          name: docs
          path: docs/
--- a/.github/workflows/test-and-publish.yml
+++ b/.github/workflows/test-and-publish.yml
@ -25,7 +25,7 @@ jobs:
        run: |
          export NEXT_VERSION="$(/bin/git-version --folder=$PWD --release-branch=master)"
          echo "Next version is ${NEXT_VERSION}"
-          echo "${NEXT_VERSION}" > .version
+          echo "${NEXT_VERSION}" > next-version.txt
          echo "version=${NEXT_VERSION}" >> $GITHUB_ENV
      - name: Get next npm tag name
        run: |
@ -37,22 +37,22 @@ jobs:
            export PUBLISH_TAG="pr"
          fi
          echo "Next tag is ${PUBLISH_TAG}"
-          echo "${PUBLISH_TAG}" > .tag
+          echo "${PUBLISH_TAG}" > publish-tag.txt
      - name: Upload versions
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
        with:
          name: versions
          if-no-files-found: error
          path: |
-            .version
-            .tag
+            next-version.txt
+            publish-tag.txt

  build:
    runs-on: ubuntu-latest
    needs: [version]
    strategy:
      matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x, 22.x]
    steps:
      - uses: actions/checkout@v3
        with:
@ -61,17 +61,17 @@ jobs:
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
      - name: Log environment setup
        run: |
          node -v
-            yarn -v
+          npm -v
      - name: Install dependencies
-        run: yarn install --ignore-engines
+        run: npm install
      - name: Build templates
-        run: yarn run build:templates
+        run: npm run build:templates
      - name: Build library
-        run: yarn run build
+        run: npm run build

  publish:
    runs-on: ubuntu-latest
@ -82,22 +82,27 @@ jobs:
        with:
          fetch-depth: 0
      - name: Download versions
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
        with:
          name: versions
      - name: Store version
-        run: echo "version=$(cat .version)" >> $GITHUB_ENV
+        run: echo "version=$(cat next-version.txt)" >> $GITHUB_ENV
      - name: Configure Git
        run: |
          git config user.email "gh-actions@users.noreply.github.com"
          git config user.name "GitHub Actions"
+      - name: Tag commit
+        uses: tvdias/github-tagger@v0.0.1
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          tag: '${{ env.version }}'
      - name: Install dependencies
-        run: yarn
+        run: npm install
      - uses: actions/setup-node@v3
        with:
          registry-url: 'https://registry.npmjs.org'
-          node-version: '18.x'
-      - name: Configure Yarn version
+          node-version: '22.x'
+      - name: Configure NPM version
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: |
@ -107,19 +112,17 @@ jobs:
          echo "registry=https://registry.npmjs.org/" >> .npmrc
          echo "access=public" >> .npmrc
          echo "save-exact=true" >> .npmrc
-            yarn config set version-tag-prefix ""
-            yarn config set version-git-message "Release version %s"
      - name: Version package
        run: |
          # Update version in packages to publish
-            yarn version --non-interactive --new-version $(cat .version)
+          npm version $(cat next-version.txt) -m "Release version %s"
      - name: Publish to NPM
-        run: yarn publish --tag $(cat .tag) --non-interactive --new-version $(cat .version)
+        run: npm publish --tag $(cat publish-tag.txt)
      - uses: actions/setup-node@v3
        with:
-          node-version: '18.x'
+          node-version: '22.x'
          registry-url: 'https://npm.pkg.github.com'
-      - name: Configure Yarn version
+      - name: Configure NPM version
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
@ -129,27 +132,16 @@ jobs:
          echo "@rtfpessoa:registry=https://npm.pkg.github.com/" >> .npmrc
          echo "access=public" >> .npmrc
          echo "save-exact=true" >> .npmrc
-            yarn config set version-tag-prefix ""
-            yarn config set version-git-message "Release version %s"
-      - name: Version package
-        run: |
-            # Update version in packages to publish
-            yarn version --non-interactive --new-version $(cat .version)
      - name: Publish to GPR
        run: |
          # HACK: Override npm package name to be able to publish in GitHub
          sed -i 's/^  "name":.*/  "name": "@rtfpessoa\/diff2html",/g' package.json
-            echo "Going to publish version $(cat .version) to GitHub"
-            yarn publish --tag $(cat .tag) --non-interactive --new-version $(cat .version)
+          echo "Going to publish version $(cat next-version.txt) to GitHub"
+          npm publish --tag $(cat publish-tag.txt)
          # HACK: Restore npm package name
          sed -i 's/^  "name":.*/  "name": "diff2html",/g' package.json
-      - name: Tag commit
-        uses: tvdias/github-tagger@v0.0.1
-        with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          tag: "${{ env.version }}"
      - name: Upload docs
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
        with:
          name: docs
          if-no-files-found: error
--- a/.gitignore
+++ b/.gitignore
@ -29,9 +29,18 @@ bower_components/
 # Terraform
 /terraform/.terraform

-/_target/
+# Compiled templates
 /src/diff2html-templates.*
+
+# Compiled website
 /docs/
+
+# Bundles temporary typescript files compiled by webpack
+/bundles-out/
+
+# Web bundles
 /bundles/
+# CommonJS library
 /lib/
+# ESNext library
 /lib-esm/
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"

-npx lint-staged
+npm run lint:staged
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -10,9 +10,9 @@

 - Before sending a pull request make sure your code is tested.

- Before sending a pull request for a feature, be sure to run tests with `yarn test`.
+- Before sending a pull request for a feature, be sure to run tests with `npm run test`.

- Use the same coding style as the rest of the codebase, most of the check can be performed with `yarn run lint`.
+- Use the same coding style as the rest of the codebase, most of the check can be performed with `npm run run lint`.

 - Use `git rebase` (not `git merge`) to sync your work from time to time with the master branch.

--- a/README.md
+++ b/README.md
@ -1,23 +1,20 @@
 # diff2html

-[![Codacy Quality Badge](https://api.codacy.com/project/badge/Grade/06412dc3f5a14f568778d0db8a1f7dc8)](https://www.codacy.com/app/rtfpessoa/diff2html?utm_source=github.com&utm_medium=referral&utm_content=rtfpessoa/diff2html&utm_campaign=Badge_Grade)
-[![Codacy Coverage Badge](https://api.codacy.com/project/badge/Coverage/06412dc3f5a14f568778d0db8a1f7dc8)](https://www.codacy.com/app/rtfpessoa/diff2html?utm_source=github.com&utm_medium=referral&utm_content=rtfpessoa/diff2html&utm_campaign=Badge_Coverage)
-[![CircleCI](https://circleci.com/gh/rtfpessoa/diff2html.svg?style=svg)](https://circleci.com/gh/rtfpessoa/diff2html)
+[![npm](https://img.shields.io/npm/v/diff2html)](https://www.npmjs.com/package/diff2html)
+[![node](https://img.shields.io/node/v/diff2html)](https://www.npmjs.com/package/diff2html)
+[![npm](https://img.shields.io/npm/l/diff2html)](https://www.npmjs.com/package/diff2html)
+[![GitHub Actions](https://github.com/rtfpessoa/diff2html/actions/workflows/release.yml/badge.svg)](https://github.com/rtfpessoa/diff2html/actions/workflows/release.yml)
+
+[![npm weekly downloads](https://img.shields.io/npm/dw/diff2html)](https://www.npmjs.com/package/diff2html)
+[![npm monthly downloads](https://img.shields.io/npm/dm/diff2html)](https://www.npmjs.com/package/diff2html)
+[![npm yearly downloads](https://img.shields.io/npm/dy/diff2html)](https://www.npmjs.com/package/diff2html)
+[![npm downloads](https://img.shields.io/npm/dt/diff2html)](https://www.npmjs.com/package/diff2html)

-[![npm](https://img.shields.io/npm/v/diff2html?style=flat)](https://www.npmjs.com/package/diff2html)
-[![Dependency Status](https://david-dm.org/rtfpessoa/diff2html.svg)](https://david-dm.org/rtfpessoa/diff2html)
-[![devDependency Status](https://david-dm.org/rtfpessoa/diff2html/dev-status.svg)](https://david-dm.org/rtfpessoa/diff2html#info=devDependencies)
 [![jsdelivr CDN Downloads](https://data.jsdelivr.com/v1/package/npm/diff2html/badge)](https://www.jsdelivr.com/package/npm/diff2html)
-
-[![node](https://img.shields.io/node/v/diff2html.svg)]() [![npm](https://img.shields.io/npm/l/diff2html.svg)]()
-[![npm](https://img.shields.io/npm/dm/diff2html.svg)](https://www.npmjs.com/package/diff2html)
-[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
-[![Gitter](https://badges.gitter.im/rtfpessoa/diff2html.svg)](https://gitter.im/rtfpessoa/diff2html?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange)](#contributors)

 diff2html generates pretty HTML diffs from git diff or unified diff output.

-[![NPM](https://nodei.co/npm/diff2html.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/diff2html/)
-
 ## Table of Contents

 <!-- toc -->
@ -204,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 -->
@ -230,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.
@ -256,7 +268,7 @@ document.addEventListener('DOMContentLoaded', () => {
 #### Example with plain HTML+CSS+JS

 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
  <head>
    <meta charset="utf-8" />
@ -309,7 +321,7 @@ import { Controller } from '@hotwired/stimulus';

 import { Diff2HtmlUI, Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';

-// Requires `yarn add highlight.js`
+// Requires `npm install highlight.js`
 import 'highlight.js/styles/github.css';
 import 'diff2html/bundles/css/diff2html.min.css';

@ -378,7 +390,7 @@ The HTML output accepts a Javascript object with configuration. Possible options
  `false`
 - `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is
  `2500`
- `maxLineSizeInBlockForComparison`: maximum number os characters of the bigger line in a block to apply comparison,
+- `maxLineSizeInBlockForComparison`: maximum number of characters of the bigger line in a block to apply comparison,
  default is `200`
 - `compiledTemplates`: object ([Hogan.js](https://github.com/twitter/hogan.js/) template values) with previously
  compiled templates to replace parts of the html, default is `{}`. For example:
@ -389,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

@ -456,7 +470,7 @@ export class AppDiffComponent implements OnInit {
 - HTML

 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <title>diff2html</title>
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -0,0 +1,77 @@
+import globals from 'globals';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginJest from 'eslint-plugin-jest';
+import json from '@eslint/json';
+import pluginPromise from 'eslint-plugin-promise';
+
+export default [
+  { ...eslint.configs.recommended, files: ['src/**/*.{js,mjs,cjs,ts}'] },
+  ...tseslint.configs.recommended,
+  // ...tseslint.configs.recommendedTypeChecked,
+  // ...tseslint.configs.strict,
+  // ...tseslint.configs.stylistic,
+  // ...tseslint.configs.strictTypeChecked,
+  // ...tseslint.configs.stylisticTypeChecked,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  pluginPromise.configs['flat/recommended'],
+  {
+    plugins: {
+      json,
+    },
+    files: ['**/*.json'],
+    language: 'json/json',
+    rules: {
+      'json/no-duplicate-keys': 'error',
+    },
+  },
+  {
+    ...pluginJest.configs['flat/recommended'],
+    ...pluginJest.configs['flat/style'],
+    files: ['src/__tests__/**/*tests.ts'],
+    plugins: { jest: pluginJest },
+    languageOptions: {
+      globals: pluginJest.environments.globals.globals,
+    },
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2025,
+        Atomics: 'readonly',
+        SharedArrayBuffer: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        window: 'readonly',
+      },
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: './',
+      },
+    },
+  },
+  {
+    ignores: ['src/diff2html-templates.*', 'coverage/', 'docs/', 'bundles-out/', 'bundles/', 'lib/', 'lib-esm/'],
+  },
+  {
+    ...tseslint.configs.disableTypeChecked,
+    files: ['**/*.{js,mjs,cjs}'],
+  },
+];
--- a/jest.config.js
+++ b/jest.config.js
@ -19,4 +19,5 @@ module.exports = {
      lines: 93,
    },
  },
+  prettierPath: require.resolve('prettier-2'),
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -35,35 +35,35 @@
    "node": ">=12"
  },
  "scripts": {
-    "eslint": "eslint --ignore-path .gitignore \"**/*.{js,jsx,ts,tsx,json}\"",
-    "lint:check": "yarn run eslint",
-    "lint:fix": "yarn run eslint --fix",
+    "lint:staged": "lint-staged",
+    "lint:check": "eslint",
+    "lint:fix": "eslint --fix",
    "prettier": "prettier --ignore-path .gitignore '**/*.+(js|jsx|ts|tsx|json|css|html|md|mdx)'",
-    "format:check": "yarn run prettier --check",
-    "format:fix": "yarn run prettier --write",
-    "build": "yarn run build:css && yarn run build:templates && yarn run build:es5 && yarn run build:esm && yarn run build:bundles && yarn run build:website",
-    "build:es5": "rm -rf lib; tsc -p tsconfig.json --outDir lib",
-    "build:esm": "rm -rf lib-esm; tsc -p tsconfig.json -m es6 --outDir lib-esm",
+    "format:check": "npm run prettier --check",
+    "format:fix": "npm run prettier --write",
+    "build": "npm run build:css && npm run build:templates && npm run build:commonjs && npm run build:esm && npm run build:bundles && npm run build:website",
+    "build:commonjs": "rm -rf lib; tsc -p tsconfig.json -m CommonJS --outDir lib",
+    "build:esm": "rm -rf lib-esm; tsc -p tsconfig.json -m ESNext --outDir lib-esm",
    "build:bundles": "rm -rf ./bundles/js; webpack --mode production --config webpack.bundles.ts",
    "build:css": "rm -rf ./bundles/css; postcss --config ./postcss.config.js --no-map -o ./bundles/css/diff2html.min.css ./src/ui/css/diff2html.css",
    "build:templates": "ts-node ./scripts/hulk.ts --wrapper ts --variable 'defaultTemplates' ./src/templates/*.mustache > ./src/diff2html-templates.ts",
    "build:website": "rm -rf docs; webpack --mode production --config webpack.website.ts",
-    "gen": "yarn run gen:toc",
+    "gen": "npm run gen:toc",
    "gen:toc-base": "markdown-toc --maxdepth 3 --bullets='-' -i",
-    "gen:toc": "yarn run gen:toc-base README.md",
+    "gen:toc": "npm run gen:toc-base README.md",
    "test": "is-ci 'test:coverage' 'test:watch'",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch",
    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
-    "coverage:open": "yarn run test:coverage && open ./coverage/index.html",
+    "coverage:open": "npm run test:coverage && open ./coverage/index.html",
    "coverage:push": "curl -Ls https://coverage.codacy.com/get.sh | bash",
-    "validate": "yarn run build:templates && yarn run format:check && yarn run lint:check && yarn run build && yarn run test:coverage",
-    "fix": "yarn run format:fix && yarn run lint:fix",
-    "start": "yarn run start:website",
-    "start:website": "webpack-dev-server --mode development --config webpack.website.ts",
-    "preversion": "yarn run validate",
+    "validate": "npm run build:templates && npm run format:check && npm run lint:check && npm run build && npm run test:coverage",
+    "fix": "npm run format:fix && npm run lint:fix",
+    "start": "npm run start:website",
+    "start:website": "webpack serve --mode development --config webpack.website.ts",
+    "preversion": "npm run validate",
    "version": "git add -A package.json",
-    "prepare": "husky install"
+    "prepare": "husky"
  },
  "main": "./lib/diff2html.js",
  "module": "./lib-esm/diff2html.js",
@ -77,68 +77,65 @@
      "prettier --write"
    ],
    "README.md": [
-      "yarn run gen:toc-base"
+      "npm run gen:toc-base"
    ]
  },
  "dependencies": {
-    "diff": "5.1.0",
+    "diff": "^7.0.0",
    "hogan.js": "3.0.2"
  },
  "optionalDependencies": {
-    "highlight.js": "11.6.0"
+    "highlight.js": "11.9.0"
  },
  "devDependencies": {
-    "@types/diff": "5.0.2",
-    "@types/hogan.js": "3.0.1",
-    "@types/jest": "29.2.0",
-    "@types/mkdirp": "1.0.2",
-    "@types/node": "18.11.3",
-    "@types/nopt": "3.0.29",
-    "@typescript-eslint/eslint-plugin": "5.40.1",
-    "@typescript-eslint/parser": "5.40.1",
+    "prettier-2": "npm:prettier@^2",
+    "@eslint/js": "^9.17.0",
+    "@eslint/json": "^0.9.0",
+    "@types/diff": "^6.0.0",
+    "@types/hogan.js": "3.0.5",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.2",
+    "@types/nopt": "3.0.32",
    "all-contributors-cli": "^6.24.0",
-    "autoprefixer": "10.4.12",
-    "bulma": "^0.9.4",
+    "autoprefixer": "^10.4.20",
+    "bulma": "^1.0.2",
    "clipboard": "2.0.11",
-    "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.1",
-    "cssnano": "5.1.13",
-    "eslint": "8.26.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "27.1.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.16.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "cssnano": "^7.0.6",
+    "eslint": "^9.17.0",
+    "eslint-plugin-jest": "28.10.0",
+    "eslint-plugin-promise": "^7.2.1",
    "file-loader": "6.2.0",
-    "handlebars": "4.7.7",
-    "handlebars-loader": "1.7.2",
-    "html-webpack-plugin": "5.5.0",
-    "husky": "^8.0.1",
+    "globals": "^15.14.0",
+    "handlebars": "4.7.8",
+    "handlebars-loader": "1.7.3",
+    "html-webpack-plugin": "^5.6.3",
+    "husky": "^9.1.7",
    "image-webpack-loader": "8.1.0",
    "is-ci-cli": "2.2.0",
-    "jest": "29.2.1",
-    "lint-staged": "13.0.3",
+    "jest": "29.7.0",
+    "lint-staged": "^15.2.11",
    "markdown-toc": "^1.2.0",
-    "mini-css-extract-plugin": "2.6.1",
-    "mkdirp": "1.0.4",
-    "nopt": "6.0.0",
-    "postcss": "8.4.18",
-    "postcss-cli": "10.0.0",
-    "postcss-import": "15.0.0",
-    "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.2",
-    "prettier": "2.7.1",
-    "ts-jest": "29.0.3",
-    "ts-loader": "9.4.1",
-    "ts-node": "10.9.1",
-    "typescript": "4.8.4",
+    "mini-css-extract-plugin": "^2.9.2",
+    "mkdirp": "3.0.1",
+    "nopt": "^8.0.0",
+    "postcss": "^8.4.49",
+    "postcss-cli": "11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^10.1.2",
+    "prettier": "^3.4.2",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "9.5.1",
+    "ts-node": "10.9.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
    "url-loader": "4.1.1",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0",
-    "whatwg-fetch": "3.6.2"
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0",
+    "whatwg-fetch": "3.6.20"
  },
  "resolutions": {
    "lodash": ">=4.17.20",
@ -151,7 +148,8 @@
    "trim-newlines": ">=3.0.1",
    "async": ">=2.6.4",
    "terser": ">=5.14.2",
-    "semver-regex": ">=4.0.5"
+    "semver-regex": ">=4.0.5",
+    "http-cache-semantics": ">=4.1.1"
  },
  "license": "MIT",
  "files": [
--- a/scripts/hulk.ts
+++ b/scripts/hulk.ts
@ -67,7 +67,7 @@ function extractFiles(files: string[]): string[] {
  `;

  if (options.version) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
    console.log(require('../package.json').version);
    process.exit(0);
  }
--- a/src/tests/diff-parser-tests.ts
+++ b/src/tests/diff-parser-tests.ts
@ -2,7 +2,6 @@ import { parse } from '../diff-parser';

 describe('DiffParser', () => {
  describe('generateDiffJson', () => {
-    // eslint-disable-next-line jest/expect-expect
    it('should parse unix with \n diff', () => {
      const diff =
        'diff --git a/sample b/sample\n' +
@ -52,7 +51,6 @@ describe('DiffParser', () => {
      `);
    });

-    // eslint-disable-next-line jest/expect-expect
    it('should parse windows with \r\n diff', () => {
      const diff =
        'diff --git a/sample b/sample\r\n' +
@ -102,7 +100,6 @@ describe('DiffParser', () => {
      `);
    });

-    // eslint-disable-next-line jest/expect-expect
    it('should parse old os x with \r diff', () => {
      const diff =
        'diff --git a/sample b/sample\r' +
@ -152,7 +149,6 @@ describe('DiffParser', () => {
      `);
    });

-    // eslint-disable-next-line jest/expect-expect
    it('should parse mixed eols diff', () => {
      const diff =
        'diff --git a/sample b/sample\n' +
@ -2427,5 +2423,96 @@ describe('DiffParser', () => {
        ]
      `);
    });
+
+    it('should parse unix diff with binary file', () => {
+      const diff =
+        'diff -ur a/htest.html b/htest.html\n' +
+        '--- a/htest.html        2023-01-10 09:43:04.284427636 +0800\n' +
+        '+++ b/htest.html        2023-01-10 09:43:10.308388990 +0800\n' +
+        '@@ -1 +1 @@\n' +
+        '-<a>test</a>\n' +
+        '+<a>new test</a>\n' +
+        'Binary files a/image.gif and b/image.gif differ\n' +
+        'diff -ur a/test.json b/test.json\n' +
+        '--- a/test.json 2023-01-10 09:43:07.832404870 +0800\n' +
+        '+++ b/test.json 2023-01-10 09:43:12.708373605 +0800\n' +
+        '@@ -1 +1 @@\n' +
+        '-{"list": [1, 2]}\n' +
+        '+{"list": [1, 2, 3]}';
+
+      const result = parse(diff);
+      expect(result).toMatchInlineSnapshot(`
+        [
+          {
+            "addedLines": 1,
+            "blocks": [
+              {
+                "header": "@@ -1 +1 @@",
+                "lines": [
+                  {
+                    "content": "-<a>test</a>",
+                    "newNumber": undefined,
+                    "oldNumber": 1,
+                    "type": "delete",
+                  },
+                  {
+                    "content": "+<a>new test</a>",
+                    "newNumber": 1,
+                    "oldNumber": undefined,
+                    "type": "insert",
+                  },
+                ],
+                "newStartLine": 1,
+                "oldStartLine": 1,
+                "oldStartLine2": null,
+              },
+            ],
+            "deletedLines": 1,
+            "isCombined": false,
+            "language": "html",
+            "newName": "htest.html",
+            "oldName": "htest.html",
+          },
+          {
+            "addedLines": 0,
+            "blocks": [],
+            "deletedLines": 0,
+            "isBinary": true,
+            "newName": "image.gif",
+            "oldName": "image.gif",
+          },
+          {
+            "addedLines": 1,
+            "blocks": [
+              {
+                "header": "@@ -1 +1 @@",
+                "lines": [
+                  {
+                    "content": "-{"list": [1, 2]}",
+                    "newNumber": undefined,
+                    "oldNumber": 1,
+                    "type": "delete",
+                  },
+                  {
+                    "content": "+{"list": [1, 2, 3]}",
+                    "newNumber": 1,
+                    "oldNumber": undefined,
+                    "type": "insert",
+                  },
+                ],
+                "newStartLine": 1,
+                "oldStartLine": 1,
+                "oldStartLine2": null,
+              },
+            ],
+            "deletedLines": 1,
+            "isCombined": false,
+            "language": "json",
+            "newName": "test.json",
+            "oldName": "test.json",
+          },
+        ]
+      `);
+    });
  });
 });
--- 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' +
@ -49,7 +49,7 @@ const jsonExample1: DiffFile[] = [
 ];

 describe('Diff2Html', () => {
-  describe('getJsonFromDiff', () => {
+  describe('parse', () => {
    it('should parse simple diff to json', () => {
      const diff =
        'diff --git a/sample b/sample\n' +
@ -199,11 +199,13 @@ describe('Diff2Html', () => {
        ]
      `);
    });
+  });

+  describe('html', () => {
    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">
@ -260,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">
@ -317,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>
@ -337,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">
@ -394,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">
@ -439,7 +441,7 @@ describe('Diff2Html', () => {
                            <tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr><tr>
            <td class="d2h-code-side-linenumber d2h-ins d2h-change">
@ -465,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">
@ -510,7 +512,7 @@ describe('Diff2Html', () => {
                            <tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr><tr>
            <td class="d2h-code-side-linenumber d2h-ins d2h-change">
@ -536,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>
@ -556,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">
@ -601,7 +603,7 @@ describe('Diff2Html', () => {
                            <tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr><tr>
            <td class="d2h-code-side-linenumber d2h-ins d2h-change">
@ -650,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">
@ -876,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>
@ -896,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">
@ -926,7 +928,7 @@ describe('Diff2Html', () => {
            <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>&lt;!-- commented code --&gt;</del></span>
+                    <span class="d2h-code-line-ctn">&lt;<del>!-- commented code --</del>&gt;</span>
                </div>
            </td>
        </tr><tr>
@ -937,7 +939,7 @@ describe('Diff2Html', () => {
            <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>&lt;&#x2F;div</del>&gt;</span>
+                    <span class="d2h-code-line-ctn">&lt;<del>&#x2F;div</del>&gt;</span>
                </div>
            </td>
        </tr><tr>
@ -948,7 +950,7 @@ describe('Diff2Html', () => {
            <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>&lt;html&gt;</ins></span>
+                    <span class="d2h-code-line-ctn">&lt;<ins>html</ins>&gt;</span>
                </div>
            </td>
        </tr><tr>
@ -959,7 +961,7 @@ describe('Diff2Html', () => {
            <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>&lt;body</ins>&gt;</span>
+                    <span class="d2h-code-line-ctn">&lt;<ins>body</ins>&gt;</span>
                </div>
            </td>
        </tr>
@ -978,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>
@ -998,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">
@ -1256,5 +1258,289 @@ describe('Diff2Html', () => {
      `);
      /* eslint-enable no-irregular-whitespace */
    });
+
+    describe('with auto colorScheme', () => {
+      it('should return a html diff with auto color scheme', () => {
+        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>"
+        `);
+      });
+
+      it('should include auto colorScheme 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', () => {
+      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 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>"
+        `);
+      });
+
+      it('should include dark colorScheme 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>"
+                `);
+      });
+    });
  });
 });
--- a/src/tests/file-list-renderer-tests.ts
+++ b/src/tests/file-list-renderer-tests.ts
@ -1,8 +1,9 @@
-import { render } from '../file-list-renderer';
+import { FileListRenderer } from '../file-list-renderer';
 import HoganJsUtils from '../hoganjs-utils';
+import { ColorSchemeType } from '../types';

-describe('FileListPrinter', () => {
-  describe('generateFileList', () => {
+describe('FileListRenderer', () => {
+  describe('render', () => {
    it('should expose old and new files to templates', () => {
      const hoganUtils = new HoganJsUtils({
        rawTemplates: {
@ -10,6 +11,7 @@ describe('FileListPrinter', () => {
          'file-summary-line': '{{oldName}}, {{newName}}, {{fileName}}',
        },
      });
+      const fileListRenderer = new FileListRenderer(hoganUtils);
      const files = [
        {
          isCombined: false,
@ -55,7 +57,7 @@ describe('FileListPrinter', () => {
        },
      ];

-      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 +69,8 @@ describe('FileListPrinter', () => {

    it('should work for all kinds of files', () => {
      const hoganUtils = new HoganJsUtils({});
+      const fileListRenderer = new FileListRenderer(hoganUtils);
+
      const files = [
        {
          isCombined: false,
@ -111,9 +115,9 @@ describe('FileListPrinter', () => {
          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-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>
@ -172,5 +176,97 @@ describe('FileListPrinter', () => {
        </div>"
      `);
    });
+
+    describe('with dark colorScheme', () => {
+      it('should include dark colorScheme', () => {
+        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 include auto colorScheme', () => {
+        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>"
+        `);
+      });
+    });
  });
 });
--- a/src/tests/line-by-line-tests.ts
+++ b/src/tests/line-by-line-tests.ts
@ -23,9 +23,19 @@ describe('LineByLineRenderer', () => {

  describe('makeLineHtml', () => {
    it('should work for insertions', () => {
+      const file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js',
+        isCombined: false,
+        isGitDiff: false,
+        blocks: [],
+      };
      const hoganUtils = new HoganJsUtils({});
      const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
-      const fileHtml = lineByLineRenderer.generateSingleLineHtml({
+      const fileHtml = lineByLineRenderer.generateSingleLineHtml(file, {
        type: CSSLineClass.INSERTS,
        prefix: '+',
        content: 'test',
@ -49,9 +59,19 @@ describe('LineByLineRenderer', () => {
    });

    it('should work for deletions', () => {
+      const file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js',
+        isCombined: false,
+        isGitDiff: false,
+        blocks: [],
+      };
      const hoganUtils = new HoganJsUtils({});
      const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
-      const fileHtml = lineByLineRenderer.generateSingleLineHtml({
+      const fileHtml = lineByLineRenderer.generateSingleLineHtml(file, {
        type: CSSLineClass.DELETES,
        prefix: '-',
        content: 'test',
@ -75,9 +95,19 @@ describe('LineByLineRenderer', () => {
    });

    it('should convert indents into non breakin spaces (2 white spaces)', () => {
+      const file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js',
+        isCombined: false,
+        isGitDiff: false,
+        blocks: [],
+      };
      const hoganUtils = new HoganJsUtils({});
      const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
-      const fileHtml = lineByLineRenderer.generateSingleLineHtml({
+      const fileHtml = lineByLineRenderer.generateSingleLineHtml(file, {
        type: CSSLineClass.INSERTS,
        prefix: '+',
        content: '  test',
@ -101,9 +131,19 @@ describe('LineByLineRenderer', () => {
    });

    it('should convert indents into non breakin spaces (4 white spaces)', () => {
+      const file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js',
+        isCombined: false,
+        isGitDiff: false,
+        blocks: [],
+      };
      const hoganUtils = new HoganJsUtils({});
      const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
-      const fileHtml = lineByLineRenderer.generateSingleLineHtml({
+      const fileHtml = lineByLineRenderer.generateSingleLineHtml(file, {
        type: CSSLineClass.INSERTS,
        prefix: '+',
        content: '    test',
@ -127,9 +167,19 @@ describe('LineByLineRenderer', () => {
    });

    it('should preserve tabs', () => {
+      const file = {
+        addedLines: 12,
+        deletedLines: 41,
+        language: 'js',
+        oldName: 'my/file/name.js',
+        newName: 'my/file/name.js',
+        isCombined: false,
+        isGitDiff: false,
+        blocks: [],
+      };
      const hoganUtils = new HoganJsUtils({});
      const lineByLineRenderer = new LineByLineRenderer(hoganUtils, {});
-      const fileHtml = lineByLineRenderer.generateSingleLineHtml({
+      const fileHtml = lineByLineRenderer.generateSingleLineHtml(file, {
        type: CSSLineClass.INSERTS,
        prefix: '+',
        content: '\ttest',
@ -399,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">
@ -473,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">
@ -533,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">
--- a/src/tests/side-by-side-printer-tests.ts
+++ b/src/tests/side-by-side-printer-tests.ts
@ -118,7 +118,7 @@ describe('SideBySideRenderer', () => {
          "right": "<tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr><tr>
            <td class="d2h-code-side-linenumber d2h-cntx">
@ -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">
@ -323,7 +323,7 @@ describe('SideBySideRenderer', () => {
                            <tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr><tr>
            <td class="d2h-code-side-linenumber d2h-ins d2h-change">
@ -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">
@ -469,7 +469,7 @@ describe('SideBySideRenderer', () => {
                            <tr>
            <td class="d2h-code-side-linenumber d2h-info"></td>
            <td class="d2h-info">
-                <div class="d2h-code-side-line"></div>
+                <div class="d2h-code-side-line">&nbsp;</div>
            </td>
        </tr>
                            </tbody>
--- a/src/diff-parser.ts
+++ b/src/diff-parser.ts
@ -272,7 +272,7 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
    const nxtLine = diffLines[lineIndex + 1];
    const afterNxtLine = diffLines[lineIndex + 2];

-    if (line.startsWith('diff')) {
+    if (line.startsWith('diff --git') || line.startsWith('diff --combined')) {
      startFile();

      // diff --git a/blocked_delta_results.png b/blocked_delta_results.png
@ -290,6 +290,22 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
      return;
    }

+    if (line.startsWith('Binary files') && !currentFile?.isGitDiff) {
+      startFile();
+      const unixDiffBinaryStart = /^Binary files "?([a-ciow]\/.+)"? and "?([a-ciow]\/.+)"? differ/;
+      if ((values = unixDiffBinaryStart.exec(line))) {
+        possibleOldName = getFilename(values[1], undefined, config.dstPrefix);
+        possibleNewName = getFilename(values[2], undefined, config.srcPrefix);
+      }
+
+      if (currentFile === null) {
+        throw new Error('Where is my file !!!');
+      }
+
+      currentFile.isBinary = true;
+      return;
+    }
+
    if (
      !currentFile || // If we do not have a file yet, we should crete one
      (!currentFile.isGitDiff &&
@ -442,18 +458,16 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
    } else if ((values = index.exec(line))) {
      currentFile.checksumBefore = values[1];
      currentFile.checksumAfter = values[2];
-      values[3] && (currentFile.mode = values[3]);
+      if (values[3]) currentFile.mode = values[3];
    } else if ((values = combinedIndex.exec(line))) {
      currentFile.checksumBefore = [values[2], values[3]];
      currentFile.checksumAfter = values[1];
    } else if ((values = combinedMode.exec(line))) {
      currentFile.oldMode = [values[2], values[3]];
      currentFile.newMode = values[1];
-      // eslint-disable-next-line sonarjs/no-duplicated-branches
    } else if ((values = combinedNewFile.exec(line))) {
      currentFile.newFileMode = values[1];
      currentFile.isNew = true;
-      // eslint-disable-next-line sonarjs/no-duplicated-branches
    } else if ((values = combinedDeletedFile.exec(line))) {
      currentFile.deletedFileMode = values[1];
      currentFile.isDeleted = true;
--- 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,10 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon

  const hoganUtils = new HoganJsUtils(config);

-  const fileList = config.drawFileList ? fileListPrinter.render(diffJson, hoganUtils) : '';
+  const { colorScheme } = config;
+  const fileListRendererConfig = { colorScheme };
+
+  const fileList = config.drawFileList ? new FileListRenderer(hoganUtils, fileListRendererConfig).render(diffJson) : '';

  const diffOutput =
    config.outputFormat === 'side-by-side'
--- a/src/file-list-renderer.ts
+++ b/src/file-list-renderer.ts
@ -1,14 +1,31 @@
 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 function render(diffFiles: DiffFile[], hoganUtils: HoganJsUtils): string {
+export interface FileListRendererConfig {
+  colorScheme?: ColorSchemeType;
+}
+
+export const defaultFileListRendererConfig = {
+  colorScheme: renderUtils.defaultRenderConfig.colorScheme,
+};
+
+export class FileListRenderer {
+  private readonly hoganUtils: HoganJsUtils;
+  private readonly config: typeof defaultFileListRendererConfig;
+
+  constructor(hoganUtils: HoganJsUtils, config: FileListRendererConfig = {}) {
+    this.hoganUtils = hoganUtils;
+    this.config = { ...defaultFileListRendererConfig, ...config };
+  }
+
+  render(diffFiles: DiffFile[]): string {
    const files = diffFiles
      .map(file =>
-      hoganUtils.render(
+        this.hoganUtils.render(
          baseTemplatesPath,
          'line',
          {
@ -20,14 +37,16 @@ export function render(diffFiles: DiffFile[], hoganUtils: HoganJsUtils): string
            addedLines: '+' + file.addedLines,
          },
          {
-          fileIcon: hoganUtils.template(iconsBaseTemplatesPath, renderUtils.getFileIcon(file)),
+            fileIcon: this.hoganUtils.template(iconsBaseTemplatesPath, renderUtils.getFileIcon(file)),
          },
        ),
      )
      .join('\n');

-  return hoganUtils.render(baseTemplatesPath, 'wrapper', {
+    return this.hoganUtils.render(baseTemplatesPath, 'wrapper', {
+      colorScheme: renderUtils.colorSchemeToCss(this.config.colorScheme),
      filesNumber: diffFiles.length,
      files: files,
    });
+  }
 }
--- a/src/hoganjs-utils.ts
+++ b/src/hoganjs-utils.ts
@ -39,7 +39,7 @@ export default class HoganJsUtils {
    try {
      const template = this.preCompiledTemplates[templateKey];
      return template.render(params, partials, indent);
-    } catch (e) {
+    } catch (_e) {
      throw new Error(`Could not find template to render '${templateKey}'`);
    }
  }
--- 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 {
@ -103,14 +106,14 @@ export default class LineByLineRenderer {
        this.applyLineGroupping(block).forEach(([contextLines, oldLines, newLines]) => {
          if (oldLines.length && newLines.length && !contextLines.length) {
            this.applyRematchMatching(oldLines, newLines, matcher).map(([oldLines, newLines]) => {
-              const { left, right } = this.processChangedLines(file.isCombined, oldLines, newLines);
+              const { left, right } = this.processChangedLines(file, file.isCombined, oldLines, newLines);
              lines += left;
              lines += right;
            });
          } else if (contextLines.length) {
            contextLines.forEach(line => {
              const { prefix, content } = renderUtils.deconstructLine(line.content, file.isCombined);
-              lines += this.generateSingleLineHtml({
+              lines += this.generateSingleLineHtml(file, {
                type: renderUtils.CSSLineClass.CONTEXT,
                prefix: prefix,
                content: content,
@ -119,7 +122,7 @@ export default class LineByLineRenderer {
              });
            });
          } else if (oldLines.length || newLines.length) {
-            const { left, right } = this.processChangedLines(file.isCombined, oldLines, newLines);
+            const { left, right } = this.processChangedLines(file, file.isCombined, oldLines, newLines);
            lines += left;
            lines += right;
          } else {
@ -188,7 +191,7 @@ export default class LineByLineRenderer {
    return doMatching ? matcher(oldLines, newLines) : [[oldLines, newLines]];
  }

-  processChangedLines(isCombined: boolean, oldLines: DiffLine[], newLines: DiffLine[]): FileHtml {
+  processChangedLines(file: DiffFile, isCombined: boolean, oldLines: DiffLine[], newLines: DiffLine[]): FileHtml {
    const fileHtml = {
      right: '',
      left: '',
@ -240,7 +243,7 @@ export default class LineByLineRenderer {
            }
          : undefined;

-      const { left, right } = this.generateLineHtml(preparedOldLine, preparedNewLine);
+      const { left, right } = this.generateLineHtml(file, preparedOldLine, preparedNewLine);
      fileHtml.left += left;
      fileHtml.right += right;
    }
@ -248,14 +251,14 @@ export default class LineByLineRenderer {
    return fileHtml;
  }

-  generateLineHtml(oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
+  generateLineHtml(file: DiffFile, oldLine?: DiffPreparedLine, newLine?: DiffPreparedLine): FileHtml {
    return {
-      left: this.generateSingleLineHtml(oldLine),
-      right: this.generateSingleLineHtml(newLine),
+      left: this.generateSingleLineHtml(file, oldLine),
+      right: this.generateSingleLineHtml(file, newLine),
    };
  }

-  generateSingleLineHtml(line?: DiffPreparedLine): string {
+  generateSingleLineHtml(file: DiffFile, line?: DiffPreparedLine): string {
    if (line === undefined) return '';

    const lineNumberHtml = this.hoganUtils.render(baseTemplatesPath, 'numbers', {
@ -270,6 +273,8 @@ export default class LineByLineRenderer {
      prefix: line.prefix === ' ' ? '&nbsp;' : line.prefix,
      content: line.content,
      lineNumber: lineNumberHtml,
+      line,
+      file,
    });
  }
 }
--- 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,18 @@ export function toCSSClass(lineType: LineType): CSSLineClass {
  }
 }

+export function colorSchemeToCss(colorScheme: ColorSchemeType): string {
+  switch (colorScheme) {
+    case ColorSchemeType.DARK:
+      return 'd2h-dark-color-scheme';
+    case ColorSchemeType.AUTO:
+      return 'd2h-auto-color-scheme';
+    case ColorSchemeType.LIGHT:
+    default:
+      return 'd2h-light-color-scheme';
+  }
+}
+
 /**
 * Prefix length of the hunk lines in the diff
 */
--- 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 {
--- 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>
--- a/src/templates/generic-block-header.mustache
+++ b/src/templates/generic-block-header.mustache
@ -1,6 +1,6 @@
 <tr>
    <td class="{{lineClass}} {{CSSLineClass.INFO}}"></td>
    <td class="{{CSSLineClass.INFO}}">
-        <div class="{{contentClass}}">{{{blockHeader}}}</div>
+        <div class="{{contentClass}}">{{#blockHeader}}{{{blockHeader}}}{{/blockHeader}}{{^blockHeader}}&nbsp;{{/blockHeader}}</div>
    </td>
 </tr>
--- 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>
--- 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',
+}
--- a/src/ui/css/diff2html.css
+++ b/src/ui/css/diff2html.css
@ -5,6 +5,82 @@
 *
 */

+:root,
+:host {
+  --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;
+  --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-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: rgb(230, 237, 243);
+  --d2h-dark-bg-color: rgb(13, 17, 23);
+  --d2h-dark-border-color: rgb(48, 54, 61);
+
+  --d2h-dark-dim-color: rgb(110, 118, 129);
+
+  --d2h-dark-line-border-color: rgb(33, 38, 45);
+
+  --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: rgba(110, 118, 129, 0.1);
+  --d2h-dark-empty-placeholder-border-color: rgb(48, 54, 61);
+
+  --d2h-dark-selected-color: rgba(56, 139, 253, 0.1);
+
+  --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: 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: rgba(210, 153, 34, 0.2);
+  --d2h-dark-change-ins-color: rgba(46, 160, 67, 0.25);
+
+  --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: rgb(210, 153, 34);
+  --d2h-dark-moved-label-color: #3572b0;
+}
+
 .d2h-wrapper {
  text-align: left;
 }
@ -13,10 +89,11 @@
  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-bg-color);
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
 .d2h-file-header.d2h-sticky-header {
  position: sticky;
  top: 0;
@ -33,18 +110,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;
@ -68,7 +145,7 @@
 }

 .d2h-file-wrapper {
-  border: 1px solid #ddd;
+  border: 1px solid var(--d2h-border-color);
  border-radius: 3px;
  margin-bottom: 1em;
 }
@ -80,12 +157,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 {
@ -124,7 +201,7 @@
  display: inline-block;
  white-space: nowrap;
  user-select: none;
-  width: 100%;
+  width: calc(100% - 16em);
  /* Compensate for the absolute positioning of the line numbers */
  padding: 0 8em;
 }
@ -133,7 +210,7 @@
  display: inline-block;
  white-space: nowrap;
  user-select: none;
-  width: 100%;
+  width: calc(100% - 9em);
  /* Compensate for the absolute positioning of the line numbers */
  padding: 0 4.5em;
 }
@ -154,9 +231,8 @@
  display: inline-block;
  margin-top: -1px;
  text-decoration: none;
-  background-color: #ffb6ba;
+  background-color: var(--d2h-del-highlight-bg-color);
  border-radius: 0.2em;
-  vertical-align: middle;
 }

 .d2h-code-line ins,
@ -164,10 +240,9 @@
  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;
-  vertical-align: middle;
 }

 .d2h-code-line-prefix {
@ -202,10 +277,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-dim-color);
  text-align: right;
-  border: solid #eeeeee;
+  border: solid var(--d2h-line-border-color);
  border-width: 0 1px 0 1px;
  cursor: pointer;
 }
@ -220,10 +295,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-dim-color);
  text-align: right;
-  border: solid #eeeeee;
+  border: solid var(--d2h-line-border-color);
  border-width: 0 1px 0 1px;
  cursor: pointer;
  overflow: hidden;
@ -237,8 +312,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,
@ -258,27 +333,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-dim-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);
 }

 /*
@ -291,11 +366,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 {
@ -321,7 +396,7 @@
 }

 .d2h-file-list > li {
-  border-bottom: #ddd solid 1px;
+  border-bottom: var(--d2h-border-color) solid 1px;
  padding: 5px 10px;
  margin: 0;
 }
@ -343,19 +418,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 {
@ -365,21 +440,302 @@
  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;
+}
+
+/**
+ * Dark Mode Colors
+ */
+
+.d2h-dark-color-scheme {
+  color: var(--d2h-dark-color);
+  background-color: var(--d2h-dark-bg-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-header {
+  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 {
+  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);
+}
+
+.d2h-dark-color-scheme .d2h-code-line ins,
+.d2h-dark-color-scheme .d2h-code-side-line ins {
+  background-color: var(--d2h-dark-ins-highlight-bg-color);
+}
+
+.d2h-dark-color-scheme .d2h-diff-tbody {
+  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);
+}
+
+.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-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-dim-color);
+  border-color: var(--d2h-dark-line-border-color);
+}
+
+.d2h-dark-color-scheme .d2h-del {
+  background-color: var(--d2h-dark-del-bg-color);
+  border-color: var(--d2h-dark-del-border-color);
+}
+
+.d2h-dark-color-scheme .d2h-ins {
+  background-color: var(--d2h-dark-ins-bg-color);
+  border-color: var(--d2h-dark-ins-border-color);
+}
+
+.d2h-dark-color-scheme .d2h-info {
+  background-color: var(--d2h-dark-info-bg-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 {
+  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-ins-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-wrapper {
+  border: 1px solid var(--d2h-dark-border-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-collapse {
+  border: 1px solid var(--d2h-dark-bg-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
+  background-color: var(--d2h-dark-selected-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-list-wrapper a {
+  color: var(--d2h-dark-moved-label-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
+  color: var(--d2h-dark-moved-label-color);
+}
+
+.d2h-dark-color-scheme .d2h-file-list > li {
+  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);
+}
+
+.d2h-dark-color-scheme .d2h-moved {
+  color: var(--d2h-dark-moved-label-color);
+}
+
+.d2h-dark-color-scheme .d2h-tag {
+  background-color: var(--d2h-dark-bg-color);
+}
+
+.d2h-dark-color-scheme .d2h-deleted-tag {
+  border: var(--d2h-dark-del-label-color) 1px solid;
+}
+
+.d2h-dark-color-scheme .d2h-added-tag {
+  border: var(--d2h-dark-ins-label-color) 1px solid;
+}
+
+.d2h-dark-color-scheme .d2h-changed-tag {
+  border: var(--d2h-dark-change-label-color) 1px solid;
+}
+
+.d2h-dark-color-scheme .d2h-moved-tag {
+  border: var(--d2h-dark-moved-label-color) 1px solid;
+}
+
+/**
+ * Auto Mode Colors
+ */
+@media (prefers-color-scheme: dark) {
+  .d2h-auto-color-scheme {
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-header {
+    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 {
+    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);
+  }
+
+  .d2h-auto-color-scheme .d2h-code-line ins,
+  .d2h-auto-color-scheme .d2h-code-side-line ins {
+    background-color: var(--d2h-dark-ins-highlight-bg-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-diff-tbody {
+    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-dim-color);
+    border-color: var(--d2h-dark-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-empty-placeholder-bg-color);
+    border-color: var(--d2h-dark-empty-placeholder-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-code-linenumber {
+    background-color: var(--d2h-dark-bg-color);
+    color: var(--d2h-dark-dim-color);
+    border-color: var(--d2h-dark-line-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-del {
+    background-color: var(--d2h-dark-del-bg-color);
+    border-color: var(--d2h-dark-del-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-ins {
+    background-color: var(--d2h-dark-ins-bg-color);
+    border-color: var(--d2h-dark-ins-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-info {
+    background-color: var(--d2h-dark-info-bg-color);
+    color: var(--d2h-dark-dim-color);
+    border-color: var(--d2h-dark-info-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+    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-ins-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-wrapper {
+    border: 1px solid var(--d2h-dark-border-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-collapse {
+    border: 1px solid var(--d2h-dark-bg-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
+    background-color: var(--d2h-dark-selected-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a {
+    color: var(--d2h-dark-moved-label-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
+    color: var(--d2h-dark-moved-label-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-file-list > li {
+    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);
+  }
+
+  .d2h-auto-color-scheme .d2h-moved {
+    color: var(--d2h-dark-moved-label-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-tag {
+    background-color: var(--d2h-dark-bg-color);
+  }
+
+  .d2h-auto-color-scheme .d2h-deleted-tag {
+    border: var(--d2h-dark-del-label-color) 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-added-tag {
+    border: var(--d2h-dark-ins-label-color) 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-changed-tag {
+    border: var(--d2h-dark-change-label-color) 1px solid;
+  }
+
+  .d2h-auto-color-scheme .d2h-moved-tag {
+    border: var(--d2h-dark-moved-label-color) 1px solid;
+  }
 }
--- a/src/ui/js/diff2html-ui-base.ts
+++ b/src/ui/js/diff2html-ui-base.ts
@ -151,14 +151,18 @@ export class Diff2HtmlUI {
        this.config.highlightLanguages = new Map(Object.entries(this.config.highlightLanguages));
      }

-      const hljsLanguage =
+      let hljsLanguage =
        language && this.config.highlightLanguages.has(language)
-          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.config.highlightLanguages.get(language)!
+          ? this.config.highlightLanguages.get(language)!
          : language
            ? getLanguage(language)
            : 'plaintext';

+      // Fallback to plaintext in case language is not loaded
+      if (hljs.getLanguage(hljsLanguage) === undefined) {
+        hljsLanguage = 'plaintext';
+      }
+
      // Collect all the code lines and execute the highlight on them
      const codeLines = file.querySelectorAll('.d2h-code-line-ctn');
      codeLines.forEach(line => {
--- a/src/ui/js/diff2html-ui-slim.ts
+++ b/src/ui/js/diff2html-ui-slim.ts
@ -9,4 +9,5 @@ export class Diff2HtmlUI extends Diff2HtmlUIBase {
  }
 }

-export { Diff2HtmlUIConfig, defaultDiff2HtmlUIConfig };
+export { defaultDiff2HtmlUIConfig };
+export type { Diff2HtmlUIConfig };
--- a/src/ui/js/diff2html-ui.ts
+++ b/src/ui/js/diff2html-ui.ts
@ -9,4 +9,5 @@ export class Diff2HtmlUI extends Diff2HtmlUIBase {
  }
 }

-export { Diff2HtmlUIConfig, defaultDiff2HtmlUIConfig };
+export { defaultDiff2HtmlUIConfig };
+export type { Diff2HtmlUIConfig };
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules"],
+  "include": ["./**/*"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,28 +1,37 @@
 {
+  "include": ["src/**/*", "typings/**/*"],
+  "exclude": ["node_modules", "src/__tests__/**"],
  "compilerOptions": {
-    "outDir": "./_target",
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "lib": ["es2020", "dom"],
+    "outDir": "bundles-out",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "target": "ES6",
+    "lib": ["ES6", "DOM"],
+    "jsx": "preserve",
    "allowJs": false,
+    "checkJs": false,
+    "importHelpers": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
+    "sourceMap": true,
+    "noEmit": false,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "incremental": false,
    "strictNullChecks": true,
    "removeComments": true,
    "preserveConstEnums": true,
-    "sourceMap": true,
    "alwaysStrict": true,
-    "strict": true,
    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedParameters": true,
-    "noUnusedLocals": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true
-  },
-  "include": ["./src/**/*", "./typings/**/*"],
-  "exclude": ["node_modules", "./src/__tests__/*"]
+    "noImplicitThis": true
+  }
 }
--- a/typings/merge.d.ts
+++ b/typings/merge.d.ts
@ -1,4 +1,3 @@
 declare module 'merge' {
-  // eslint-disable-next-line @typescript-eslint/ban-types
  export function recursive(clone: boolean, ...items: object[]): object;
 }
--- a/webpack.website.ts
+++ b/webpack.website.ts
@ -3,7 +3,6 @@ import path from 'path';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-// eslint-disable-next-line import/default
 import CopyPlugin from 'copy-webpack-plugin';

 const pages = ['index', 'demo'];
--- 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">
@ -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"
--- 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;
+  }
+}
--- a/website/templates/pages/demo/demo.ts
+++ b/website/templates/pages/demo/demo.ts
@ -2,9 +2,11 @@ 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';
+import { ColorSchemeType } from '../../../../src/types';

 /*
 * Example URLs:
@ -121,10 +123,16 @@ function prepareRequest(url: string): Request {

 function getConfiguration(urlParams: URLParams): Diff2HtmlUIConfig {
  // Removing `diff` and `diffTooBigMessage` form `urlParams` to avoid being inserted
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { diff, diffTooBigMessage, ...urlParamsRest } = urlParams;
+
+  const defaultColorScheme: ColorSchemeType =
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? ColorSchemeType.DARK
+      : ColorSchemeType.LIGHT;
+
  const config: URLParams = {
    ...defaultDiff2HtmlUIConfig,
+    colorScheme: defaultColorScheme,
    ...urlParamsRest,
  };

@ -155,9 +163,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';
@ -200,6 +215,7 @@ type Elements = {
  };
  options: {
    outputFormat: HTMLInputElement;
+    colorScheme: HTMLInputElement;
    matching: HTMLInputElement;
    wordsThreshold: HTMLInputElement;
    matchingMaxComparisons: HTMLInputElement;
@ -235,6 +251,7 @@ function getHTMLElementById(id: string): HTMLElement {

 document.addEventListener('DOMContentLoaded', async () => {
  // Improves browser compatibility
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
  require('whatwg-fetch');

  const drawAndUpdateUrl = async (
@ -259,6 +276,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'),
@ -271,12 +289,13 @@ document.addEventListener('DOMContentLoaded', async () => {
  let [config, diffString] = await prepareInitialState(elements);

  // Update HTML inputs from any changes in URL
-  config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
-  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());
-  config.matchingMaxComparisons &&
-    (elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString());
+  if (config.outputFormat) elements.options.outputFormat.value = config.outputFormat;
+  if (config.colorScheme) elements.options.colorScheme.value = config.colorScheme;
+  if (config.drawFileList) elements.checkboxes.drawFileList.checked = config.drawFileList;
+  if (config.matching) elements.options.matching.value = config.matching;
+  if (config.matchWordsThreshold) elements.options.wordsThreshold.value = config.matchWordsThreshold.toString();
+  if (config.matchingMaxComparisons)
+    elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString();

  Object.entries(elements.options).forEach(([option, element]) =>
    element.addEventListener('change', () => {
--- a/website/templates/pages/demo/github-highlights.css
+++ 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;
+  }
+}
--- a/website/templates/pages/index/content.handlebars
+++ b/website/templates/pages/index/content.handlebars
@ -72,7 +72,7 @@
            <span class="button clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
        </div>
        <p>
-            <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
+            <a href="https://github.com/rtfpessoa/diff2html#usage" target="_blank" rel="noopener" rel="noreferrer">
                Find usage examples in the Docs
            </a>
        </p>
@ -491,8 +491,8 @@
                        <p>Displays a tabular difference of a csv file or a split difference of any file in an Atom pane</p>
                    </section>
                    <footer>
-                        <a href="https://atom.io/packages/git-tabular-diff" target="_blank" rel="noopener"
-                            rel="noreferrer">Website</a>
+                        <a href="https://github.com/jstritch/git-tabular-diff" target="_blank" rel="noopener"
+                            rel="noreferrer">View GitHub</a>
                    </footer>
                </div>
            </div>
@ -510,7 +510,7 @@
            <a href="https://gitter.im/rtfpessoa/diff2html" target="_blank" rel="noopener" rel="noreferrer">Gitter</a>.
            Need any help?
        </p>
-        <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
+        <a href="https://github.com/rtfpessoa/diff2html#usage" target="_blank" rel="noopener" rel="noreferrer">
            Read more in the Docs
        </a>
    </div>
--- a/website/templates/pages/index/index.css
+++ b/website/templates/pages/index/index.css
@ -8,7 +8,11 @@
 }

 .hero-booticon {
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
  margin: 0 auto 30px;
  width: 100%;
  font-size: 8vw;
--- a/website/templates/pages/index/index.ts
+++ b/website/templates/pages/index/index.ts
@ -4,5 +4,4 @@ import '../../../main.ts';
 import '../../../main.css';
 import './index.css';

-// eslint-disable-next-line no-new
 new Clipboard(document.getElementsByClassName('clipboard')[0]);
--- a/website/templates/template.handlebars
+++ b/website/templates/template.handlebars
@ -78,7 +78,7 @@
                <a href="https://twitter.com/rtfpessoa" target="_blank" rel="noopener" rel="noreferrer">@rtfpessoa</a>.
            </p>
            <p>
-                <a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank"
+                <a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#usage" target="_blank"
                    rel="noopener" rel="noreferrer">FAQ</a>
                -
                <a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rodrigo Fernandes	1350740c98	fix artifacts	2024-12-23 23:17:59 +00:00
Rodrigo Fernandes	04640cccbe	force release	2024-12-23 23:08:34 +00:00
Rodrigo Fernandes	babcdb0405	Merge pull request #551 from rtfpessoa/bump-dependencies Bump dependencies	2024-12-23 22:55:42 +00:00
Rodrigo Fernandes	2f4f41a31d	bump node version	2024-12-23 22:52:07 +00:00
Rodrigo Fernandes	2f8c477f66	fix build	2024-12-23 22:49:18 +00:00
Rodrigo Fernandes	064659a70e	update tests	2024-12-23 22:41:43 +00:00
Rodrigo Fernandes	eef651f0d4	bump more versions	2024-12-23 22:34:58 +00:00
Rodrigo Fernandes	d67d80eb41	fix dark demo theme and bump deps	2024-07-20 22:46:00 +01:00
Rodrigo Fernandes	a88e4b3ba4	bump more versions	2024-07-09 18:35:22 +01:00
Rodrigo Fernandes	dbdd2e9c26	bump bulma	2024-07-09 18:30:45 +01:00
Rodrigo Fernandes	05fbd33a3a	fix output directories	2024-07-09 18:19:04 +01:00
Rodrigo Fernandes	b2e31b6083	bump more dependencies	2024-07-05 23:59:55 +01:00
Rodrigo Fernandes	00a12d11aa	bump dependencies	2024-07-05 23:52:51 +01:00
Rodrigo Fernandes	b517e40e5c	Merge pull request #531 from rtfpessoa/use-npm use npm instead of yarn	2024-04-19 21:39:35 +01:00
Rodrigo Fernandes	dea1d300b3	use npm instead of yarn	2024-04-19 21:35:17 +01:00
Rodrigo Fernandes	4de87bf099	Merge pull request #523 from rtfpessoa/bump-dependencies updates	2024-01-12 20:15:25 +00:00
Rodrigo Fernandes	aa4731953e	updates	2024-01-12 20:09:44 +00:00
Rodrigo Fernandes	363b619d87	Merge pull request #518 from JeroenVdb/support-shadow-dom css: target both :root and :host to also cover usage in shadow DOM	2023-12-15 21:38:49 +00:00
Jeroen Van den Berghe	7005ced0b5	css: target both :root and :host to also cover usage in shadow DOM Inside shadow DOM :root can't be targeted, so :host should be used here for those cases. Solves issues #517	2023-10-17 13:26:41 +02:00
Rodrigo Fernandes	99b7757a3a	Merge pull request #515 from akwiatek/update-dark-mode-css Amend malformed CSS.	2023-10-05 16:17:34 +01:00
Adam Kwiatek	dd4b774958	Amend malformed CSS.	2023-10-02 17:48:24 +02:00
Rodrigo Fernandes	b04a400329	Merge pull request #514 from JHWelch/add-dark-mode Add Dark & Auto color schemes	2023-09-29 20:13:49 +01:00
Jordan Welch	7410d25ee4	Use d2h-light-color-scheme for light	2023-09-26 18:06:06 -05:00
Jordan Welch	987d8cb65c	update to GitHub dark colors	2023-09-26 17:47:59 -05:00
Jordan Welch	d425892b61	Remove duplicate "should"s	2023-09-20 08:02:40 -05:00
Jordan Welch	f7aacc4fc0	darken header	2023-09-19 20:54:19 -05:00
Jordan Welch	0de1e040b0	Create modified github theme for demo	2023-09-19 20:51:38 -05:00
Jordan Welch	4b42e4b0de	Toggle colorscheme on Demo body	2023-09-19 20:46:45 -05:00
Jordan Welch	863246eed0	remove redundant classes	2023-09-19 20:18:35 -05:00
Jordan Welch	3865a5f27e	Adjust colors	2023-09-19 19:54:40 -05:00
Jordan Welch	b26353c04d	Normalize remaining variables	2023-09-19 19:47:17 -05:00
Jordan Welch	8d9a8a8265	Fix --d2h-dark-moved-label-color references	2023-09-19 19:04:06 -05:00
Jordan Welch	1aa822da56	Update test text	2023-09-19 19:04:06 -05:00
Jordan Welch	786e5cc027	Fix remaining --d2h-dark-line-border-color	2023-09-19 19:04:06 -05:00
Jordan Welch	9806d677f3	Add file header	2023-09-19 19:04:05 -05:00
Jordan Welch	efd28ffb3a	Move dark variables and match pattern	2023-09-19 19:04:05 -05:00
Jordan Welch	93103e2c49	Convert light colors to variables	2023-09-19 19:04:05 -05:00
Jordan Welch	0029890ead	Add colorScheme information to README	2023-09-19 19:04:05 -05:00
Jordan Welch	79268800ff	Add colors for file list	2023-09-19 19:04:04 -05:00
Jordan Welch	9f8d6bd4ca	Pass config to file list renderer	2023-09-19 19:04:04 -05:00
Jordan Welch	669ee2bff8	Fix del/ins change colors	2023-09-19 19:04:03 -05:00
Jordan Welch	0dccfa26a5	Pass default from default render config	2023-09-19 19:04:03 -05:00
Jordan Welch	c244b0dd51	Add ColorSchemeType for file list	2023-09-19 19:04:03 -05:00
Jordan Welch	4e6bb49788	Update FileListRenderer to class	2023-09-19 19:04:02 -05:00
Jordan Welch	14989f1ddd	rename test to match Class & function	2023-09-19 19:04:02 -05:00
Jordan Welch	58c088977e	Fix color preference order	2023-09-19 19:04:02 -05:00
Jordan Welch	c22febdbd6	Adjust colors for line-by-line	2023-09-19 19:04:01 -05:00
Jordan Welch	1b0c1a87a2	swap highlight and base	2023-09-19 19:04:01 -05:00
Jordan Welch	84a323f0de	Add color scheme to demo page	2023-09-19 19:04:01 -05:00
Jordan Welch	0b76161d86	Use variables for dark mode	2023-09-19 19:04:00 -05:00
Jordan Welch	6ed6a5da88	Setup Auto color mode	2023-09-19 19:04:00 -05:00
Jordan Welch	47000723a9	Consolidate dark classes	2023-09-19 19:04:00 -05:00
Jordan Welch	6b420de752	est auto color scheme	2023-09-19 19:03:59 -05:00
Jordan Welch	bd4a84cd3e	Update colors	2023-09-19 19:03:59 -05:00
Jordan Welch	1aafcb201b	Add dark mode classes.	2023-09-19 19:03:59 -05:00
Jordan Welch	4d2505dac8	Normalize class names	2023-09-19 19:03:59 -05:00
Jordan Welch	ff3a86d393	Add colorscheme variable to wrapper	2023-09-19 19:03:58 -05:00
Jordan Welch	5dae945e95	Add initial dark mode css classes	2023-09-19 19:03:57 -05:00
Rodrigo Fernandes	8102d3cf61	Merge pull request #511 from JHWelch/organize-diff2html-tests reorganize/rename blocks to match tested functions	2023-09-19 22:31:14 +01:00
Rodrigo Fernandes	2ffca85422	Merge pull request #512 from reustle/docs-typo-fix Docs typo fix	2023-09-19 22:30:35 +01:00
Shane Reustle	299f7800c3	Docs typo fix	2023-09-12 19:55:53 -04:00
Jordan Welch	66912a3a54	reorganize/rename blocks to match tested functions	2023-09-11 22:48:23 -05:00
Rodrigo Fernandes	3732d59249	Merge pull request #508 from minami80630/fix-link fix broken link	2023-09-01 23:59:19 +01:00
Rodrigo Fernandes	412928fc59	Merge pull request #507 from shoito/fix-start-website fix 'yarn start:website' command	2023-09-01 23:58:52 +01:00
minami80630	61695e2896	fix broken link	2023-09-01 10:45:58 +09:00
shoito	93d0fbc6c3	fix 'yarn start:website' command	2023-08-30 21:38:18 +09:00
Rodrigo Fernandes	61d90c1c41	Merge pull request #506 from rtfpessoa/fix-error-unloaded-lang fallback to plaintext when highlighting unloaded language	2023-08-27 21:40:19 +01:00
Rodrigo Fernandes	f6f05db2f6	fallback to plaintext when highlighting unloaded language	2023-08-27 21:37:39 +01:00
Rodrigo Fernandes	41a901694d	Merge pull request #503 from rtfpessoa/remove-import-helpers Do not use import helpers	2023-08-07 10:23:40 +01:00
Rodrigo Fernandes	3516684c68	Do not use import helpers	2023-08-07 09:52:31 +01:00
Rodrigo Fernandes	638a4a286f	Merge pull request #500 from rtfpessoa/bump-deps fix vuln	2023-08-06 19:52:13 +01:00
Rodrigo Fernandes	9d805bb021	fix vuln	2023-08-06 19:44:36 +01:00
Rodrigo Fernandes	8d34de633a	Merge pull request #499 from rtfpessoa/bump-deps Bump deps	2023-08-06 19:32:04 +01:00
Rodrigo Fernandes	409b5e2f6b	tweak tsconfig	2023-08-06 19:28:46 +01:00
Rodrigo Fernandes	657d48aac0	bump deps	2023-08-06 19:16:10 +01:00
Rodrigo Fernandes	611957e270	Merge pull request #498 from rtfpessoa/update-readme fix badges	2023-08-06 19:09:58 +01:00
Rodrigo Fernandes	dfe2eec8df	fix badges	2023-08-06 19:09:07 +01:00
Rodrigo Fernandes	40a9c0bdc8	Merge pull request #497 from rtfpessoa/update-readme fix badges	2023-08-06 19:07:01 +01:00
Rodrigo Fernandes	a2d34e195c	fix badges	2023-08-06 19:06:31 +01:00
Rodrigo Fernandes	e46184baa2	Merge pull request #488 from rtfpessoa/fix-vertical-align fix vertical align on diff	2023-04-15 14:15:16 +01:00
Rodrigo Fernandes	7a3a4398d1	fix vertical align on diff	2023-04-15 14:12:08 +01:00
Rodrigo Fernandes	2c7e03d266	Merge pull request #486 from rtfpessoa/dependabot/npm_and_yarn/webpack-5.76.0 build(deps-dev): bump webpack from 5.74.0 to 5.76.0	2023-03-16 23:25:59 +00:00
dependabot[bot]	c76b24a1fd	build(deps-dev): bump webpack from 5.74.0 to 5.76.0 Bumps [webpack](https://github.com/webpack/webpack) from 5.74.0 to 5.76.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.74.0...v5.76.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2023-03-15 06:20:11 +00:00
Rodrigo Fernandes	68515376a1	Merge pull request #483 from phikes/hand-in-file-line-to-template feat: hand in file/line to generic line template	2023-03-07 19:34:03 +00:00
Rodrigo Fernandes	551a0b407f	Merge pull request #482 from grimsteel/patch-1 Precise widths for `code-line` and `code-side-line`	2023-03-04 23:40:54 +00:00
Siddhant	32239a0b9d	Precise widths for `code-line` and `code-side-line` The widths of these are now calculated based on: 100% minus the horizontal padding	2023-02-28 19:17:07 -06:00
Phillip Kessels	0d314aecd1	feat: hand in file/line to generic line template	2023-02-20 15:07:34 +00:00
Rodrigo Fernandes	09cbe87595	Merge pull request #478 from rtfpessoa/support-unix-diff-binaries support unix diff binaires	2023-01-20 23:06:53 +00:00
Rodrigo Fernandes	a716739a18	support unix diff binaires	2023-01-20 23:00:34 +00:00
Rodrigo Fernandes	24ccfefa26	Merge pull request #477 from rtfpessoa/fix-firefox fix-broken-header-ff	2023-01-20 22:32:05 +00:00
Rodrigo Fernandes	ca2397830c	fix-broken-header-ff	2023-01-20 22:27:44 +00:00
Rodrigo Fernandes	66c305b854	Merge pull request #471 from rtfpessoa/tweak-css fix home page link	2023-01-06 23:38:19 +00:00
Rodrigo Fernandes	be09a43715	fix home page link	2023-01-06 23:37:55 +00:00
Rodrigo Fernandes	d2e3705575	Merge pull request #470 from rtfpessoa/tweak-css tweak css	2023-01-06 23:33:24 +00:00
Rodrigo Fernandes	d0ead3a14c	tweak css	2023-01-06 23:32:58 +00:00
Rodrigo Fernandes	9247496115	Merge pull request #463 from FurcyPin/fpin/462 fix #462: Info lines shrunk in right panel of side-by-side diff	2023-01-06 23:29:07 +00:00
Rodrigo Fernandes	432901db33	Merge pull request #469 from rtfpessoa/test-actions reorder	2023-01-06 23:24:18 +00:00
Rodrigo Fernandes	838bdf6095	reorder	2023-01-06 23:24:02 +00:00
fpin	df005c3f06	fix #462 : Info lines shrunk in right panel of side-by-side diff	2023-01-02 16:17:16 +01:00