Add dark diff theme

This commit is contained in:
orosmatthew 2023-08-26 14:19:03 -04:00
parent 711573cd20
commit 4b3e40decd
3 changed files with 88 additions and 12 deletions

46
web/package-lock.json generated
View File

@ -40,6 +40,7 @@
"eslint-config-prettier": "^9.0.0",
"prettier": "^3.0.2",
"prettier-plugin-svelte": "^3.0.3",
"sass": "^1.66.1",
"svelte": "^4.2.0",
"svelte-check": "^3.5.0",
"tslib": "^2.6.2",
@ -1235,7 +1236,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"devOptional": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
@ -1313,7 +1314,7 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=8"
}
@ -1364,7 +1365,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"devOptional": true,
"dependencies": {
"fill-range": "^7.0.1"
},
@ -1430,7 +1431,7 @@
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"dev": true,
"devOptional": true,
"funding": [
{
"type": "individual",
@ -1457,7 +1458,7 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"devOptional": true,
"dependencies": {
"is-glob": "^4.0.1"
},
@ -1998,7 +1999,7 @@
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
@ -2263,6 +2264,12 @@
"node": ">= 4"
}
},
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"devOptional": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -2314,7 +2321,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"devOptional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@ -2383,7 +2390,7 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=0.12.0"
}
@ -2754,7 +2761,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
@ -3120,7 +3127,7 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"devOptional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@ -3266,6 +3273,23 @@
"rimraf": "bin.js"
}
},
"node_modules/sass": {
"version": "1.66.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
"integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/semver": {
"version": "7.5.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@ -3671,7 +3695,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"devOptional": true,
"dependencies": {
"is-number": "^7.0.0"
},

View File

@ -26,6 +26,7 @@
"eslint-config-prettier": "^9.0.0",
"prettier": "^3.0.2",
"prettier-plugin-svelte": "^3.0.3",
"sass": "^1.66.1",
"svelte": "^4.2.0",
"svelte-check": "^3.5.0",
"tslib": "^2.6.2",

View File

@ -115,5 +115,56 @@
<h3 style="text-align:center">Output</h3>
<textarea use:stretchTextarea class="code mb-3 form-control" disabled>{data.output}</textarea>
<h3 style="text-align:center">Diff</h3>
<div id="diff" />
<div id="diff" class="dark-diff" />
{/if}
<style lang="scss">
:global(.dark-diff) {
:global(.d2h-code-side-linenumber),
:global(.d2h-info),
:global(.d2h-emptyplaceholder),
:global(.d2h-code-side-emptyplaceholder),
:global(.d2h-file-header),
:global(.d2h-tag) {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
:global(span) {
color: var(--bs-body-color);
}
:global(.d2h-file-wrapper) {
border-color: var(--bs-border-color);
}
:global(.d2h-file-header) {
border-bottom-color: var(--bs-border-color);
}
:global(.d2h-info) {
border-color: var(--bs-border-color);
}
:global(.d2h-del) {
background-color: var(--bs-danger-border-subtle);
border-color: var(--bs-danger);
}
:global(del) {
background-color: rgba(210, 85, 97, 0.5);
}
:global(.d2h-ins) {
background-color: var(--bs-success-border-subtle);
border-color: var(--bs-success);
}
:global(.d2h-code-side-emptyplaceholder),
:global(.d2h-emptyplaceholder) {
border-color: var(--bs-border-color);
}
:global(ins) {
background-color: rgba(13, 125, 75, 0.5);
}
}
</style>