From 3083172d993c5ef9e88420531d8327d7b2c73e58 Mon Sep 17 00:00:00 2001
From: Samuel Chin <samuelchin91@gmail.com>
Date: Sat, 10 Jun 2023 21:30:13 -0400
Subject: [PATCH] Fixes "General Information" section of CV in dark mode
 (#1432)

When the dark mode is default, or if you set the page to dark mode and
then refresh, the content in "General Information" can't be seen.
This PR fixes the problem.
---
 _includes/cv/map.html | 16 ++++++-------
 _sass/_base.scss      |  6 +++++
 assets/js/theme.js    | 54 +++++++++++++++++++------------------------
 3 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/_includes/cv/map.html b/_includes/cv/map.html
index e0d1983..83908da 100644
--- a/_includes/cv/map.html
+++ b/_includes/cv/map.html
@@ -1,8 +1,8 @@
-<table class="table table-sm table-borderless table-responsive">
-    {% for content in entry.contents %}
-      <tr>
-        <td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
-        <td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
-      </tr>
-    {% endfor %}
-</table>
\ No newline at end of file
+<table class="table table-sm table-borderless table-responsive table-cv-map">
+  {% for content in entry.contents %}
+    <tr>
+      <td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
+      <td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
+    </tr>
+  {% endfor %}
+</table>
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 48f8ba1..2165cb7 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -376,6 +376,12 @@ footer.sticky-bottom {
   }
 }
 
+.table-cv-map {
+  background-color: transparent;
+  border: none;
+  color: var(--global-text-color);
+}
+
 // Repositories
 
 @media (min-width: 768px) {
diff --git a/assets/js/theme.js b/assets/js/theme.js
index d247e4a..5f57ac4 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -6,10 +6,9 @@ let toggleTheme = (theme) => {
   } else {
     setTheme("dark");
   }
-}
+};
 
-
-let setTheme = (theme) =>  {
+let setTheme = (theme) => {
   transTheme();
   setHighlight(theme);
   setGiscusTheme(theme);
@@ -18,12 +17,12 @@ let setTheme = (theme) =>  {
     document.documentElement.setAttribute("data-theme", theme);
 
     // Add class to tables.
-    let tables = document.getElementsByTagName('table');
-    for(let i = 0; i < tables.length; i++) {
+    let tables = document.getElementsByTagName("table");
+    for (let i = 0; i < tables.length; i++) {
       if (theme == "dark") {
-        tables[i].classList.add('table-dark');
+        tables[i].classList.add("table-dark");
       } else {
-        tables[i].classList.remove('table-dark');
+        tables[i].classList.remove("table-dark");
       }
     }
   } else {
@@ -32,15 +31,16 @@ let setTheme = (theme) =>  {
   localStorage.setItem("theme", theme);
 
   // Updates the background of medium-zoom overlay.
-  if (typeof medium_zoom !== 'undefined') {
+  if (typeof medium_zoom !== "undefined") {
     medium_zoom.update({
-      background: getComputedStyle(document.documentElement)
-          .getPropertyValue('--global-bg-color') + 'ee',  // + 'ee' for trasparency.
-    })
+      background:
+        getComputedStyle(document.documentElement).getPropertyValue(
+          "--global-bg-color"
+        ) + "ee", // + 'ee' for trasparency.
+    });
   }
 };
 
-
 let setHighlight = (theme) => {
   if (theme == "dark") {
     document.getElementById("highlight_theme_light").media = "none";
@@ -49,44 +49,38 @@ let setHighlight = (theme) => {
     document.getElementById("highlight_theme_dark").media = "none";
     document.getElementById("highlight_theme_light").media = "";
   }
-}
-
+};
 
 let setGiscusTheme = (theme) => {
-
   function sendMessage(message) {
-    const iframe = document.querySelector('iframe.giscus-frame');
+    const iframe = document.querySelector("iframe.giscus-frame");
     if (!iframe) return;
-    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app");
   }
 
   sendMessage({
     setConfig: {
-      theme: theme
-    }
+      theme: theme,
+    },
   });
-
-}
-
+};
 
 let transTheme = () => {
   document.documentElement.classList.add("transition");
   window.setTimeout(() => {
     document.documentElement.classList.remove("transition");
-  }, 500)
-}
-
+  }, 500);
+};
 
 let initTheme = (theme) => {
-  if (theme == null || theme == 'null') {
+  if (theme == null || theme == "null") {
     const userPref = window.matchMedia;
-    if (userPref && userPref('(prefers-color-scheme: dark)').matches) {
-        theme = 'dark';
+    if (userPref && userPref("(prefers-color-scheme: dark)").matches) {
+      theme = "dark";
     }
   }
 
   setTheme(theme);
-}
-
+};
 
 initTheme(localStorage.getItem("theme"));