PumasAI · jkrumbiegel · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,11 @@
 
 ## Unreleased
 
+- Made HTML tables dark mode compatible by reusing foreground color for the lines [#62](https://github.com/PumasAI/SummaryTables.jl/pull/62).
+
 ## 3.0.2 - 2024-11-27
 
-- Add extra escape characters to Typst [#54](https://github.com/PumasAI/SummaryTables.jl/pull/54).
+- Added extra escape characters to Typst [#54](https://github.com/PumasAI/SummaryTables.jl/pull/54).
 
 ## 3.0.1 - 2024-10-24
 

diff --git a/src/html.jl b/src/html.jl
@@ -49,7 +49,7 @@ function Base.show(io::IO, ::MIME"text/html", ct::Table)
         </style>
     """)
     # border-collapse requires a separate row/cell to insert a border, it can't be put on <tfoot>
-    println(_io, "    <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom: 1.5px solid black; padding: 0\"></td></tr>")
+    println(_io, "    <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom: 1.5px solid currentColor; padding: 0\"></td></tr>")
 
     validate_rowgaps(ct.rowgaps, size(matrix, 1))
     validate_colgaps(ct.colgaps, size(matrix, 2))
@@ -61,7 +61,7 @@ function Base.show(io::IO, ::MIME"text/html", ct::Table)
         if row == ct.footer
             print(_io, "    <tfoot>\n")
             # border-collapse requires a separate row/cell to insert a border, it can't be put on <tfoot>
-            print(_io, "        <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom:1px solid black;padding:0\"></td></tr>")
+            print(_io, "        <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom:1px solid currentColor;padding:0\"></td></tr>")
         end
         print(_io, "    <tr>\n")
         for col in 1:size(matrix, 2)
@@ -80,12 +80,12 @@ function Base.show(io::IO, ::MIME"text/html", ct::Table)
         print(_io, "    </tr>\n")
         if row == ct.header
             # border-collapse requires a separate row/cell to insert a border, it can't be put on <thead>
-            print(_io, "        <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom:1px solid black;padding:0\"></td></tr>")
+            print(_io, "        <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom:1px solid currentColor;padding:0\"></td></tr>")
         end
     end
 
     # border-collapse requires a separate row/cell to insert a border, it can't be put on <tfoot>
-    println(_io, "    <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom: 1.5px solid black; padding: 0\"></td></tr>")
+    println(_io, "    <tr><td colspan=\"$(size(matrix, 2))\" style=\"border-bottom: 1.5px solid currentColor; padding: 0\"></td></tr>")
 
     if !isempty(annotations) || !isempty(ct.footnotes)
         print(_io, "    <tr><td colspan=\"$(size(matrix, 2))\" style=\"font-size: 0.8em;\">")
@@ -183,7 +183,7 @@ function print_html_cell(io, cell::SpannedCell, rowgaps, colgaps)
         print(io, "padding-right:$(padding_right/2)pt;")
     end
     if cell.style.border_bottom
-        print(io, "border-bottom:1px solid black; ")
+        print(io, "border-bottom:1px solid currentColor; ")
     end
     padding_bottom = get(rowgaps, cell.span[1].stop, nothing)
     if padding_bottom !== nothing

diff --git a/test/references/annotations/annotated_float.txt b/test/references/annotations/annotated_float.txt
@@ -1,6 +1,6 @@
-<table class="st-f42cb06e">
+<table class="st-395962c2">
     <style>
-        .st-f42cb06e {
+        .st-395962c2 {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,29 +9,29 @@
             line-height: 1.2em;
         }
 
-        .st-f42cb06e tr td {
+        .st-395962c2 tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-f42cb06e br {
+        .st-395962c2 br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-f42cb06e sub {
+        .st-395962c2 sub {
             line-height: 0;
         }
 
-        .st-f42cb06e sup {
+        .st-395962c2 sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="1" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="1" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">0.124<sup>A</sup></td>
     </tr>
-    <tr><td colspan="1" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="1" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr><td colspan="1" style="font-size: 0.8em;"><sup>A</sup> Note 1</td></tr>
 </table>
diff --git a/test/references/annotations/automatic_annotations.txt b/test/references/annotations/automatic_annotations.txt
@@ -1,6 +1,6 @@
-<table class="st-11d3bcb5">
+<table class="st-f9fe32b0">
     <style>
-        .st-11d3bcb5 {
+        .st-f9fe32b0 {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,26 +9,26 @@
             line-height: 1.2em;
         }
 
-        .st-11d3bcb5 tr td {
+        .st-f9fe32b0 tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-11d3bcb5 br {
+        .st-f9fe32b0 br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-11d3bcb5 sub {
+        .st-f9fe32b0 sub {
             line-height: 0;
         }
 
-        .st-11d3bcb5 sup {
+        .st-f9fe32b0 sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">A<sup>1</sup></td>
         <td style="text-align:center;">B<sup>2</sup></td>
@@ -37,6 +37,6 @@
         <td style="text-align:center;">C<sup>3</sup></td>
         <td style="text-align:center;">D<sup>1</sup></td>
     </tr>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr><td colspan="2" style="font-size: 0.8em;"><sup>1</sup> Note 1<br/><sup>2</sup> Note 2<br/><sup>3</sup> Note 3</td></tr>
 </table>
diff --git a/test/references/annotations/manual_annotations.txt b/test/references/annotations/manual_annotations.txt
@@ -1,6 +1,6 @@
-<table class="st-926b343b">
+<table class="st-df15be76">
     <style>
-        .st-926b343b {
+        .st-df15be76 {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,26 +9,26 @@
             line-height: 1.2em;
         }
 
-        .st-926b343b tr td {
+        .st-df15be76 tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-926b343b br {
+        .st-df15be76 br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-926b343b sub {
+        .st-df15be76 sub {
             line-height: 0;
         }
 
-        .st-926b343b sup {
+        .st-df15be76 sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">A<sup>X</sup></td>
         <td style="text-align:center;">B<sup>Y</sup></td>
@@ -37,6 +37,6 @@
         <td style="text-align:center;">C<sup>1</sup></td>
         <td style="text-align:center;">D<sup>2</sup></td>
     </tr>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr><td colspan="2" style="font-size: 0.8em;"><sup>1</sup> Note 3<br/><sup>2</sup> Note 4<br/><sup>X</sup> Note 1<br/><sup>Y</sup> Note 2</td></tr>
 </table>
diff --git a/test/references/character_escaping/problematic_characters.txt b/test/references/character_escaping/problematic_characters.txt
@@ -1,6 +1,6 @@
-<table class="st-10cadcb1">
+<table class="st-900727ee">
     <style>
-        .st-10cadcb1 {
+        .st-900727ee {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,28 +9,28 @@
             line-height: 1.2em;
         }
 
-        .st-10cadcb1 tr td {
+        .st-900727ee tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-10cadcb1 br {
+        .st-900727ee br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-10cadcb1 sub {
+        .st-900727ee sub {
             line-height: 0;
         }
 
-        .st-10cadcb1 sup {
+        .st-900727ee sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="1" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="1" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">&amp; % $ # _ { } ~ ^ \\ &lt; &gt; &quot; &apos; @ `</td>
     </tr>
-    <tr><td colspan="1" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="1" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
 </table>
diff --git a/test/references/global_rounding/auto_false_1.txt b/test/references/global_rounding/auto_false_1.txt
@@ -1,6 +1,6 @@
-<table class="st-862f758f">
+<table class="st-a670f4a5">
     <style>
-        .st-862f758f {
+        .st-a670f4a5 {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,26 +9,26 @@
             line-height: 1.2em;
         }
 
-        .st-862f758f tr td {
+        .st-a670f4a5 tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-862f758f br {
+        .st-a670f4a5 br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-862f758f sub {
+        .st-a670f4a5 sub {
             line-height: 0;
         }
 
-        .st-862f758f sup {
+        .st-a670f4a5 sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">1</td>
         <td style="text-align:center;">1.0e7</td>
@@ -41,5 +41,5 @@
         <td style="text-align:center;">1 &amp; 0.001</td>
         <td style="text-align:center;">1<br>0.001</td>
     </tr>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
 </table>
diff --git a/test/references/global_rounding/auto_false_3.txt b/test/references/global_rounding/auto_false_3.txt
@@ -1,6 +1,6 @@
-<table class="st-e9b63b85">
+<table class="st-6f134c9a">
     <style>
-        .st-e9b63b85 {
+        .st-6f134c9a {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,26 +9,26 @@
             line-height: 1.2em;
         }
 
-        .st-e9b63b85 tr td {
+        .st-6f134c9a tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-e9b63b85 br {
+        .st-6f134c9a br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-e9b63b85 sub {
+        .st-6f134c9a sub {
             line-height: 0;
         }
 
-        .st-e9b63b85 sup {
+        .st-6f134c9a sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">1.41</td>
         <td style="text-align:center;">1.24e7</td>
@@ -41,5 +41,5 @@
         <td style="text-align:center;">1.23 &amp; 0.00123</td>
         <td style="text-align:center;">1.23<br>0.00123</td>
     </tr>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
 </table>
diff --git a/test/references/global_rounding/auto_true_1.txt b/test/references/global_rounding/auto_true_1.txt
@@ -1,6 +1,6 @@
-<table class="st-2d758f8a">
+<table class="st-073b937a">
     <style>
-        .st-2d758f8a {
+        .st-073b937a {
             border: none;
             margin: 0 auto;
             padding: 0.25rem;
@@ -9,26 +9,26 @@
             line-height: 1.2em;
         }
 
-        .st-2d758f8a tr td {
+        .st-073b937a tr td {
             vertical-align: top;
             padding: 0;
             border: none;
         }
 
-        .st-2d758f8a br {
+        .st-073b937a br {
             line-height: 0em;
             margin: 0;
         }
 
-        .st-2d758f8a sub {
+        .st-073b937a sub {
             line-height: 0;
         }
 
-        .st-2d758f8a sup {
+        .st-073b937a sup {
             line-height: 0;
         }
     </style>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
     <tr>
         <td style="text-align:center;">1.0</td>
         <td style="text-align:center;">1.0e7</td>
@@ -41,5 +41,5 @@
         <td style="text-align:center;">1.0 &amp; 0.001</td>
         <td style="text-align:center;">1.0<br>0.001</td>
     </tr>
-    <tr><td colspan="2" style="border-bottom: 1.5px solid black; padding: 0"></td></tr>
+    <tr><td colspan="2" style="border-bottom: 1.5px solid currentColor; padding: 0"></td></tr>
 </table>