kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add dark mode support for bg pattern

Browse Source
This commit is contained in:
Kenneth
2024-07-21 21:27:50 +01:00
parent bd57bb8e8b
commit 7dd3ffdf1d
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/bg.js
View File

@@ -1,4 +1,5 @@
const DOT_COLOR = "#dce0e8"; const DOT_COLOR_LIGHT_MODE = "#dce0e8";
const DOT_COLOR_DARK_MODE = "#45475a";
const DOT_RADIUS = 1 * devicePixelRatio; const DOT_RADIUS = 1 * devicePixelRatio;
const canvas = document.getElementById("bg"); const canvas = document.getElementById("bg");
@@ -6,6 +7,7 @@ const ctx = canvas.getContext("2d");
let mouseX = 0; let mouseX = 0;
let mouseY = 0; let mouseY = 0;
let dotColor = "#dce0e8";
function resizeCanvas(width, height) { function resizeCanvas(width, height) {
const devicePixelRatio = window.devicePixelRatio || 1; const devicePixelRatio = window.devicePixelRatio || 1;
@@ -29,7 +31,7 @@ function drawDot(x, y) {
((effectRadius - Math.min(distance, effectRadius)) / effectRadius); ((effectRadius - Math.min(distance, effectRadius)) / effectRadius);
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = DOT_COLOR; ctx.fillStyle = dotColor;
ctx.fill(); ctx.fill();
} }
@@ -53,5 +55,15 @@ window.addEventListener("mousemove", (event) => {
drawPattern(); drawPattern();
}); });
if (window.matchMedia) {
const query = window.matchMedia("(prefers-color-scheme: dark)");
dotColor = query.matches ? DOT_COLOR_DARK_MODE : DOT_COLOR_LIGHT_MODE;
query.addEventListener("change", (event) => {
dotColor = event.matches ? DOT_COLOR_DARK_MODE : DOT_COLOR_LIGHT_MODE;
drawPattern();
});
}
resizeCanvas(window.innerWidth, window.innerHeight); resizeCanvas(window.innerWidth, window.innerHeight);
drawPattern(); drawPattern();