fix: light theme in docs/play logo in loop (#1041)

## Description

<!-- Provide a concise and descriptive summary of the changes
implemented in this PR. -->

### Introduces a breaking change?

- [ ] Yes
- [ ] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [ ] New feature (change which adds functionality)
- [ ] Documentation update (improves or adds clarity to existing
documentation)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [ ] iOS
- [ ] Android

### Testing instructions

<!-- Provide step-by-step instructions on how to test your changes.
Include setup details if necessary. -->

### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

<!-- Link related issues here using #issue-number -->

### Checklist

- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

Author: NorbertKlockiewicz

docs/src/components/Hero/StartScreen/Logo.tsx

@@ -1,39 +1,10 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React from 'react';
 import useScreenSize from '@site/src/hooks/useScreenSize';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const Logo = () => {
   const { windowWidth } = useScreenSize();
   const gifUrl = useBaseUrl('/img/logo-hero-flame.gif');
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [showCanvas, setShowCanvas] = useState(false);
-
-  useEffect(() => {
-    if (!canvasRef.current) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.src = gifUrl;
-
-    img.onload = () => {
-      canvas.width = img.naturalWidth;
-      canvas.height = img.naturalHeight;
-
-      // Calculate GIF duration (approximate based on typical frame rates)
-      // Adjust this timeout to match your GIF's actual duration
-      const gifDuration = 7500; // milliseconds - adjust as needed!
-
-      setTimeout(() => {
-        // Draw the final frame
-        ctx.drawImage(img, 0, 0);
-        setShowCanvas(true);
-      }, gifDuration);
-    };
-  }, [gifUrl]);
 
   if (windowWidth <= 768) {
     return null;
@@ -44,19 +15,7 @@ const Logo = () => {
       <img
         src={gifUrl}
         alt="React Native ExecuTorch 🔥💀"
-        style={{
-          maxWidth: '400px',
-          width: '100%',
-          display: showCanvas ? 'none' : 'block',
-        }}
-      />
-      <canvas
-        ref={canvasRef}
-        style={{
-          maxWidth: '400px',
-          width: '100%',
-          display: showCanvas ? 'block' : 'none',
-        }}
+        style={{ maxWidth: '400px', width: '100%' }}
       />
     </div>
   );

docs/src/components/Hero/StartScreen/styles.module.css

@@ -4,6 +4,10 @@
   display: flex;
   min-height: 100vh;
   align-items: center;
+  background-color: #ffffff;
+}
+
+[data-theme='dark'] .hero {
   background-color: #130302;
 }