Fix table colors in dark mode (#700)

* Add borders to tables

Signed-off-by: Pete Lumbis <pete@upbound.io>

* margins and padding around tables

Signed-off-by: Pete Lumbis <pete@upbound.io>

* Fix table mode coloring. Resolves #690

Signed-off-by: Pete Lumbis <pete@upbound.io>

* table styling fixes

Signed-off-by: Pete Lumbis <pete@upbound.io>

---------

Signed-off-by: Pete Lumbis <pete@upbound.io>

themes/geekboot/assets/scss/_content.scss

@@ -115,7 +115,16 @@ h3, h4, h5, h6 {
   border-radius: 6px;
   border-collapse: separate;
   border-spacing: 0px;
+  margin-bottom: 0px !important;
 }
+
+.table-responsive {
+  margin-bottom: 1rem;
+  border: 1px solid #{$fog-200};
+  background-color: var(--body-background) !important;
+  color: var(--body-font-color);
+}
+
 // Hide bottom borders and wider padding for header items
 .table th {
   border-bottom: none;
@@ -131,6 +140,7 @@ h3, h4, h5, h6 {
   padding-right: 24px;
   padding-top: 12px;
   padding-bottom: 12px;
+  border-top: 1px solid #{$fog-300};
 }
 // Decrease padding for small tables
 .table.table-sm th {
@@ -146,6 +156,9 @@ h3, h4, h5, h6 {
   padding-bottom: 8px;
 }
 
+.table a{
+  color: var(--content-link-color);
+}
 
 // Color theme toggle
 .form-check-input:checked {
@@ -153,12 +166,6 @@ h3, h4, h5, h6 {
   border-color: #{$aqua-700};
 }
 
-.table {
-  color: var(--font-body-color);
-  // Override bootstrap defaults to support dark mode
-  --bs-table-hover-color: var(--font-body-color);
-}
-
 .ga-tag{
   color: var(--toc-font-color);
 

themes/geekboot/assets/scss/dark-mode.scss

@@ -107,22 +107,19 @@
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
     }
 
-    // Tables
-    .table td {
-        border-top: 1px solid #{$fog-700};
-    }
     .table {
-        border: 1px solid #{$fog-700};
+        --bs-table-bg: var(--body-background);
-        --bs-table-hover-bg: #{$fog-100};
+        --bs-table-color-state: var(--body-font-color);
+        --bs-table-striped-color: #{$fog-800};
+        --bs-table-striped-bg: #{$fog-800};
     }
-    .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) {
+
-        --bs-table-accent-bg: #{$fog-950};
+    .table-hover > tbody > tr:hover > * {
-        color: #{$fog-0};
+        background-color: #{$fog-700};
-    }
+        color: var(--body-font-color);
-    .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) {
-        --bs-table-hover-bg: #{$fog-1000} !important;
     }
 
+
     // Add border to top nav and footer
     .docs-navbar {
         border-bottom: 1px solid #{$fog-850};
@@ -153,11 +150,6 @@
             }
         }
     }
-
-    //Striped table font color
-    .table-striped-columns > :not(caption) > tr > :nth-child(even){
-        color: inherit !important;
-    }
 }
 
 

themes/geekboot/assets/scss/light-mode.scss

@@ -115,19 +115,16 @@
     }
 
     // Tables
-    .table td {
-        border-top: 1px solid #{$fog-200};
-    }
     .table {
-        border: 1px solid #{$fog-200};
+        --bs-table-bg: var(--body-background);
-        --bs-table-hover-bg: #{$fog-0};
+        --bs-table-color-state: var(--body-font-color);
+        --bs-table-striped-color: #{$fog-50};
+        --bs-table-striped-bg: #{$fog-50};
     }
-    .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) {
+
-        --bs-table-accent-bg: #{$fog-50};
+    .table-hover > tbody > tr:hover > * {
-        color: #{$fog-1000};
+        background-color: #{$fog-50};
-    }
+        color: var(--body-font-color);
-    .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) {
-        --bs-table-hover-bg: #{$fog-0} !important;
     }
 
     // Tab Colors

themes/geekboot/layouts/shortcodes/table.html

@@ -1,8 +1,8 @@
 {{ $htmlTable := .Inner | markdownify }}
 {{ $old := "<table>" }}
 {{ $class := .Get 0 | default "table"}}
-{{ $new := printf "<table class=\"%s\">" $class }}
+{{ $new := printf "<table class=\"%s \">" $class }}
 {{ $htmlTable := replace $htmlTable $old $new }}
-<div class="table-responsive">
+<div class="table-responsive border rounded">
 {{ $htmlTable | safeHTML }}
 </div>