oliverbooth/oliverbooth.dev
oliverbooth/oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: change favicon based on light/dark theme switch

Browse Source
This commit is contained in:
Oliver Booth 2024-10-31 12:55:29 +00:00
parent 6a6476bbe7
commit ce49f1dc96
Signed by: oliverbooth
GPG Key ID: 2A862C3F46178E8E
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
OliverBooth/Pages/Shared/_Layout.cshtml
View File

@ -48,6 +48,8 @@
<meta property="twitter:description" content="Coffee enthusiast and lover of all things tech. Tech enthusiast and lover of all things coffee.">
}
<link rel="shortcut icon" href="/img/favicon.png" asp-append-version="true">
<link rel="shortcut icon" href="/img/favicon.png" asp-append-version="true" media="(prefers-color-scheme: light)">
<link rel="shortcut icon" href="/img/favicon-dark.png" asp-append-version="true" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css" integrity="sha512-7nTa5CnxbzfQgjQrNmHXB7bxGTUVO/DcYX6rpgt06MkzM0rVXP3EYCv/Ojxg5H0dKbY7llbbYaqgfZjnGOAWGA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">

BIN
src/img/favicon-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

10
src/ts/app.ts
View File

@ -69,4 +69,14 @@ declare const lucide: any;
}
});
}
function setFavicon() {
const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const favicon = document.querySelector("link[rel~=\"icon\"]");
// @ts-ignore
favicon.href = `/img/${darkMode ? "favicon-dark.png" : "favicon.png"}`;
}
setFavicon();
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setFavicon);
})();