Merge pull request #134 from glassmonkey/extend-switch

Extend switch
glassmonkey · Feb 5, 2024 · 8b96184 · 8b96184
2 parents a3b3ffd + 7290cca
commit 8b96184
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -7,7 +7,7 @@ import {
 	Text,
 	Link,
 	Center,
-	Button,
+	Button, Switch, useColorMode,
 } from '@chakra-ui/react';
 import { useSearchParams } from 'react-router-dom';
 import * as lzstring from 'lz-string';
@@ -34,6 +34,8 @@ export default function App() {
 	const currentVersion =
 		asVersion(searchParams.get('v')) ?? '8.3';
 
+	const { colorMode, toggleColorMode } = useColorMode();
+
 	const currentFormat = searchParams.get('f') as Format ?? "html";
 
 	function updateVersion(v: Version) {
@@ -90,6 +92,7 @@ export default function App() {
 		setHistory(code, version, format);
 	}
 
+
 	return (
 		<main style={{ margin: '16px' }}>
 			<Flex marginTop="8px" marginBottom="8px" gap="16px">
@@ -144,6 +147,17 @@ export default function App() {
 						onChange={updateVersion}
 						version={currentVersion}
 					/>
+					<Flex direction="row" gap={"8px"} alignItems={"center"}>
+						<Text fontSize="xs">UI Theme:</Text>
+						<Switch
+							variant="colormodeSwitcher"
+							size="lg"
+							fontSize="lg"
+							isChecked={ colorMode === "light" }
+							onChange={toggleColorMode}
+							mr={2}
+						/>
+					</Flex>
 					<SelectFormat format={currentFormat} updateFormat={updateFormat}/>
 				</Flex>
 			</Flex>

diff --git a/src/header.tsx b/src/header.tsx
@@ -1,22 +1,11 @@
-import { Heading, Text, Flex, Center, Switch, useColorMode } from '@chakra-ui/react';
+import { Heading, Text, Flex, Center } from '@chakra-ui/react';
 import * as React from 'react';
 
 export default function Header() {
-
-	const { colorMode, toggleColorMode } = useColorMode();
-
 	return (
 		<Flex gap="8px" direction="column">
       <Flex justify="space-between">
         <Heading as="h1">PHP Playground</Heading>
-        <Switch
-          variant="colormodeswitcher"
-          size="lg"
-          fontSize="lg"
-          isChecked={ colorMode === "light" }
-          onChange={toggleColorMode}
-          mr={2}
-        />
       </Flex>
 			<Text as="p">
 				PHP Playground let you to execute basic PHP code in real time

diff --git a/src/switch.tsx b/src/switch.tsx
@@ -16,7 +16,7 @@ function extendSwitchTheme() {
 
   const template = 'data:image/svg+xml;utf8,$';
 
-  const colormodeswitcher = definePartsStyle({
+  const colormodeSwitcher = definePartsStyle({
     track: {
       background: "#f1bf5a", // yellow
       _dark: {
@@ -36,7 +36,7 @@ function extendSwitchTheme() {
     }
   });
 
-  return defineMultiStyleConfig({ variants: { colormodeswitcher } });
+  return defineMultiStyleConfig({ variants: { colormodeSwitcher } });
 }
 
 export const switchTheme = extendSwitchTheme();