jaseg/wsdiff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
jaseg 2025-07-28 00:46:43 +02:00
parent 5fa293138c
commit 16de22ae19
2 changed files with 128 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

2
pyproject.toml
View file

@ -10,7 +10,7 @@ classifiers = [
"License :: OSI Approved :: MIT License", "License :: OSI Approved :: MIT License",
"Operating System :: OS Independent", "Operating System :: OS Independent",
] ]
dependencies = ["pygments"] dependencies = ["pygments", "witchhazel"]
[project.urls] [project.urls]
"Source" = "https://git.jaseg.de/wsdiff.git" "Source" = "https://git.jaseg.de/wsdiff.git"

226
src/wsdiff.py
View file

@ -33,12 +33,16 @@ from collections import defaultdict
from pathlib import Path from pathlib import Path
import re import re
from itertools import groupby, chain from itertools import groupby, chain
from functools import lru_cache
import pygments import pygments
from pygments.formatter import Formatter
from pygments.formatters import HtmlFormatter from pygments.formatters import HtmlFormatter
from pygments.lexer import RegexLexer from pygments.lexer import RegexLexer
from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, get_all_lexers, LEXERS from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, get_all_lexers, LEXERS
from pygments import token from pygments import token
from pygments.token import STANDARD_TYPES
import witchhazel
DIFF_STYLE_TOGGLE = r''' DIFF_STYLE_TOGGLE = r'''
<div id="wsd-js-controls"> <div id="wsd-js-controls">
@ -55,14 +59,92 @@ DIFF_STYLE_TOGGLE = r'''
''' '''
MAIN_CSS = r''' MAIN_CSS = r'''
@media (prefers-color-scheme: light) {
html {
--c-bg-primary: #ffffff;
--c-fg-primary: #000000;
--c-bg-auxiliary: #f8f8f8;
--c-fg-auxiliary: #a0a0a0;
--c-border-line: #e0e0e0;
--c-bg-insert: #ecfdf0;
--c-bg-delete: #fbe9eb;
--c-bg-delete-lineno: #f9d7dc;
--c-fg-delete-lineno: #ae969a;
--c-bg-delete-word: #fac5cd;
--c-fg-delete-word: #400000;
--c-fg-insert-word: #004000;
--c-bg-insert-word: #c7f0d2;
--c-fg-insert-lineno: #9bb0a1;
--c-bg-insert-lineno: #ddfbe6;
--c-bg-empty: #f0f0f0;
--c-fg-foldline: #bbbbbb;
--c-border-delete: #e0c8c8; /* pick a darker border color inside the light red gutter */
}
}
@media (prefers-color-scheme: dark) {
html {
--c-bg-primary: #010409;
--c-fg-primary: #a0a0a0;
--c-bg-auxiliary: #0d1117;
--c-fg-auxiliary: #f0f6fc;
--c-fg-foldline: #bbbbbb;
--c-border-line: #3d444d;
--c-bg-insert: #223738;
--c-bg-delete: #280d1f;
--c-bg-delete-lineno: #421632;
--c-fg-delete-lineno: #ae969a;
--c-bg-delete-word: #421632;
--c-fg-delete-word: #fac5cd;
--c-fg-insert-word: #c7f0d2;
--c-bg-insert-word: #325148;
--c-fg-insert-lineno: #9bb0a1;
--c-bg-insert-lineno: #325148;
--c-bg-empty: #080b0f;
--c-border-delete: #e0c8c8;
}
}
@media print {
html {
/* Copy of the light theme, but we clip all light gray backgrounds to white. */
--c-bg-primary: #ffffff;
--c-fg-primary: #000000;
--c-bg-auxiliary: #ffffff;
--c-fg-auxiliary: #a0a0a0;
--c-border-line: #e0e0e0;
--c-bg-insert: #ecfdf0;
--c-bg-delete: #fbe9eb;
--c-bg-delete-lineno: #f9d7dc;
--c-fg-delete-lineno: #ae969a;
--c-bg-delete-word: #fac5cd;
--c-fg-delete-word: #400000;
--c-fg-insert-word: #004000;
--c-bg-insert-word: #c7f0d2;
--c-fg-insert-lineno: #9bb0a1;
--c-bg-insert-lineno: #ddfbe6;
--c-bg-empty: #ffffff;
--c-fg-foldline: #bbbbbb;
--c-border-delete: #e0c8c8;
}
}
@layer wsd-base-style { @layer wsd-base-style {
html {
background-color: var(--c-bg-primary);
height: 100%;
width: 100%;
}
#wsd-js-controls { #wsd-js-controls {
display: none; display: none;
background-color: #f8f8f8; color: var(--c-fg-primary);
background-color: var(--c-bg-auxiliary);
padding: 5px 20px; padding: 5px 20px;
font-size: 10pt; font-size: 10pt;
font-weight: bold; font-weight: bold;
border: 1px solid #e0e0e0; border: 1px solid var(--c-border-line);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -79,8 +161,8 @@ MAIN_CSS = r'''
} }
.wsd-file-title { .wsd-file-title {
background-color: #f8f8f8; background-color: var(--c-bg-auxiliary);
border-bottom: solid 1px #e0e0e0; border-bottom: solid 1px var(--c-border-line);
} }
} }
@ -117,8 +199,8 @@ MAIN_CSS = r'''
.wsd-file-container { .wsd-file-container {
font-family: monospace; font-family: monospace;
font-size: 9pt; font-size: 9pt;
background-color: #f8f8f8; background-color: var(--c-bg-auxiliary);
border: solid 1px #e0e0e0; border: solid 1px var(--c-border-line);
margin: 15px; margin: 15px;
} }
@ -140,11 +222,16 @@ MAIN_CSS = r'''
direction: rtl; direction: rtl;
} }
.wsd-diff-files {
color: var(--c-fg-primary);
}
.wsd-diff { .wsd-diff {
background-color: var(--c-bg-primary);
overflow-x: auto; overflow-x: auto;
display: grid; display: grid;
align-items: start; align-items: start;
border-top: 1px solid #e0e0e0; border-top: 1px solid var(--c-border-line);
} }
.wsd-line { .wsd-line {
@ -165,31 +252,31 @@ MAIN_CSS = r'''
} }
.wsd-line.wsd-left.wsd-change, .wsd-line.wsd-left.wsd-insert { .wsd-line.wsd-left.wsd-change, .wsd-line.wsd-left.wsd-insert {
background-color: #fbe9eb; background-color: var(--c-bg-delete);
} }
.wsd-line.wsd-right.wsd-change, .wsd-line.wsd-right.wsd-insert { .wsd-line.wsd-right.wsd-change, .wsd-line.wsd-right.wsd-insert {
background-color: #ecfdf0; background-color: var(--c-bg-insert);
} }
.wsd-lineno.wsd-left.wsd-change, .wsd-lineno.wsd-left.wsd-insert { .wsd-lineno.wsd-left.wsd-change, .wsd-lineno.wsd-left.wsd-insert {
background-color: #f9d7dc; background-color: var(--c-bg-delete-lineno);
color: #ae969a; color: var(--c-fg-delete-lineno);
} }
.wsd-lineno.wsd-right.wsd-change, .wsd-lineno.wsd-right.wsd-insert { .wsd-lineno.wsd-right.wsd-change, .wsd-lineno.wsd-right.wsd-insert {
background-color: #ddfbe6; background-color: var(--c-bg-insert-lineno);
color: #9bb0a1; color: var(--c-fg-insert-lineno);
} }
.wsd-right > .wsd-word-change { .wsd-right > .wsd-word-change {
background-color: #c7f0d2; background-color: var(--c-bg-insert-word);
color: #004000; color: var(--c-fg-insert-word);
} }
.wsd-left > .wsd-word-change { .wsd-left > .wsd-word-change {
background-color: #fac5cd; background-color: var(--c-bg-delete-word);
color: #400000; color: var(--c-fg-delete-word);
} }
.wsd-lineno { .wsd-lineno {
@ -200,22 +287,18 @@ MAIN_CSS = r'''
overflow: clip; overflow: clip;
position: relative; position: relative;
text-align: right; text-align: right;
color: #a0a0a0; color: var(--c-fg-auxiliary);
background-color: #f8f8f8; background-color: var(--c-bg-auxiliary);
border-right: 1px solid #e0e0e0; border-right: 1px solid var(--c-border-line);
align-self: stretch; align-self: stretch;
} }
.wsd-lineno.wsd-change, .wsd-lineno.wsd-insert {
color: #000000;
}
.wsd-lineno::after { .wsd-lineno::after {
position: absolute; position: absolute;
right: 0; right: 0;
content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳"; content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳";
white-space: pre; white-space: pre;
color: #a0a0a0; color: var(--c-fg-auxiliary);
} }
/* Default rules for split diff for wide screens (laptops) */ /* Default rules for split diff for wide screens (laptops) */
@ -224,7 +307,7 @@ MAIN_CSS = r'''
} }
.wsd-empty { .wsd-empty {
background-color: #f0f0f0; background-color: var(--c-bg-empty);
align-self: stretch; align-self: stretch;
} }
@ -248,16 +331,16 @@ MAIN_CSS = r'''
grid-column: 1 / span 4; grid-column: 1 / span 4;
display: flex; display: flex;
justify-content: center; justify-content: center;
color: #a0a0a0; color: var(--c-fg-auxiliary);
background-image: radial-gradient(#BBBBBB 1px, transparent 0); background-image: radial-gradient(var(--c-fg-foldline) 1px, transparent 0);
background-size: 10px 10px; background-size: 10px 10px;
background-position: center; background-position: center;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.wsd-collapse-controls > label { .wsd-collapse-controls > label {
background-color: #f8f8f8; background-color: var(--c-bg-auxiliary);
} }
.wsd-collapse:has(input[type="checkbox"]:checked) > span { .wsd-collapse:has(input[type="checkbox"]:checked) > span {
@ -300,7 +383,7 @@ MAIN_CSS = r'''
content: ""; content: "";
align-self: stretch; align-self: stretch;
grid-column: 1; grid-column: 1;
border-right: 1px solid #e0e0e0; border-right: 1px solid var(--c-border-line);
margin-right: -6px; /* move border into column gap, and 1px over to align with other borders */ margin-right: -6px; /* move border into column gap, and 1px over to align with other borders */
} }
@ -308,12 +391,12 @@ MAIN_CSS = r'''
content: ""; content: "";
align-self: stretch; align-self: stretch;
grid-column: 2; grid-column: 2;
border-left: 1px solid #e0c8c8; /* pick a darker border color inside the light red gutter */ border-left: 1px solid var(--c-border-delete);
margin-left: -5px; margin-left: -5px;
} }
.wsd-lineno.wsd-left.wsd-insert { .wsd-lineno.wsd-left.wsd-insert {
border-right: 1px solid #e0c8c8; border-right: 1px solid var(--c-border-delete);
} }
.wsd-lineno.wsd-right.wsd-change::after { .wsd-lineno.wsd-right.wsd-change::after {
@ -359,7 +442,7 @@ MAIN_CSS = r'''
} }
.wsd-lineno.wsd-left.wsd-empty { .wsd-lineno.wsd-left.wsd-empty {
background-color: #ddfbe6; background-color: var(--c-bg-insert-lineno);
} }
/* line continuation arrows only in right line number column */ /* line continuation arrows only in right line number column */
@ -369,7 +452,7 @@ MAIN_CSS = r'''
.wsd-lineno.wsd-left.wsd-insert::before { .wsd-lineno.wsd-left.wsd-insert::before {
content: ""; content: "";
grid-column: 2; grid-column: 2;
border-left: 1px solid #e0c8c8; /* pick a darker border color inside the light red gutter */ border-left: 1px solid var(--c-border-delete); /* pick a darker border color inside the light red gutter */
margin-left: -5px; margin-left: -5px;
} }
} }
@ -465,70 +548,6 @@ HTML_TEMPLATE = r'''
</html> </html>
''' '''
PYGMENTS_CSS = '''
body .wsd-hll { background-color: #ffffcc }
body .wsd-c { color: #177500 } /* Comment */
body .wsd-err { color: #000000 } /* Error */
body .wsd-k { color: #A90D91 } /* Keyword */
body .wsd-l { color: #1C01CE } /* Literal */
body .wsd-n { color: #000000 } /* Name */
body .wsd-o { color: #000000 } /* Operator */
body .wsd-cm { color: #177500 } /* Comment.Multiline */
body .wsd-cp { color: #633820 } /* Comment.Preproc */
body .wsd-c1 { color: #177500 } /* Comment.Single */
body .wsd-cs { color: #177500 } /* Comment.Special */
body .wsd-kc { color: #A90D91 } /* Keyword.Constant */
body .wsd-kd { color: #A90D91 } /* Keyword.Declaration */
body .wsd-kn { color: #A90D91 } /* Keyword.Namespace */
body .wsd-kp { color: #A90D91 } /* Keyword.Pseudo */
body .wsd-kr { color: #A90D91 } /* Keyword.Reserved */
body .wsd-kt { color: #A90D91 } /* Keyword.Type */
body .wsd-ld { color: #1C01CE } /* Literal.Date */
body .wsd-m { color: #1C01CE } /* Literal.Number */
body .wsd-s { color: #C41A16 } /* Literal.String */
body .wsd-na { color: #836C28 } /* Name.Attribute */
body .wsd-nb { color: #A90D91 } /* Name.Builtin */
body .wsd-nc { color: #3F6E75 } /* Name.Class */
body .wsd-no { color: #000000 } /* Name.Constant */
body .wsd-nd { color: #000000 } /* Name.Decorator */
body .wsd-ni { color: #000000 } /* Name.Entity */
body .wsd-ne { color: #000000 } /* Name.Exception */
body .wsd-nf { color: #000000 } /* Name.Function */
body .wsd-nl { color: #000000 } /* Name.Label */
body .wsd-nn { color: #000000 } /* Name.Namespace */
body .wsd-nx { color: #000000 } /* Name.Other */
body .wsd-py { color: #000000 } /* Name.Property */
body .wsd-nt { color: #000000 } /* Name.Tag */
body .wsd-nv { color: #000000 } /* Name.Variable */
body .wsd-ow { color: #000000 } /* Operator.Word */
body .wsd-mb { color: #1C01CE } /* Literal.Number.Bin */
body .wsd-mf { color: #1C01CE } /* Literal.Number.Float */
body .wsd-mh { color: #1C01CE } /* Literal.Number.Hex */
body .wsd-mi { color: #1C01CE } /* Literal.Number.Integer */
body .wsd-mo { color: #1C01CE } /* Literal.Number.Oct */
body .wsd-sb { color: #C41A16 } /* Literal.String.Backtick */
body .wsd-sc { color: #2300CE } /* Literal.String.Char */
body .wsd-sd { color: #C41A16 } /* Literal.String.Doc */
body .wsd-s2 { color: #C41A16 } /* Literal.String.Double */
body .wsd-se { color: #C41A16 } /* Literal.String.Escape */
body .wsd-sh { color: #C41A16 } /* Literal.String.Heredoc */
body .wsd-si { color: #C41A16 } /* Literal.String.Interpol */
body .wsd-sx { color: #C41A16 } /* Literal.String.Other */
body .wsd-sr { color: #C41A16 } /* Literal.String.Regex */
body .wsd-s1 { color: #C41A16 } /* Literal.String.Single */
body .wsd-ss { color: #C41A16 } /* Literal.String.Symbol */
body .wsd-bp { color: #5B269A } /* Name.Builtin.Pseudo */
body .wsd-vc { color: #000000 } /* Name.Variable.Class */
body .wsd-vg { color: #000000 } /* Name.Variable.Global */
body .wsd-vi { color: #000000 } /* Name.Variable.Instance */
body .wsd-il { color: #1C01CE } /* Literal.Number.Integer.Long */
'''
from pygments.formatter import Formatter
from pygments.token import STANDARD_TYPES
from functools import lru_cache
@lru_cache(maxsize=256) @lru_cache(maxsize=256)
def get_token_class(ttype): def get_token_class(ttype):
while not (name := STANDARD_TYPES.get(ttype)): while not (name := STANDARD_TYPES.get(ttype)):
@ -677,7 +696,16 @@ def cli():
if args.syntax_css: if args.syntax_css:
syntax_css = Path(args.syntax_css).read_text() syntax_css = Path(args.syntax_css).read_text()
else: else:
syntax_css = PYGMENTS_CSS light_css = HtmlFormatter(classprefix='wsd-', style='xcode').get_style_defs()
dark_css = HtmlFormatter(classprefix='wsd-', style=witchhazel.WitchHazelStyle).get_style_defs()
syntax_css = textwrap.dedent(f'''@media print, (prefers-color-scheme: light) {{
{light_css}
}}
@media (prefers-color-scheme: dark) {{
{dark_css}
}}''')
if args.header: if args.header:
print(string.Template(HTML_TEMPLATE).substitute( print(string.Template(HTML_TEMPLATE).substitute(