Fix background color of tables

closes #1684

Author: Gerrit0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Unreleased
 
+### Bug Fixes
+
+-   Fix background color of tables in dark mode, closes #1684.
+
 ## v0.22.1 (2021-08-10)
 
 ### Bug Fixes

examples/basic/src/markdown.ts

@@ -3,3 +3,15 @@
  * @see https://github.com/TypeStrong/typedoc/issues/1395
  */
 export const emailAddressInComment = true;
+
+/**
+ * Tables are also supported
+ *
+ * | Test | Test |
+ * | ---- | ---- |
+ * | 1 | `code` |
+ * | 2 | [#1684](https://github.com/TypeStrong/typedoc/issues/1684) |
+ * | 3 | Third row |
+ * | 4 | Fourth row |
+ */
+export const table = true;

static/style.css

@@ -2,14 +2,15 @@
 
 :root {
     /* Light */
-    --light-color-background: #fdfdfd;
+    --light-color-background: #fcfcfc;
+    --light-color-secondary-background: #fff;
     --light-color-text: #222;
     --light-color-text-aside: #707070;
     --light-color-link: #4da6ff;
     --light-color-menu-divider: #eee;
     --light-color-menu-divider-focus: #000;
     --light-color-menu-label: #707070;
-    --light-color-panel: #fff;
+    --light-color-panel: var(--light-color-secondary-background);
     --light-color-panel-divider: #eee;
     --light-color-comment-tag: #707070;
     --light-color-comment-tag-text: #fff;
@@ -25,13 +26,14 @@
 
     /* Dark */
     --dark-color-background: #36393f;
+    --dark-color-secondary-background: #2f3136;
     --dark-color-text: #ffffff;
     --dark-color-text-aside: #e6e4e4;
     --dark-color-link: #00aff4;
     --dark-color-menu-divider: #eee;
     --dark-color-menu-divider-focus: #000;
     --dark-color-menu-label: #707070;
-    --dark-color-panel: #2f3136;
+    --dark-color-panel: var(--dark-color-secondary-background);
     --dark-color-panel-divider: #818181;
     --dark-color-comment-tag: #dcddde;
     --dark-color-comment-tag-text: #2f3136;
@@ -49,6 +51,7 @@
 @media (prefers-color-scheme: light) {
     :root {
         --color-background: var(--light-color-background);
+        --color-secondary-background: var(--light-color-secondary-background);
         --color-text: var(--light-color-text);
         --color-text-aside: var(--light-color-text-aside);
         --color-link: var(--light-color-link);
@@ -74,6 +77,7 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: var(--dark-color-background);
+        --color-secondary-background: var(--dark-color-secondary-background);
         --color-text: var(--dark-color-text);
         --color-text-aside: var(--dark-color-text-aside);
         --color-link: var(--dark-color-link);
@@ -102,6 +106,7 @@ body {
 
 body.light {
     --color-background: var(--light-color-background);
+    --color-secondary-background: var(--light-color-secondary-background);
     --color-text: var(--light-color-text);
     --color-text-aside: var(--light-color-text-aside);
     --color-link: var(--light-color-link);
@@ -125,6 +130,7 @@ body.light {
 
 body.dark {
     --color-background: var(--dark-color-background);
+    --color-secondary-background: var(--dark-color-secondary-background);
     --color-text: var(--dark-color-text);
     --color-text-aside: var(--dark-color-text-aside);
     --color-link: var(--dark-color-link);
@@ -894,21 +900,21 @@ footer .tsd-legend {
     margin-top: 10px;
     word-break: normal;
     word-break: keep-all;
+    border-collapse: collapse;
 }
 .tsd-panel table th {
     font-weight: bold;
 }
 .tsd-panel table th,
 .tsd-panel table td {
     padding: 6px 13px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-panel-divider);
 }
 .tsd-panel table tr {
-    background-color: #fff;
-    border-top: 1px solid #ccc;
+    background: var(--color-background);
 }
-.tsd-panel table tr:nth-child(2n) {
-    background-color: #f8f8f8;
+.tsd-panel table tr:nth-child(even) {
+    background: var(--color-secondary-background);
 }
 
 .tsd-panel-group {