diff --git a/site/blog/2023-12-17-the-cost-of-implicits.mdx b/site/blog/2023-12-17-the-cost-of-implicits.mdx
index c89da4116d..32be345c33 100644
--- a/site/blog/2023-12-17-the-cost-of-implicits.mdx
+++ b/site/blog/2023-12-17-the-cost-of-implicits.mdx
@@ -84,7 +84,7 @@ In total it's about this much:
 
 ## Initial comparison of compile times
 
-Each benchmark is run three times, and in the graphs you can choose to se minimum or average compile times.
+Each benchmark is run three times, and in the graphs you can choose to see minimum or average compile times.
 
 <ScalaCompileTimesChart id="groupedBarChart1">{`
 library,scala version, average compile time, minimum compile time
diff --git a/site/src/components/KeyTakeaway.jsx b/site/src/components/KeyTakeaway.jsx
index 7e4f5f817a..98ff440cc3 100644
--- a/site/src/components/KeyTakeaway.jsx
+++ b/site/src/components/KeyTakeaway.jsx
@@ -1,26 +1,28 @@
-// all from chatgpt, don't judge this :D
-
 import React from 'react';
+import {useColorMode} from '@docusaurus/theme-common';
 
 const KeyTakeaway = ({ children:text }) => {
+    const { isDarkTheme } = useColorMode();
+
+    const containerStyle = {
+        backgroundColor: isDarkTheme ? '#333' : '#f0f0f0', // Dark or light background color
+        color: isDarkTheme ? '#fff' : '#000', // Text color based on mode
+        padding: '20px',
+        borderRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+
     return (
-        <div
-            style={{
-                backgroundColor: '#f0f0f0', // Subtle background color
-                padding: '20px',
-                borderRadius: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}
-        >
+        <div style={containerStyle}>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
-                stroke="currentColor"
+                stroke={isDarkTheme ? '#fff' : 'currentColor'}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -35,4 +37,4 @@ const KeyTakeaway = ({ children:text }) => {
     );
 };
 
-export default KeyTakeaway;
\ No newline at end of file
+export default KeyTakeaway;