Skip to content

Commit 3083172

Browse files
authored
Fixes "General Information" section of CV in dark mode (alshedivat#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.
1 parent 983762c commit 3083172

File tree

3 files changed

+38
-38
lines changed

3 files changed

+38
-38
lines changed

_includes/cv/map.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<table class="table table-sm table-borderless table-responsive">
2-
{% for content in entry.contents %}
3-
<tr>
4-
<td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
5-
<td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
6-
</tr>
7-
{% endfor %}
8-
</table>
1+
<table class="table table-sm table-borderless table-responsive table-cv-map">
2+
{% for content in entry.contents %}
3+
<tr>
4+
<td class="p-1 pr-2 font-weight-bold"><b>{{ content.name }}</b></td>
5+
<td class="p-1 pl-2 font-weight-light text">{{ content.value }}</td>
6+
</tr>
7+
{% endfor %}
8+
</table>

_sass/_base.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,12 @@ footer.sticky-bottom {
376376
}
377377
}
378378

379+
.table-cv-map {
380+
background-color: transparent;
381+
border: none;
382+
color: var(--global-text-color);
383+
}
384+
379385
// Repositories
380386

381387
@media (min-width: 768px) {

assets/js/theme.js

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ let toggleTheme = (theme) => {
66
} else {
77
setTheme("dark");
88
}
9-
}
10-
9+
};
1110

12-
let setTheme = (theme) => {
11+
let setTheme = (theme) => {
1312
transTheme();
1413
setHighlight(theme);
1514
setGiscusTheme(theme);
@@ -18,12 +17,12 @@ let setTheme = (theme) => {
1817
document.documentElement.setAttribute("data-theme", theme);
1918

2019
// Add class to tables.
21-
let tables = document.getElementsByTagName('table');
22-
for(let i = 0; i < tables.length; i++) {
20+
let tables = document.getElementsByTagName("table");
21+
for (let i = 0; i < tables.length; i++) {
2322
if (theme == "dark") {
24-
tables[i].classList.add('table-dark');
23+
tables[i].classList.add("table-dark");
2524
} else {
26-
tables[i].classList.remove('table-dark');
25+
tables[i].classList.remove("table-dark");
2726
}
2827
}
2928
} else {
@@ -32,15 +31,16 @@ let setTheme = (theme) => {
3231
localStorage.setItem("theme", theme);
3332

3433
// Updates the background of medium-zoom overlay.
35-
if (typeof medium_zoom !== 'undefined') {
34+
if (typeof medium_zoom !== "undefined") {
3635
medium_zoom.update({
37-
background: getComputedStyle(document.documentElement)
38-
.getPropertyValue('--global-bg-color') + 'ee', // + 'ee' for trasparency.
39-
})
36+
background:
37+
getComputedStyle(document.documentElement).getPropertyValue(
38+
"--global-bg-color"
39+
) + "ee", // + 'ee' for trasparency.
40+
});
4041
}
4142
};
4243

43-
4444
let setHighlight = (theme) => {
4545
if (theme == "dark") {
4646
document.getElementById("highlight_theme_light").media = "none";
@@ -49,44 +49,38 @@ let setHighlight = (theme) => {
4949
document.getElementById("highlight_theme_dark").media = "none";
5050
document.getElementById("highlight_theme_light").media = "";
5151
}
52-
}
53-
52+
};
5453

5554
let setGiscusTheme = (theme) => {
56-
5755
function sendMessage(message) {
58-
const iframe = document.querySelector('iframe.giscus-frame');
56+
const iframe = document.querySelector("iframe.giscus-frame");
5957
if (!iframe) return;
60-
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
58+
iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app");
6159
}
6260

6361
sendMessage({
6462
setConfig: {
65-
theme: theme
66-
}
63+
theme: theme,
64+
},
6765
});
68-
69-
}
70-
66+
};
7167

7268
let transTheme = () => {
7369
document.documentElement.classList.add("transition");
7470
window.setTimeout(() => {
7571
document.documentElement.classList.remove("transition");
76-
}, 500)
77-
}
78-
72+
}, 500);
73+
};
7974

8075
let initTheme = (theme) => {
81-
if (theme == null || theme == 'null') {
76+
if (theme == null || theme == "null") {
8277
const userPref = window.matchMedia;
83-
if (userPref && userPref('(prefers-color-scheme: dark)').matches) {
84-
theme = 'dark';
78+
if (userPref && userPref("(prefers-color-scheme: dark)").matches) {
79+
theme = "dark";
8580
}
8681
}
8782

8883
setTheme(theme);
89-
}
90-
84+
};
9185

9286
initTheme(localStorage.getItem("theme"));

0 commit comments

Comments
 (0)