Restore theme toggle

This commit is contained in:
Reece 2025-05-28 22:18:19 +01:00
parent 15761ae743
commit 5f862f55d9
2 changed files with 32 additions and 7 deletions

View File

@ -154,7 +154,7 @@ const TOOL_PARAMS = {
export default function HomePage() {
const [searchParams, setSearchParams] = useSearchParams();
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme(); // <-- Call hook ONCE at the top
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
// Core app state
const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split");
@ -268,19 +268,44 @@ export default function HomePage() {
background: colorScheme === "dark" ? theme.colors.dark[6] : "#f8f9fa",
}}
>
{/* Overlayed View Switcher */}
{/* Overlayed View Switcher + Theme Toggle */}
<div
style={{
position: "absolute",
left: 0,
width: "100%",
display: "flex",
justifyContent: "center",
top: 0,
zIndex: 30,
pointerEvents: "none",
}}
>
<div style={{ pointerEvents: "auto" }}>
<div
style={{
position: "absolute",
left: 16,
top: "50%",
transform: "translateY(-50%)",
pointerEvents: "auto",
}}
>
<Button
onClick={toggleColorScheme}
variant="subtle"
size="md"
aria-label="Toggle theme"
>
{colorScheme === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
</Button>
</div>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
pointerEvents: "auto",
}}
>
<SegmentedControl
data={VIEW_OPTIONS}
value={currentView}

View File

@ -11,7 +11,7 @@
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
"target": "es2024", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "react-jsx", /* Specify what JSX code is generated. */
// "libReplacement": true, /* Enable lib replacement. */