chore: try implement switching between dark and light themes, dependi…

…ng on the Telegram theme
cronnoss · Aug 25, 2024 · 46a5371 · 46a5371
1 parent 77e7f14
commit 46a5371
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,6 +23,7 @@ function App() {
     const [connected, setConnected] = useState<boolean>(false);
     const [platform, setPlatform] = useState<string | null>(null);
     const [code, setCode] = useState<string | null>(null);
+    const [color, setColor] = useState<string | null>(null);
 
     const userPlatform = useCallback(() => {
         setPlatform(WebApp.platform === "unknown" ? null : WebApp.platform);
@@ -49,9 +50,20 @@ function App() {
         });
     }, []);
 
+    const userColor = useCallback(() => {
+        setColor(WebApp.colorScheme);
+    }, []);
+
+    const showColorAlert = useCallback(() => {
+        if (color) {
+            WebApp.showAlert(color);
+        }
+    }, [color]);
+
     useEffect(() => {
         WebApp.expand();
         userPlatform();
+        userColor();
         setConnected(tonConnectUI.connected);
 
         tonConnectUI.onStatusChange((status) => {
@@ -105,6 +117,15 @@ function App() {
                             <hr/>
                         </>
                     )}
+                    {color && (
+                        <>
+                            <div className="button-container">
+                                <b>Show color</b>
+                                <button onClick={showColorAlert}>Show</button>
+                            </div>
+                            <hr/>
+                        </>
+                    )}
                     <div className="button-container">
                         <b>Show scanner</b>
                         <button onClick={openScan}>Start</button>