abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamically calculate header translucency and clamp minimum opacity

Browse Source
This commit is contained in:
Paul Makles
2021-12-28 21:59:09 +00:00
parent d3b78ebc48
commit 17a2ca773b
5 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/mobx/stores/helpers/STheme.ts
View File

@@ -1,3 +1,4 @@
import rgba from "color-rgba";
import { makeAutoObservable, computed, action } from "mobx";
import {
@@ -93,13 +94,15 @@ export default class STheme {
...PRESETS[this.getBase()],
...this.settings.get("appearance:theme:overrides"),
light: this.isLight(),
"min-opacity": 1,
};
}
@computed computeVariables(): Theme {
const variables = this.getVariables() as Record<
string,
string | boolean
string | boolean | number
>;
for (const key of Object.keys(variables)) {
@@ -204,15 +207,11 @@ export default class STheme {
function getContrastingColour(hex: string, fallback?: string): string {
if (typeof hex !== "string") return "black";
// TODO: Switch to color-parse
// Try parse hex value.
hex = hex.replace(/#/g, "");
const r = parseInt(hex.substr(0, 2), 16) / 255;
const g = parseInt(hex.substr(2, 2), 16) / 255;
const b = parseInt(hex.substr(4, 2), 16) / 255;
const colour = rgba(hex);
if (!colour) return fallback ? getContrastingColour(fallback) : "black";
if (isNaN(r) || isNaN(g) || isNaN(b))
return fallback ? getContrastingColour(fallback) : "black";
return r * 0.299 + g * 0.587 + b * 0.114 >= 0.186 ? "black" : "white";
const [r, g, b] = colour;
return (r / 255) * 0.299 + (g / 255) * 0.587 + (b / 255) * 0.114 >= 0.186
? "black"
: "white";
}