andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
Schmelczer András 2020-01-07 21:30:23 +01:00
parent 48a55a4a97
commit 073f087e52
40 changed files with 864 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/page/background/blob.ts
View file

@ -1,10 +1,14 @@
import { mixColors } from '../../framework/helper/mix-colors';
import { createElement } from '../../framework/helper/create-element';
import { Random } from '../../framework/helper/random';
import { generate } from './background.html';
export class Blob {
private static readonly creatorRandom = new Random(44);
private static readonly colors = ['#fff9e0', '#ffd6d6'];
private static colorPickerRandom = new Random(132);
private static readonly lightColors = ['#fff9e0', '#ffd6d6'];
private static readonly darkColors = ['#2C477A'];
private static isDarkThemed = false;
private static zMin: number;
private static zMax: number;
private static perspective: number;
@ -14,25 +18,36 @@ export class Blob {
Blob.perspective = perspective;
}
public static changeTheme(isDarkThemed: boolean) {
Blob.colorPickerRandom = new Random(132);
Blob.isDarkThemed = isDarkThemed;
}
private readonly z = Blob.creatorRandom.randomInInterval(
Blob.zMin,
Blob.zMax
);
private readonly element: HTMLElement = createElement('<div></div>');
private readonly element: HTMLElement = createElement(generate());
constructor() {
this.element.style.backgroundColor = mixColors(
'#ffffff',
Blob.creatorRandom.choose(Blob.colors),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
this.element.style.zIndex = (-this.z).toString();
this.decideColor();
this.element.style.zIndex = Math.round(-this.z).toString();
this.element.style.height = `${Blob.creatorRandom.randomInInterval(
160,
740
)}px`;
}
public decideColor() {
this.element.style.backgroundColor = mixColors(
Blob.isDarkThemed ? '#242638 ' : '#ffffff',
Blob.colorPickerRandom.choose(
Blob.isDarkThemed ? Blob.darkColors : Blob.lightColors
),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
}
get htmlElement(): HTMLElement {
return this.element;
}