fix: change colors based on which color scheme

src/components/canvas/Canvas.tsx

@@ -8,6 +8,7 @@ import { ImageContext } from "@/context/Image";
 import { LoadingContext } from "@/context/Loading";
 import { SettingsContext } from "@/context/Settings";
 import { TexturesContext } from "@/context/Textures";
+import { ThemeContext } from "@/context/Theme";
 import { ToolContext } from "@/context/Tool";
 
 import Blocks from "./Blocks";
@@ -29,6 +30,7 @@ function Canvas() {
 	const { setLoading } = useContext(LoadingContext);
 	const { settings } = useContext(SettingsContext);
 	const { missingTexture, textures, solidTextures } = useContext(TexturesContext);
+	const { isDark } = useContext(ThemeContext);
 	const { tool, radius, selectedBlock, cssCursor, setTool, setSelectedBlock, setCssCursor } = useContext(ToolContext);
 
 	const stageContainerRef = useRef<HTMLDivElement>(null);
@@ -278,7 +280,7 @@ function Canvas() {
 	}, []);
 
 	return (
-		<div ref={stageContainerRef} className="relative w-full h-full" style={{ cursor: cssCursor }}>
+		<div ref={stageContainerRef} className="relative w-full h-full bg-zinc-200 dark:bg-black" style={{ cursor: cssCursor }}>
 			<Stage
 				width={stageSize.width}
 				height={stageSize.height}
@@ -287,6 +289,7 @@ function Canvas() {
 				onMouseUp={onMouseUp}
 				onWheel={onWheel}
 				onClick={onClick}
+				options={{ backgroundAlpha: 0 }}
 			>
 				<Blocks
 					blocks={visibleBlocks}
@@ -302,13 +305,13 @@ function Canvas() {
 				/>
 
 				<Container x={coords.x} y={coords.y} scale={scale}>
-					{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} />}
-					<Cursor mouseCoords={mouseCoords} radius={radius} />
+					{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
+					<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
 				</Container>
 
 				{settings.grid && (
 					<Container>
-						<Grid stageSize={stageSize} coords={coords} scale={scale} />
+						<Grid stageSize={stageSize} coords={coords} scale={scale} isDark={isDark} />
 					</Container>
 				)}
 			</Stage>

src/components/canvas/CanvasBorder.tsx

@@ -2,14 +2,15 @@ import { Graphics } from "@pixi/react";
 
 interface Props {
 	canvasSize: CanvasSize;
+	isDark: boolean;
 }
 
-function CanvasBorder({ canvasSize }: Props) {
+function CanvasBorder({ canvasSize, isDark }: Props) {
 	return (
 		<Graphics
 			draw={(g) => {
 				g.clear();
-				g.lineStyle(2, 0xffffff, 0.25, 1);
+				g.lineStyle(2, isDark ? 0xffffff : 0x000000, 0.25, 1);
 				g.drawRect(canvasSize.minX * 16, canvasSize.minY * 16, (canvasSize.maxX - canvasSize.minX) * 16, (canvasSize.maxY - canvasSize.minY) * 16);
 			}}
 		/>

src/components/canvas/Cursor.tsx

@@ -3,9 +3,10 @@ import { Graphics } from "@pixi/react";
 interface Props {
 	mouseCoords: Position;
 	radius: number;
+	isDark: boolean;
 }
 
-function Cursor({ mouseCoords, radius }: Props) {
+function Cursor({ mouseCoords, radius, isDark }: Props) {
 	const isOddRadius = radius % 2 !== 0;
 	const halfSize = Math.floor(radius / 2);
 
@@ -18,7 +19,7 @@ function Cursor({ mouseCoords, radius }: Props) {
 			y={(mouseCoords.y + offset) * 16}
 			draw={(g) => {
 				g.clear();
-				g.lineStyle(1, 0xffffff, 1);
+				g.lineStyle(1, isDark ? 0xffffff : 0x000000, 1);
 				g.drawRect(0, 0, size, size);
 			}}
 		/>

src/components/canvas/Grid.tsx

@@ -4,14 +4,15 @@ interface Props {
 	stageSize: Dimension;
 	coords: Position;
 	scale: number;
+	isDark: boolean;
 }
 
-function Grid({ stageSize, coords, scale }: Props) {
+function Grid({ stageSize, coords, scale, isDark }: Props) {
 	return (
 		<Graphics
 			draw={(g) => {
 				g.clear();
-				g.lineStyle(1, 0xffffff, 0.1);
+				g.lineStyle(1, isDark ? 0xffffff : 0x000000, 0.1);
 
 				const tileSize = 16 * scale;