Merge pull request #125 from georgesamy/dark-theme

feat: support dark theme

package.json

@@ -23,6 +23,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.17.0",
     "react-select": "^5.8.0",
     "typescript": "^5.2.2",

src/app.tsx

@@ -15,7 +15,7 @@ import * as lzstring from 'lz-string';
 import { Version, asVersion } from './php-wasm/php';
 import SelectPHP from './select';
 import { Editor } from './editor';
-import { SunIcon } from '@chakra-ui/icons';
+import { BellIcon } from '@chakra-ui/icons';
 import {Format, SelectFormat} from "./format";
 
 type UrlState = {
@@ -124,7 +124,7 @@ export default function App() {
 				<Flex direction={{ base: 'column', lg: 'row' }} gap="16px">
 					<Center>
 						<Button
-							leftIcon={<SunIcon />}
+							leftIcon={<BellIcon />}
 							href="https://github.com/sponsors/glassmonkey"
 							as="a"
 							colorScheme="green"

src/editor.tsx

@@ -6,7 +6,7 @@ import {
 	useSandpack,
 } from '@codesandbox/sandpack-react';
 import { usePHP } from './php';
-import { Box, Center, Flex, Spinner } from '@chakra-ui/react';
+import { Box, Center, Flex, Spinner, useColorMode } from '@chakra-ui/react';
 import type { ReactElement } from 'react';
 import * as React from 'react';
 import MonacoEditor from '@monaco-editor/react';
@@ -23,12 +23,14 @@ function LoadSpinner() {
 function PhpEditor() {
 	const { code, updateCode } = useActiveCode();
 	const { sandpack } = useSandpack();
+    const { colorMode } = useColorMode();
+
 	return (
 		<MonacoEditor
 			width="100%"
 			height="100%"
 			language="php"
-			theme="light"
+			theme={ ( colorMode === "light" ) ? "vs" : "vs-dark" }
 			key={sandpack.activeFile}
 			defaultValue={code}
 			onChange={(value) => updateCode(value || '')}

src/header.tsx

@@ -1,10 +1,23 @@
-import { Heading, Text, Flex, Center } from '@chakra-ui/react';
+import { Heading, Text, Flex, Center, Switch, useColorMode } from '@chakra-ui/react';
 import * as React from 'react';
 
 export default function Header() {
+
+	const { colorMode, toggleColorMode } = useColorMode();
+
 	return (
 		<Flex gap="8px" direction="column">
-			<Heading as="h1">PHP Playground</Heading>
+      <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
 				using WebAssembly technology.

src/index.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { ChakraProvider, Center, Box } from '@chakra-ui/react';
+import { ChakraProvider, Center, Box, ColorModeScript } from '@chakra-ui/react';
 import App from './app';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import Header from './header';
 import Footer from './footer';
 import Manual from './manual';
+import theme from './theme';
 
 const router = createBrowserRouter([
 	{
@@ -16,16 +17,19 @@ const router = createBrowserRouter([
 
 const root = ReactDOM.createRoot(document.getElementById('app')!);
 root.render(
-	<ChakraProvider>
-		<Box style={{ margin: '16px' }}>
-			<Header />
-		</Box>
-		<RouterProvider router={router} />
-		<Box style={{ margin: '16px' }}>
-			<Manual />
-		</Box>
-		<Center>
-			<Footer />
-		</Center>
-	</ChakraProvider>
+    <>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ChakraProvider  theme={theme}>
+            <Box style={{ margin: '16px' }}>
+                <Header />
+            </Box>
+            <RouterProvider router={router} />
+            <Box style={{ margin: '16px' }}>
+                <Manual />
+            </Box>
+            <Center>
+                <Footer />
+            </Center>
+        </ChakraProvider>
+    </>
 );

src/switch.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { HiMoon, HiSun } from "react-icons/hi";
+import { switchAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import ReactDOMServer from "react-dom/server";
+
+function extendSwitchTheme() {
+  const {
+    definePartsStyle,
+    defineMultiStyleConfig
+  } = createMultiStyleConfigHelpers(switchAnatomy.keys);
+
+  const darkModeIcon = ReactDOMServer.renderToString(<HiMoon />);
+
+  const lightModeIcon = ReactDOMServer.renderToString(<HiSun />);
+
+  const template = 'data:image/svg+xml;utf8,$';
+
+  const colormodeswitcher = definePartsStyle({
+    track: {
+      background: "#f1bf5a", // yellow
+      _dark: {
+        background: "#51555E", // grey
+      }
+    },
+    thumb: {
+      bg: "transparent",
+      backgroundImage: template.replaceAll("$", lightModeIcon),
+      _dark: {
+        backgroundImage: template.replaceAll("$", darkModeIcon)
+      },
+      backgroundRepeat: "no-repeat",
+      marginTop: "8.5%",
+      marginLeft: "9.5%",
+      color: "white"
+    }
+  });
+
+  return defineMultiStyleConfig({ variants: { colormodeswitcher } });
+}
+
+export const switchTheme = extendSwitchTheme();

src/theme.tsx

@@ -0,0 +1,15 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
+import { switchTheme } from './switch'
+
+const config: ThemeConfig = {
+  initialColorMode: 'system',
+  useSystemColorMode: true,
+}
+
+
+const theme = extendTheme({ 
+  config,
+  components: { Switch: switchTheme }
+})
+
+export default theme