8000 Toggle colorscheme on Demo body · rtfpessoa/diff2html@4b42e4b · GitHub
[go: up one dir, main page]

Skip to content

Commit 4b42e4b

Browse files
committed
Toggle colorscheme on Demo body
1 parent 863246e commit 4b42e4b

File tree

3 files changed

+28
-1
lines changed

3 files changed

+28
-1
lines changed

website/templates/pages/demo/content.handlebars

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="hero-body">
33
<div class="container">
44
<h1 class="title is-size-1 is-spaced">Demo<a href="#help">
5-
<svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64"
5+
<svg fill="currentColor" height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64"
66
aria-hidden="true">
77
<path
88
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">

website/templates/pages/demo/demo.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,21 @@
55
.diff-url-btn.is-small {
66
font-size: 0.85rem;
77
}
8+
9+
.d2h-dark-color-scheme .title {
10+
color: #fff;
11+
}
12+
13+
.d2h-dark-color-scheme .footer {
14+
background-color: #2d2d2d;
15+
}
16+
17+
@media (prefers-color-scheme: dark) {
18+
.d2h-auto-color-scheme .title {
19+
color: #fff;
20+
}
21+
22+
.d2h-auto-color-scheme .footer {
23+
background-color: #2d2d2d;
24+
}
25+
}

website/templates/pages/demo/demo.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import '../../../main.css';
55
import 'highlight.js/styles/github.css';
66
import '../../../../src/ui/css/diff2html.css';
77
import './demo.css';
8+
import { colorSchemeToCss } from '../../../../src/render-utils';
9+
import { ColorSchemeType } from '../../../../src/types';
810

911
/*
1012
* Example URLs:
@@ -155,9 +157,16 @@ async function getDiff(request: Request): Promise<string> {
155157

156158
function draw(diffString: string, config: Diff2HtmlUIConfig, elements: Elements): void {
157159
const diff2htmlUi = new Diff2HtmlUI(elements.structure.diffTarget, diffString, config);
160+
161+
setBodyColorScheme(diff2htmlUi.config.colorScheme);
162+
158163
diff2htmlUi.draw();
159164
}
160165

166+
function setBodyColorScheme(colorScheme: ColorSchemeType): void {
167+
document.body.className = colorSchemeToCss(colorScheme);
168+
}
169+
161170
async function prepareInitialState(elements: Elements): Promise<[Diff2HtmlUIConfig, string]> {
162171
const urlParams = getParamsFromSearch(window.location.search);
163172
const currentUrl = (urlParams && urlParams[searchParam]) || 'https://github.com/rtfpessoa/diff2html/pull/106';

0 commit comments

Comments
 (0)
0