saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-14 19:45:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restore theme toggle

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/pages/HomePage.tsx
View File

@ -154,7 +154,7 @@ const TOOL_PARAMS = {
export default function HomePage() { export default function HomePage() {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const theme = useMantineTheme(); const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme(); // <-- Call hook ONCE at the top const { colorScheme, toggleColorScheme } = useMantineColorScheme();
// Core app state // Core app state
const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split"); const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split");
@ -260,7 +260,7 @@ export default function HomePage() {
style={{ style={{
flex: 1, flex: 1,
height: "100vh", height: "100vh",
minWidth:"20rem", minWidth: "20rem",
position: "relative", position: "relative",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -268,19 +268,44 @@ export default function HomePage() {
background: colorScheme === "dark" ? theme.colors.dark[6] : "#f8f9fa", background: colorScheme === "dark" ? theme.colors.dark[6] : "#f8f9fa",
}} }}
> >
{/* Overlayed View Switcher */} {/* Overlayed View Switcher + Theme Toggle */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
left: 0, left: 0,
width: "100%", width: "100%",
display: "flex", top: 0,
justifyContent: "center",
zIndex: 30, zIndex: 30,
pointerEvents: "none", 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 <SegmentedControl
data={VIEW_OPTIONS} data={VIEW_OPTIONS}
value={currentView} value={currentView}

2
frontend/tsconfig.json
View File

@ -11,7 +11,7 @@
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */ /* 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. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "react-jsx", /* Specify what JSX code is generated. */ "jsx": "react-jsx", /* Specify what JSX code is generated. */
// "libReplacement": true, /* Enable lib replacement. */ // "libReplacement": true, /* Enable lib replacement. */