New version of hello-friend-ng-clone
This commit is contained in:
parent
66da990f5c
commit
34adf86a92
58 changed files with 1482 additions and 437 deletions
|
@ -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
|
@ -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");
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue