style: fix SpreadSheet dark mode display (#1533)

Author: aouos

src/guide/extras/demos/SpreadSheet.vue

@@ -26,7 +26,8 @@ const cols = cells.map((_, i) => String.fromCharCode(65 + i))
 
 <style scoped>
 th {
-  background-color: #eee;
+  color: var(--vt-c-text-1);
+  background-color: var(--vt-c-bg-mute);
   padding: 0 1em;
 }
 
@@ -39,7 +40,7 @@ tr:first-of-type th:first-of-type {
 }
 
 td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--vt-c-bg-mute);
   padding: 0;
 }
 </style>

src/guide/extras/demos/SpreadSheetCell.vue

@@ -33,6 +33,7 @@ function update(e) {
   height: 1.5em;
   line-height: 1.5;
   font-size: 15px;
+  color: var(--vt-c-text-1);
 }
 
 .cell span {
@@ -46,7 +47,7 @@ function update(e) {
 }
 
 .cell input:focus {
-  border: 2px solid blue;
-  background-color: #fff;
+  border: 2px solid var(--vt-c-divider);
+  color: var(--vt-c-text-1);
 }
 </style>