trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 06:34:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: change colors based on which color scheme

Browse source
This commit is contained in:
trafficlunar 2024-12-26 23:30:52 +00:00
parent 2c852694ea
commit a5bea3b585
9 changed files with 48 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/context/Canvas.tsx
View file

@ -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;

39
src/context/Theme.tsx
View file

@ -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<Context>({} as Context);
const ThemeProviderContext = createContext<ThemeProviderState>(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<Theme>(() => (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 (
<ThemeProviderContext.Provider {...props} value={value}>
<ThemeContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
</ThemeContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
return context;
};