From a5bea3b585aff13fbba74b1ff47a4c58dab34ba4 Mon Sep 17 00:00:00 2001 From: trafficlunar Date: Thu, 26 Dec 2024 23:30:52 +0000 Subject: [PATCH] fix: change colors based on which color scheme --- src/components/canvas/Canvas.tsx | 11 ++++-- src/components/canvas/CanvasBorder.tsx | 5 ++- src/components/canvas/Cursor.tsx | 5 ++- src/components/canvas/Grid.tsx | 5 ++- src/components/menubar/ThemeChanger.tsx | 5 ++- src/components/menubar/index.tsx | 11 ++++-- .../tool-settings/SelectorBlocks.tsx | 8 ++-- src/context/Canvas.tsx | 2 +- src/context/Theme.tsx | 39 +++++++------------ 9 files changed, 48 insertions(+), 43 deletions(-) diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 2d1d5ee..6c81289 100644 --- a/src/components/canvas/Canvas.tsx +++ b/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(null); @@ -278,7 +280,7 @@ function Canvas() { }, []); return ( -
+
- {settings.canvasBorder && } - + {settings.canvasBorder && } + {settings.grid && ( - + )} diff --git a/src/components/canvas/CanvasBorder.tsx b/src/components/canvas/CanvasBorder.tsx index d9f619b..e2fd32e 100644 --- a/src/components/canvas/CanvasBorder.tsx +++ b/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 ( { 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); }} /> diff --git a/src/components/canvas/Cursor.tsx b/src/components/canvas/Cursor.tsx index b8c9241..e57840f 100644 --- a/src/components/canvas/Cursor.tsx +++ b/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); }} /> diff --git a/src/components/canvas/Grid.tsx b/src/components/canvas/Grid.tsx index e94b4a1..6abbece 100644 --- a/src/components/canvas/Grid.tsx +++ b/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 ( { g.clear(); - g.lineStyle(1, 0xffffff, 0.1); + g.lineStyle(1, isDark ? 0xffffff : 0x000000, 0.1); const tileSize = 16 * scale; diff --git a/src/components/menubar/ThemeChanger.tsx b/src/components/menubar/ThemeChanger.tsx index 85f5e9d..e47621c 100644 --- a/src/components/menubar/ThemeChanger.tsx +++ b/src/components/menubar/ThemeChanger.tsx @@ -1,8 +1,9 @@ +import { useContext } from "react"; +import { ThemeContext } from "@/context/Theme"; import { MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubContent, MenubarSubTrigger } from "@/components/ui/menubar"; -import { useTheme } from "@/context/Theme"; function ThemeChanger() { - const { setTheme, theme } = useTheme(); + const { setTheme, theme } = useContext(ThemeContext); return ( diff --git a/src/components/menubar/index.tsx b/src/components/menubar/index.tsx index 9375b50..e39e0e4 100644 --- a/src/components/menubar/index.tsx +++ b/src/components/menubar/index.tsx @@ -1,7 +1,10 @@ +import { useContext } from "react"; import { Link } from "react-router"; -import { Menubar as UIMenubar } from "@/components/ui/menubar"; import { DialogProvider } from "@/context/Dialog"; +import { ThemeContext } from "@/context/Theme"; + +import { Menubar as UIMenubar } from "@/components/ui/menubar"; import FileMenu from "./FileMenu"; import ViewMenu from "./ViewMenu"; @@ -11,11 +14,13 @@ import BlockmaticText from "@/assets/blockmatic-text.svg?react"; import GithubIcon from "@/assets/github.svg?react"; function Menubar() { + const { isDark } = useContext(ThemeContext); + return ( - + @@ -23,7 +28,7 @@ function Menubar() { - + diff --git a/src/components/tool-settings/SelectorBlocks.tsx b/src/components/tool-settings/SelectorBlocks.tsx index c7f57ee..9c0ee1d 100644 --- a/src/components/tool-settings/SelectorBlocks.tsx +++ b/src/components/tool-settings/SelectorBlocks.tsx @@ -3,6 +3,7 @@ import { Container, Graphics, Sprite, Stage } from "@pixi/react"; import { BlocksIcon } from "lucide-react"; import { TexturesContext } from "@/context/Textures"; +import { ThemeContext } from "@/context/Theme"; import { ToolContext } from "@/context/Tool"; import _blockData from "@/data/blocks/programmer-art/data.json"; @@ -15,6 +16,7 @@ interface Props { function SelectorBlocks({ stageWidth, searchInput }: Props) { const { missingTexture, textures } = useContext(TexturesContext); + const { isDark } = useContext(ThemeContext); const { selectedBlock, setSelectedBlock } = useContext(ToolContext); const [hoverPosition, setHoverPosition] = useState(null); @@ -82,8 +84,8 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) { y={hoverPosition.y} draw={(g) => { g.clear(); - g.beginFill("#0000004D"); - g.lineStyle(2, 0xffffff, 1, 1); + g.beginFill(0x000000, 0.5); + g.lineStyle(2, isDark ? 0xffffff : 0x000000, 1, 1); g.drawRect(0, 0, 32, 32); }} /> @@ -95,7 +97,7 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) { y={selectedBlockPosition.y} draw={(g) => { g.clear(); - g.lineStyle(2, 0xffffff, 1, 1); + g.lineStyle(2, isDark ? 0xffffff : 0x000000, 1, 1); g.drawRect(0, 0, 32, 32); }} /> diff --git a/src/context/Canvas.tsx b/src/context/Canvas.tsx index 399db3e..a946d1f 100644 --- a/src/context/Canvas.tsx +++ b/src/context/Canvas.tsx @@ -2,7 +2,7 @@ import React, { createContext, ReactNode, useMemo, useState } from "react"; interface Context { stageSize: Dimension; - canvasSize: Dimension; + canvasSize: CanvasSize; blocks: Block[]; coords: Position; scale: number; diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index b03b21e..8e72024 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -1,25 +1,22 @@ -import { createContext, useContext, useEffect, useState } from "react"; +import { createContext, useEffect, useState } from "react"; -type ThemeProviderProps = { +interface Props { children: React.ReactNode; defaultTheme?: Theme; storageKey?: string; -}; +} -type ThemeProviderState = { +interface Context { theme: Theme; + isDark: boolean; setTheme: (theme: Theme) => void; -}; +} -const initialState: ThemeProviderState = { - theme: "system", - setTheme: () => null, -}; +export const ThemeContext = createContext({} as Context); -const ThemeProviderContext = createContext(initialState); - -export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) { +export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: Props) { const [theme, setTheme] = useState(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme); + const [isDark, setIsDark] = useState(true); useEffect(() => { const root = window.document.documentElement; @@ -27,17 +24,19 @@ export function ThemeProvider({ children, defaultTheme = "system", storageKey = root.classList.remove("light", "dark"); if (theme === "system") { - const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches; - root.classList.add(systemTheme); + root.classList.add(systemTheme ? "dark" : "light"); return; } root.classList.add(theme); + setIsDark(theme == "dark"); }, [theme]); const value = { theme, + isDark, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme); setTheme(theme); @@ -45,16 +44,8 @@ export function ThemeProvider({ children, defaultTheme = "system", storageKey = }; return ( - + {children} - + ); } - -export const useTheme = () => { - const context = useContext(ThemeProviderContext); - - if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider"); - - return context; -};