Skip to content

Commit

Permalink
Fixes "General Information" section of CV in dark mode (alshedivat#1432)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jkschin authored and chertianser committed Aug 8, 2024
1 parent ba9685f commit 98fba55
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 38 deletions.
16 changes: 8 additions & 8 deletions _includes/cv/map.html
Original file line number Diff line number Diff line change
@@ -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>
<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>
6 changes: 6 additions & 0 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
54 changes: 24 additions & 30 deletions assets/js/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ let toggleTheme = (theme) => {
} else {
setTheme("dark");
}
}

};

let setTheme = (theme) => {
let setTheme = (theme) => {
transTheme();
setHighlight(theme);
setGiscusTheme(theme);
Expand All @@ -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 {
Expand All @@ -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";
Expand All @@ -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"));

0 comments on commit 98fba55

Please sign in to comment.