ColormaticStudios/colormaticwebsite
Archived
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automatic dark theme

Browse Source
This commit is contained in:
Zakarya
2025-01-04 19:13:47 -08:00
parent 0bdf7392ad
commit 569b7cd27b
3 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
js/bg.js
View File

@ -8,6 +8,19 @@ function resize() {
canvas.height = window.innerHeight;
}
var dark_theme = false;
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
dark_theme = true;
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
dark_theme = event.matches;
gradientsArray.forEach((gradient) => {
gradient.color = getRandomColor();
});
});
let particlesArray = [];
const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
@ -53,7 +66,7 @@ class Particle {
}
draw() {
ctx.fillStyle = '#bbb';
ctx.fillStyle = dark_theme ? "#333" : '#bbb';
ctx.save();
ctx.translate(this.x, this.y);
if (this.shape === 'circle') {
@ -139,7 +152,12 @@ class Gradient {
draw() {
const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
gradient.addColorStop(0, this.color);
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
if (dark_theme) {
gradient.addColorStop(1, `rgba(0, 0, 0, 0)`);
}
else {
gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
}
ctx.globalAlpha = this.alpha;
ctx.fillStyle = gradient;
@ -154,10 +172,18 @@ class Gradient {
let gradientsArray = [];
function getRandomColor() {
const r = Math.floor((Math.random() * 100) + 155);
const g = Math.floor((Math.random() * 100) + 155);
const b = Math.floor((Math.random() * 100) + 155);
return `rgb(${r}, ${g}, ${b})`;
if (dark_theme) {
const r = Math.floor((Math.random() * 255) - 100);
const b = Math.floor((Math.random() * 255) - 100);
const g = Math.floor((Math.random() * 255) - 100);
return `rgb(${r}, ${g}, ${b})`;
}
else {
const r = Math.floor((Math.random() * 100) + 155);
const g = Math.floor((Math.random() * 100) + 155);
const b = Math.floor((Math.random() * 100) + 155);
return `rgb(${r}, ${g}, ${b})`;
}
}
function init() {