From 98fba559be32fde65b172aa452760b65542534c8 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 e0d1983ef0ee..83908dafd6e6 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 48f8ba144d51..2165cb7ae088 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 d247e4ad8e76..5f57ac47dbc8 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"));