New version of hello-friend-ng-clone

This commit is contained in:
Aloïs Micard 2021-07-27 17:42:08 +02:00
parent 66da990f5c
commit 34adf86a92
58 changed files with 1482 additions and 437 deletions

View file

@ -1 +1,51 @@
// Some code could be here ...
/**
* Theming.
*
* Supports the preferred color scheme of the operation system as well as
* the theme choice of the user.
*
*/
const themeToggle = document.querySelector(".theme-toggle");
const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
const chosenThemeIsDark = chosenTheme == "dark";
const chosenThemeIsLight = chosenTheme == "light";
// Detect the color scheme the operating system prefers.
function detectOSColorTheme() {
if (chosenThemeIsDark) {
document.documentElement.setAttribute("data-theme", "dark");
} else if (chosenThemeIsLight) {
document.documentElement.setAttribute("data-theme", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
// Switch the theme.
function switchTheme(e) {
if (chosenThemeIsDark) {
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", "dark");
}
detectOSColorTheme();
window.location.reload();
}
// Event listener
if (themeToggle) {
themeToggle.addEventListener("click", switchTheme, false);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
window
.matchMedia("(prefers-color-scheme: light)")
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
detectOSColorTheme();
} else {
localStorage.removeItem("theme");
}

File diff suppressed because one or more lines are too long

View file

@ -1,25 +0,0 @@
// Toggle theme
const theme = window.localStorage && window.localStorage.getItem("theme");
const themeToggle = document.querySelector(".theme-toggle");
const isDark = theme === "dark";
var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (theme !== null) {
document.body.classList.toggle("dark-theme", isDark);
isDark
? metaThemeColor.setAttribute("content", "#252627")
: metaThemeColor.setAttribute("content", "#fafafa");
}
themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark-theme");
window.localStorage &&
window.localStorage.setItem(
"theme",
document.body.classList.contains("dark-theme") ? "dark" : "light"
);
document.body.classList.contains("dark-theme")
? metaThemeColor.setAttribute("content", "#252627")
: metaThemeColor.setAttribute("content", "#fafafa");
});