From 32a6236a25b69f6be4b36cb6aba870c6dad6c22d Mon Sep 17 00:00:00 2001
From: Elsie <hwengerstickel@protonmail.com>
Date: Mon, 29 Jul 2024 15:24:32 -0500
Subject: [PATCH] Dynamically swap themes for asciinema (#931)

---
 client/src/components/AsciinemaFrame.tsx |  5 +++--
 client/src/pages/Home.tsx                | 11 +++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/AsciinemaFrame.tsx b/client/src/components/AsciinemaFrame.tsx
index d3e8efb0..2899b3ca 100644
--- a/client/src/components/AsciinemaFrame.tsx
+++ b/client/src/components/AsciinemaFrame.tsx
@@ -4,9 +4,10 @@ const AsciinemaFrame: FC<{
     id: string
     autoplay?: boolean
     loop?: boolean
-}> = ({ id, autoplay, loop }) => (
+    dark?: boolean
+}> = ({ id, autoplay, loop, dark }) => (
     <iframe
-        src={`https://asciinema.org/a/${id}/iframe?theme=monokai&autoplay=${
+        src={`https://asciinema.org/a/${id}/iframe?theme=${dark ? 'solarized-light' : 'monokai'}&autoplay=${
             autoplay ? 1 : 0
         }&loop=${loop ? 1 : 0}&speed=0.75`}
         id={`asciicast-iframe-${id}`}
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 41d3fd85..3f29210b 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -6,6 +6,7 @@ import {
     Stack,
     Text,
     useBreakpointValue,
+    useColorMode,
 } from '@chakra-ui/react'
 import { FC } from 'react'
 import Card from '../components/Card'
@@ -18,6 +19,7 @@ import { Trans, useTranslation } from 'react-i18next'
 
 const Home: FC = () => {
     const { t } = useTranslation()
+    const { colorMode } = useColorMode()
     return (
         <>
             <Helmet>
@@ -98,12 +100,17 @@ const Home: FC = () => {
                     <Heading size={'lg'} mb='3' mt='10'>
                         {t('home.showcase.title')}
                     </Heading>
-                    <AsciinemaFrame autoplay loop id='538264' />
+                    <AsciinemaFrame
+                        autoplay
+                        loop
+                        id='538264'
+                        dark={colorMode === 'light'}
+                    />
 
                     <Heading size={'lg'} mb='3'>
                         {t('home.showcase.packageSearch')}
                     </Heading>
-                    <AsciinemaFrame id='538265' />
+                    <AsciinemaFrame id='538265' dark={colorMode === 'light'} />
 
                     <Stack justify='center'>
                         <Image