feat: theme fix
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
parent
718ade9c5f
commit
93f1ea741d
1 changed files with 18 additions and 20 deletions
|
|
@ -13,31 +13,25 @@ export function World() {
|
|||
const randomY = Math.floor(Math.random() * (height - 2 * radius)) + radius;
|
||||
return [randomX, randomY];
|
||||
};
|
||||
const getBgColor = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
return getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--color-background")
|
||||
.trim();
|
||||
}
|
||||
};
|
||||
const getFgColor = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
return getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--color-foreground")
|
||||
.trim();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const pillTexts: HTMLDivElement[] = [];
|
||||
|
||||
let container = containerRef.current;
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const width = container.offsetWidth;
|
||||
const height = container.offsetHeight;
|
||||
const bgColor = getBgColor();
|
||||
const fgColor = getFgColor();
|
||||
const bgColor = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--color-background")
|
||||
.trim();
|
||||
const fgColor = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--color-foreground")
|
||||
.trim();
|
||||
|
||||
console.log(resolvedTheme, bgColor, fgColor);
|
||||
|
||||
const {
|
||||
Engine,
|
||||
|
|
@ -51,7 +45,7 @@ export function World() {
|
|||
} = Matter;
|
||||
const engine = Engine.create();
|
||||
engine.gravity.y = 0.3;
|
||||
engine.enableSleeping = false;
|
||||
engine.enableSleeping = true;
|
||||
|
||||
const render = Render.create({
|
||||
element: container,
|
||||
|
|
@ -124,7 +118,7 @@ export function World() {
|
|||
},
|
||||
});
|
||||
|
||||
let pills: Matter.Body[] = [];
|
||||
const pills: Matter.Body[] = [];
|
||||
const pillsToRenderInfo = [
|
||||
{ text: "ENGINEERING MANAGER" },
|
||||
{ text: "PRINCIPAL ENGINEER" },
|
||||
|
|
@ -165,7 +159,7 @@ export function World() {
|
|||
);
|
||||
|
||||
pills.push(pill);
|
||||
const text = document.createElement("div");
|
||||
const text: HTMLDivElement = document.createElement("div");
|
||||
Object.assign(text.style, {
|
||||
position: "absolute",
|
||||
width: `${pillWidth}px`,
|
||||
|
|
@ -179,6 +173,7 @@ export function World() {
|
|||
pointerEvents: "none",
|
||||
});
|
||||
text.innerText = pillText;
|
||||
pillTexts.push(text);
|
||||
|
||||
render.canvas.getContext("2d").measure;
|
||||
document.body.appendChild(text);
|
||||
|
|
@ -213,6 +208,9 @@ export function World() {
|
|||
Composite.clear(engine.world);
|
||||
Engine.clear(engine);
|
||||
render.canvas.remove();
|
||||
pillTexts.forEach((pillText) => {
|
||||
pillText.remove();
|
||||
});
|
||||
};
|
||||
}, [resolvedTheme]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue