[Feat] finished theme changer on preview page

snap-client/src/app.tsx

@@ -5,10 +5,12 @@ import { useConfig, useEvent } from "./hooks";
 import { toPng, toBlob } from "html-to-image";
 import download from "downloadjs";
 import { getWebsocketHost } from "./utils";
+import "./themes.css";
 
 const CODE_EMPTY_PLACEHOLDER = `print "Hello, CodeSnap.nvim!"`;
 const WATER_MARK_PLACEHOLDER = "CodeSnap.nvim";
 const PREVIEW_TITLE_PLACEHOLDER = "CodeSnap.nvim";
+const DEFAULT_THEME = "atom-one-dark";
 
 function App() {
   const [socketUrl] = useState(`ws://${getWebsocketHost()}/ws`);
@@ -17,6 +19,7 @@ function App() {
   const config = useConfig(event?.config_setup);
   const frameRef = useRef<HTMLDivElement | null>(null);
   const [isCopyButtonDisabled, setIsCopyButtonDisabled] = useState(false);
+  var theme = DEFAULT_THEME;
 
   const handleCopyButtonClick = useCallback(async () => {
     if (!frameRef.current) {
@@ -69,6 +72,11 @@ function App() {
     document.title = config?.preview_title ?? PREVIEW_TITLE_PLACEHOLDER;
   }, [config?.preview_title]);
 
+  const changeTheme = (theme: string) => {
+    var new_theme = "theme-" + theme;
+    document.body.className = new_theme;
+}
+
   return (
     <div className="w-full h-full flex flex-col items-center bg-deep-gray">
       <p className="rainbow-text text-4xl font-extrabold mt-20">
@@ -80,6 +88,7 @@ function App() {
           onExportClick={handleExportClick}
           onCopyClick={handleCopyButtonClick}
           readyState={readyState}
+          onThemeChangeProp={changeTheme}
         />
         <div id="frame" className="rounded-xl overflow-hidden">
           <Frame

snap-client/src/components/control-bar/control-bar.tsx

@@ -1,19 +1,21 @@
 import { ConnectionStatus } from "./connection-status";
 import { ReadyState } from "react-use-websocket";
-import ThemeSelector from "./theme-selector";
+import ThemeSelector from "./theme-selector/theme-selector";
 
 interface ControlBarProps {
   isCopyButtonDisabled: boolean;
   onCopyClick(): void;
   onExportClick(): void;
   readyState: ReadyState;
+  onThemeChangeProp(theme: string): void;
 }
 
 export const ControlBar = ({
   onCopyClick,
   onExportClick,
   isCopyButtonDisabled,
   readyState,
+  onThemeChangeProp,
 }: ControlBarProps) => {
   return (
     <div className="bg-neutral rounded-xl mb-2 p-1 flex flex-row items-center">
@@ -60,7 +62,11 @@ export const ControlBar = ({
             <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
           </svg>{" "}
         </button>
-      <ThemeSelector />
+      <ThemeSelector
+        onChangeTheme={(theme: string) => {
+          onThemeChangeProp(theme);
+        }}
+      />
       </div>
     </div>
   );

snap-client/src/components/control-bar/theme-selector/theme-selector.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+
+const ThemeSelector = ({ onChangeTheme }: { onChangeTheme: (theme: string) => void }) => {
+  const [theme, setTheme] = useState('theme1');
+
+
+  const fetchThemes: () => Promise<string[]> = () => {
+    const themes = fetch('/themes.json')
+      .then(response => response.json())
+      .then(data => {
+        console.log('Themes:', data);
+        return data;
+      });
+    return themes;
+  }
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newTheme = event.target.value;
+    setTheme(newTheme);
+    onChangeTheme(newTheme);
+  };
+
+  const [themes, setThemes] = useState<string[]>([]);
+  useEffect(() => {
+    fetchThemes().then((themes) => {
+      setThemes(themes);
+    });
+  }, []);
+
+  return (
+    <div className="theme-dropdown">
+      <select
+        value={theme}
+        onChange={handleThemeChange}
+        className="text-white py-2 px-4 rounded-md focus:outline-none mr-1"
+        style={{
+          backgroundColor: '#191e24',
+          margin: '0.25rem',
+          paddingLeft: '1rem', paddingRight: '1rem',
+          height: '3rem',
+          fontFamily: 'inherit',
+          fontSize: '0.875rem',
+          fontWeight: '600',
+          color: 'hsl(220 13% 69%)'
+        }}
+      >
+        {themes.map((theme: string) => (
+          <option value={theme}>{theme}</option>
+        ))}
+      </select>
+    </div>
+  );
+
+}
+
+
+
+export default ThemeSelector;
+

snap-client/src/components/editor/editor.tsx

@@ -37,7 +37,8 @@ export const Editor = ({
   macStyleTitleBar = true,
 }: EditorProps) => (
   <div
-    className={`editor-shadow ${opacity ? "bg-one-dark-base/[.93]" : "bg-one-dark-base"} rounded-2xl p-5 pb-7 border-border-color border-[1px]`}
+    className={`hljs editor-shadow rounded-2xl p-5 pb-7 border-border-color border-[1px]`}
+    style = {{ opacity: opacity ? 0.93 : 1 }}
   >
     {macStyleTitleBar && <MacStyleTitleBar />}
     <pre className="mt-4">