在Blue Topaz主题下怎么修改表格样式？

疑问解答
,
1

在Blut Topaz主题下的表格样式怎么修改成自己想要的样式？

想修改成如下github风格的表格样式要怎么操作呀？

image
image1606×955 189 KB

2

我有使用一个 snippet 专门用来调整表格的颜色，代码来自：eluotao

.theme-dark {
  --table-background-color: #13191d;
  --table-background-color-odd: #0e1316;
  --table-border-color: #444a73;
  --table-thead-background-color: #4e95e67e;
  --table-hover-raw-color: #192632;
  --table-hover-color: #28353d;
  --table-hover-thead-color: #3887be;
}


/*table from https://snippets.cacher.io/snippet/018387c872dc39277996 by eluotao*/

.markdown-preview-view table {
  border: 1px solid #141f2e;
}

tbody > tr:nth-child(odd) {
  background-color: var(--table-background-color-odd);
  font-size: 0.875em;
}
 
tbody > tr {
  background-color: var(--table-background-color);
  font-size: 0.875em;
}
 
.markdown-preview-view th,
.markdown-preview-view td{
  padding: 3px 10px;
  border: px solid var(--table-border-color);
}

.markdown-preview-view thead {
  background-color: var(--table-thead-background-color);
  font-size: 0.875em;
}

/*table hover*/
.markdown-preview-view td:hover{
  background-color: var(--table-hover-color);
  transition: 0.3s ease-in-out;
}

/*table raw hover*/
.markdown-preview-view tr:hover{
  background-color: var(--table-hover-raw-color);
  transition: 0.3s ease-in-out;
}

.markdown-preview-view th:hover{
  background-color: var(--table-hover-thead-color);
  transition: 0.3s ease-in-out;
}

调整颜色只需要改最前面的色值就可以了，如果是浅色主题，需要把 dark 改成 light 。
另外需要注意的是，改动表格颜色也同时会影响到日历面板的颜色，我不确定这是我的个例还是它们实际上是同样的 CSS 对象。

3 个赞
3

do not have access to eluotao