diff options
| -rw-r--r-- | pyproject.toml | 2 | ||||
| -rw-r--r-- | src/wsdiff.py | 226 |
2 files changed, 128 insertions, 100 deletions
diff --git a/pyproject.toml b/pyproject.toml index a7673e2..c407a22 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -10,7 +10,7 @@ classifiers = [ "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", ] -dependencies = ["pygments"] +dependencies = ["pygments", "witchhazel"] [project.urls] "Source" = "https://git.jaseg.de/wsdiff.git" diff --git a/src/wsdiff.py b/src/wsdiff.py index bb19262..00096fc 100644 --- a/src/wsdiff.py +++ b/src/wsdiff.py @@ -33,12 +33,16 @@ from collections import defaultdict from pathlib import Path import re from itertools import groupby, chain +from functools import lru_cache import pygments +from pygments.formatter import Formatter from pygments.formatters import HtmlFormatter from pygments.lexer import RegexLexer from pygments.lexers import get_lexer_by_name, guess_lexer_for_filename, get_all_lexers, LEXERS from pygments import token +from pygments.token import STANDARD_TYPES +import witchhazel DIFF_STYLE_TOGGLE = r''' <div id="wsd-js-controls"> @@ -55,14 +59,92 @@ DIFF_STYLE_TOGGLE = 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 { + html { + background-color: var(--c-bg-primary); + height: 100%; + width: 100%; + } + #wsd-js-controls { display: none; - background-color: #f8f8f8; + color: var(--c-fg-primary); + background-color: var(--c-bg-auxiliary); padding: 5px 20px; font-size: 10pt; font-weight: bold; - border: 1px solid #e0e0e0; + border: 1px solid var(--c-border-line); position: sticky; top: 0; z-index: 1; @@ -79,8 +161,8 @@ MAIN_CSS = r''' } .wsd-file-title { - background-color: #f8f8f8; - border-bottom: solid 1px #e0e0e0; + background-color: var(--c-bg-auxiliary); + border-bottom: solid 1px var(--c-border-line); } } @@ -117,8 +199,8 @@ MAIN_CSS = r''' .wsd-file-container { font-family: monospace; font-size: 9pt; - background-color: #f8f8f8; - border: solid 1px #e0e0e0; + background-color: var(--c-bg-auxiliary); + border: solid 1px var(--c-border-line); margin: 15px; } @@ -140,11 +222,16 @@ MAIN_CSS = r''' direction: rtl; } + .wsd-diff-files { + color: var(--c-fg-primary); + } + .wsd-diff { + background-color: var(--c-bg-primary); overflow-x: auto; display: grid; align-items: start; - border-top: 1px solid #e0e0e0; + border-top: 1px solid var(--c-border-line); } .wsd-line { @@ -165,31 +252,31 @@ MAIN_CSS = r''' } .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 { - background-color: #ecfdf0; + background-color: var(--c-bg-insert); } .wsd-lineno.wsd-left.wsd-change, .wsd-lineno.wsd-left.wsd-insert { - background-color: #f9d7dc; - color: #ae969a; + background-color: var(--c-bg-delete-lineno); + color: var(--c-fg-delete-lineno); } .wsd-lineno.wsd-right.wsd-change, .wsd-lineno.wsd-right.wsd-insert { - background-color: #ddfbe6; - color: #9bb0a1; + background-color: var(--c-bg-insert-lineno); + color: var(--c-fg-insert-lineno); } .wsd-right > .wsd-word-change { - background-color: #c7f0d2; - color: #004000; + background-color: var(--c-bg-insert-word); + color: var(--c-fg-insert-word); } .wsd-left > .wsd-word-change { - background-color: #fac5cd; - color: #400000; + background-color: var(--c-bg-delete-word); + color: var(--c-fg-delete-word); } .wsd-lineno { @@ -200,22 +287,18 @@ MAIN_CSS = r''' overflow: clip; position: relative; text-align: right; - color: #a0a0a0; - background-color: #f8f8f8; - border-right: 1px solid #e0e0e0; + color: var(--c-fg-auxiliary); + background-color: var(--c-bg-auxiliary); + border-right: 1px solid var(--c-border-line); align-self: stretch; } - .wsd-lineno.wsd-change, .wsd-lineno.wsd-insert { - color: #000000; - } - .wsd-lineno::after { position: absolute; right: 0; content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳"; white-space: pre; - color: #a0a0a0; + color: var(--c-fg-auxiliary); } /* Default rules for split diff for wide screens (laptops) */ @@ -224,7 +307,7 @@ MAIN_CSS = r''' } .wsd-empty { - background-color: #f0f0f0; + background-color: var(--c-bg-empty); align-self: stretch; } @@ -248,16 +331,16 @@ MAIN_CSS = r''' grid-column: 1 / span 4; display: flex; 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-position: center; background-repeat: repeat-x; } .wsd-collapse-controls > label { - background-color: #f8f8f8; + background-color: var(--c-bg-auxiliary); } .wsd-collapse:has(input[type="checkbox"]:checked) > span { @@ -300,7 +383,7 @@ MAIN_CSS = r''' content: ""; align-self: stretch; 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 */ } @@ -308,12 +391,12 @@ MAIN_CSS = r''' content: ""; align-self: stretch; 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; } .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 { @@ -359,7 +442,7 @@ MAIN_CSS = r''' } .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 */ @@ -369,7 +452,7 @@ MAIN_CSS = r''' .wsd-lineno.wsd-left.wsd-insert::before { content: ""; 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; } } @@ -465,70 +548,6 @@ HTML_TEMPLATE = r''' </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) def get_token_class(ttype): while not (name := STANDARD_TYPES.get(ttype)): @@ -677,7 +696,16 @@ def cli(): if args.syntax_css: syntax_css = Path(args.syntax_css).read_text() 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: print(string.Template(HTML_TEMPLATE).substitute( |