Fix table color (alshedivat#1424)

Fix table color when dark mode is default.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>

Author: george-gca

_config.yml

@@ -378,6 +378,8 @@ bootstrap:
   integrity:
     css: "sha256-DF7Zhf293AJxJNTmh5zhoYYIMs2oXitRfBjY+9L//AY="
     js: "sha256-fgLAgv7fyCGopR/gBNq2iW3ZKIdqIcyshnUULC4vex8="
+bootstrap-table:
+  version: "1.21.4"
 fontawesome:
   version: "5.15.4"
   integrity: "sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4="

_includes/head.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdbootstrap@{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
 
     <!-- Bootstrap Table -->
-    <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css">
+    <link defer rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.css">
 
     <!-- Fonts & Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@{{ site.fontawesome.version }}/css/all.min.css" integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">

_includes/scripts/misc.html

@@ -17,7 +17,7 @@
 {% endif %}
 
   <!-- Bootstrap Table -->
-  <script defer src="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.js"></script>
+  <script defer src="https://unpkg.com/bootstrap-table@{{ site.bootstrap-table.version }}/dist/bootstrap-table.min.js"></script>
 
   <!-- Load Common JS -->
   <script src="{{ '/assets/js/no_defer.js' | relative_url }}"></script>

_sass/_base.scss

@@ -48,6 +48,10 @@ table.table a {
   }
 }
 
+.table-dark {
+  background-color: transparent;
+}
+
 figure,
 img {
   max-width: 90vw;
@@ -946,4 +950,3 @@ nav[data-toggle="toc"] {
     top: 0;
   }
 }
-

assets/js/no_defer.js

@@ -1,6 +1,12 @@
 // add bootstrap classes to tables
 $(document).ready(function() {
   $('table').each(function() {
+    if (document.documentElement.getAttribute("data-theme") == "dark") {
+      $(this).addClass('table-dark');
+    } else {
+      $(this).removeClass('table-dark');
+    }
+
     // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
     if($(this).parents('[class*="news"]').length==0 &&
         $(this).parents('[class*="card"]').length==0 &&
@@ -10,12 +16,6 @@ $(document).ready(function() {
       // add some classes to make the table look better
       // $(this).addClass('table-sm');
       $(this).addClass('table-hover');
-
-      if (document.documentElement.getAttribute("data-theme") == "dark") {
-        $(this).addClass('table-dark');
-      } else {
-        $(this).removeClass('table-dark');
-      }
     }
   })
 });