Dynamically swap themes for asciinema (#931)

pacstall · Jul 29, 2024 · 32a6236 · 32a6236
1 parent d461277
commit 32a6236
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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