Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 18add5d

Browse files
Merge pull request #168 from rtfpessoa/daleyjem-feature/add-colorScheme
Add color scheme
2 parents 99ce80e + 8d26249 commit 18add5d

File tree

6 files changed

+68
-5
lines changed

6 files changed

+68
-5
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ Usage: diff2html [ flags and/or options ] -- [git diff passthrough flags and opt
7474
| --fct | --fileContentToggle | Adds a viewed checkbox to toggle file content | `true`, `false` | `true` |
7575
| --sc | --synchronisedScroll | Synchronised horizontal scroll | `true`, `false` | `true` |
7676
| --hc | --highlightCode | Highlight code | `true`, `false` | `true` |
77+
| --cs | --colorScheme | Color scheme | `auto`, `dark`, `light` | `auto` |
7778
| --su | --summary | Show files summary | `closed`, `open`, `hidden` | `closed` |
7879
| -d | --diffStyle | Diff style | `word`, `char` | `word` |
7980
| --lm | --matching | Diff line matching type | `lines`, `words`, `none` | `none` |

‎src/__tests__/main-tests.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ describe('cli', () => {
5050
maxLineSizeInBlockForComparison: 200,
5151
outputFormat: 'line-by-line',
5252
renderNothingWhenEmpty: false,
53+
colorScheme: 'auto',
5354
},
5455
{
5556
diffyType: undefined,

‎src/cli.ts‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,52 @@ import { put } from './http-utils.js';
1313
import * as log from './logger.js';
1414
import { Configuration, InputType, DiffyType } from './types.js';
1515
import * as utils from './utils.js';
16+
import { ColorSchemeType } from 'diff2html/lib/types.js';
1617

1718
const defaultArgs = ['-M', '-C', 'HEAD'];
1819

20+
const lightGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />`;
21+
const darkGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />`;
22+
const autoGitHubTheme = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" media="screen and (prefers-color-scheme: light)" />
23+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" media="screen and (prefers-color-scheme: dark)" />`;
24+
25+
const lightBaseStyle = `<style>
26+
body {
27+
background-color: var(--d2h-bg-color);
28+
}
29+
h1 {
30+
color: var(--d2h-light-color);
31+
}
32+
</style>`;
33+
34+
const darkBaseStyle = `<style>
35+
body {
36+
background-color: rgb(13, 17, 23);
37+
}
38+
h1 {
39+
color: var(--d2h-dark-color);
40+
}
41+
</style>`;
42+
43+
const autoBaseStyle = `<style>
44+
@media screen and (prefers-color-scheme: light) {
45+
body {
46+
background-color: var(--d2h-bg-color);
47+
}
48+
h1 {
49+
color: var(--d2h-light-color);
50+
}
51+
}
52+
@media screen and (prefers-color-scheme: dark) {
53+
body {
54+
background-color: rgb(13, 17, 23);
55+
}
56+
h1 {
57+
color: var(--d2h-dark-color);
58+
}
59+
}
60+
</style>`;
61+
1962
function generateGitDiffArgs(gitArgsArr: string[], ignore: string[]): string[] {
2063
const gitDiffArgs: string[] = ['diff'];
2164

@@ -41,7 +84,7 @@ function runGitDiff(gitArgsArr: string[], ignore: string[]): string {
4184
return utils.execute('git', gitDiffArgs);
4285
}
4386

44-
function prepareHTML(diffHTMLContent: string, config: Configuration): string {
87+
function prepareHTML(diffHTMLContent: string, config: Configuration,colorScheme?: ColorSchemeType): string {
4588
const template = utils.readFile(config.htmlWrapperTemplate);
4689

4790
const diff2htmlPath = path.join(path.dirname(require.resolve('diff2html')), '..');
@@ -55,13 +98,21 @@ function prepareHTML(diffHTMLContent: string, config: Configuration): string {
5598
const pageTitle = config.pageTitle;
5699
const pageHeader = config.pageHeader;
57100

101+
const gitHubTheme =
102+
colorScheme === 'light' ? lightGitHubTheme : colorScheme === 'dark' ? darkGitHubTheme : autoGitHubTheme;
103+
104+
const baseStyle = colorScheme === 'light' ? lightBaseStyle : colorScheme === 'dark' ? darkBaseStyle : autoBaseStyle;
105+
58106
/* HACK:
59107
* Replace needs to receive a function as the second argument to perform an exact replacement.
60108
* This will avoid the replacements from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter
61109
*/
62110
return [
63111
{ searchValue: '<!--diff2html-title-->', replaceValue: pageTitle },
64-
{ searchValue: '<!--diff2html-css-->', replaceValue: `<style>\n${cssContent}\n</style>` },
112+
{
113+
searchValue: '<!--diff2html-css-->',
114+
replaceValue: `${baseStyle}\n${gitHubTheme}\n<style>\n${cssContent}\n</style>`,
115+
},
65116
{ searchValue: '<!--diff2html-js-ui-->', replaceValue: `<script>\n${jsUiContent}\n</script>` },
66117
{
67118
searchValue: '//diff2html-fileListToggle',
@@ -118,7 +169,7 @@ export function getOutput(options: Diff2HtmlConfig, config: Configuration, input
118169
switch (config.formatType) {
119170
case 'html': {
120171
const htmlContent = html(diffJson, { ...options });
121-
return prepareHTML(htmlContent, config);
172+
return prepareHTML(htmlContent, config,options.colorScheme);
122173
}
123174
case 'json': {
124175
return JSON.stringify(diffJson);

‎src/configuration.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export function parseArgv(argv: Argv): [Diff2HtmlConfig, Configuration] {
3434
renderNothingWhenEmpty: argv.renderNothingWhenEmpty,
3535
maxLineSizeInBlockForComparison: argv.maxLineSizeInBlockForComparison,
3636
maxLineLengthHighlight: argv.maxLineLengthHighlight,
37+
colorScheme: argv.colorScheme,
3738
};
3839

3940
const defaultPageTitle = 'Diff to HTML by rtfpessoa';

‎src/yargs.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import yargs from 'yargs';
2+
import { ColorSchemeType } from 'diff2html/lib/types.js';
23

34
import {
45
StyleType,
@@ -35,6 +36,7 @@ export type Argv = {
3536
title?: string;
3637
ignore?: string[];
3738
extraArguments: string[];
39+
colorScheme: ColorSchemeType;
3840
};
3941

4042
const defaults: Argv = {
@@ -59,6 +61,7 @@ const defaults: Argv = {
5961
htmlWrapperTemplate: undefined,
6062
title: undefined,
6163
extraArguments: [],
64+
colorScheme: ColorSchemeType.AUTO,
6265
};
6366

6467
type ArgvChoices = {
@@ -70,6 +73,7 @@ type ArgvChoices = {
7073
input: ReadonlyArray<InputType>;
7174
output: ReadonlyArray<OutputType>;
7275
diffy: ReadonlyArray<DiffyType>;
76+
colorScheme: ReadonlyArray<ColorSchemeType>;
7377
};
7478

7579
const choices: ArgvChoices = {
@@ -81,6 +85,7 @@ const choices: ArgvChoices = {
8185
input: ['file', 'command', 'stdin'],
8286
output: ['preview', 'stdout'],
8387
diffy: ['browser', 'pbcopy', 'print'],
88+
colorScheme: [ColorSchemeType.AUTO, ColorSchemeType.DARK, ColorSchemeType.LIGHT],
8489
};
8590

8691
export async function setup(): Promise<Argv> {
@@ -113,6 +118,12 @@ export async function setup(): Promise<Argv> {
113118
type: 'boolean',
114119
default: defaults.highlightCode,
115120
})
121+
.option('colorScheme', {
122+
alias: 'cs',
123+
describe: 'Color scheme of HTML output',
124+
choices: choices.colorScheme,
125+
default: defaults.colorScheme,
126+
})
116127
.option('summary', {
117128
alias: 'su',
118129
describe: 'Show files summary',

‎template.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
Author: rtfpessoa
1010
-->
1111

12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
13-
1412
<!--diff2html-css-->
1513

1614
<!--diff2html-js-ui-->

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /