Fix skill hover previews in dark mode

loathers · Jul 13, 2023 · 1ed4750 · 1ed4750
1 parent bdc4b51
commit 1ed4750
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/greenbox-web/src/components/Image.tsx b/packages/greenbox-web/src/components/Image.tsx
@@ -1,7 +1,11 @@
 import { Image as ChakraImage, ImageProps, useColorModeValue } from "@chakra-ui/react";
 
+export function useColorModeFilter() {
+  return useColorModeValue("", "contrast(0.6666) invert(1) hue-rotate(180deg)");
+}
+
 export default function Image(props: ImageProps) {
-  const filter = useColorModeValue("", "contrast(0.6666) invert(1) hue-rotate(180deg)");
+  const filter = useColorModeFilter();
 
   return <ChakraImage {...props} filter={filter} />;
 }
diff --git a/packages/greenbox-web/src/components/Skill.tsx b/packages/greenbox-web/src/components/Skill.tsx
@@ -40,7 +40,7 @@ export default function Skill({ skill, status, level }: Props) {
           }
         />
       </PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent style={{ ["--popper-bg" as any]: "var(--chakra-colors-chakra-body-bg)" }}>
         <PopoverArrow />
         <PopoverBody>
           <SkillDescription skill={skill} />

diff --git a/packages/greenbox-web/src/components/SkillDescription.tsx b/packages/greenbox-web/src/components/SkillDescription.tsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 
 import { RootState } from "../store";
 
+import { useColorModeFilter } from "./Image";
 import Spinner from "./Spinner";
 import { guessWikiLink } from "./Thing";
 
@@ -32,7 +33,9 @@ export default function SkillDescription({ skill }: Props) {
         setContents("Cannot load wiki page (this is an experimental feature!)");
       } else {
         setContents(
-          match[0].replaceAll('href="/', 'href="https://kol.coldfront.net/') + "</tr></table>",
+          match[0]
+            .replaceAll('href="/', 'href="https://kol.coldfront.net/')
+            .replaceAll('p style="color:', 'p class="colortext" style="color:') + "</tr></table>",
         );
       }
     }
@@ -46,8 +49,10 @@ export default function SkillDescription({ skill }: Props) {
     }
   }, [ref, contents]);
 
+  const filter = useColorModeFilter();
+
   return (
-    <Flex ref={ref} justifyContent="center">
+    <Flex sx={{ img: { filter }, "p.colortext": { filter } }} ref={ref} justifyContent="center">
       <Spinner />
     </Flex>
   );