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

Browse files
misc fixes to style
1 parent 4aed5a4 commit 8d26249

File tree

2 files changed

+54
-5
lines changed

2 files changed

+54
-5
lines changed

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

‎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://diff2html.xyz/demo.css?3b34d507487da05dfc0c" />
13-
1412
<!--diff2html-css-->
1513

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

0 commit comments

Comments
(0)

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