[@mantine/Prism] Fix lines highlight color not respecting colorScheme…

… prop (#2404)
mantinedev · Sep 14, 2022 · 6963d64 · 6963d64
1 parent 4967a38
commit 6963d64
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 6 deletions.
diff --git a/src/mantine-prism/src/Prism/Prism.story.tsx b/src/mantine-prism/src/Prism/Prism.story.tsx
@@ -54,3 +54,37 @@ export const LargeLine = () => (
     is so large that it will cause overflow Lorem ipsum dolor sit amet consectetur,
   </Prism>
 );
+
+const demoCode = `
+import { Button } from '@mantine/core';
+
+function Demo() {
+  return <Button>Hello</Button>
+}
+
+function Usage() {
+  return <ActionIcon>Hello</ActionIcon>;
+}
+`;
+export function LinesHighlightWithCustomTheme() {
+  const deleted = { color: 'red', label: '-' };
+  const added = { color: 'green', label: '+' };
+
+  return (
+    <Prism
+      language="tsx"
+      withLineNumbers
+      colorScheme="dark"
+      highlightLines={{
+        3: deleted,
+        4: deleted,
+        5: deleted,
+        7: added,
+        8: added,
+        9: added,
+      }}
+    >
+      {demoCode}
+    </Prism>
+  );
+}
diff --git a/src/mantine-prism/src/Prism/Prism.styles.ts b/src/mantine-prism/src/Prism/Prism.styles.ts
@@ -36,7 +36,7 @@ export default createStyles(
       zIndex: 2,
 
       '&, &:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+        backgroundColor: colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
       },
     },
 

diff --git a/src/mantine-prism/src/Prism/Prism.tsx b/src/mantine-prism/src/Prism/Prism.tsx
@@ -96,9 +96,10 @@ export const Prism = forwardRef<HTMLDivElement, PrismProps>((props: PrismProps,
 
   const theme = useMantineTheme();
   const clipboard = useClipboard();
+  const _colorScheme = colorScheme || theme.colorScheme;
   const { classes, cx } = useStyles(
     {
-      colorScheme: colorScheme || theme.colorScheme,
+      colorScheme: _colorScheme,
       native: ScrollAreaComponent !== ScrollArea,
       maxLineSize,
       radius,
@@ -131,7 +132,7 @@ export const Prism = forwardRef<HTMLDivElement, PrismProps>((props: PrismProps,
 
       <Highlight
         {...defaultProps}
-        theme={getPrismTheme(theme, colorScheme || theme.colorScheme)}
+        theme={getPrismTheme(theme, _colorScheme)}
         code={code}
         language={language}
       >
@@ -158,7 +159,7 @@ export const Prism = forwardRef<HTMLDivElement, PrismProps>((props: PrismProps,
                   const lineProps = getLineProps({ line, key: index });
                   const shouldHighlight = lineNumber in highlightLines;
                   const lineColor =
-                    theme.colorScheme === 'dark'
+                    _colorScheme === 'dark'
                       ? theme.fn.rgba(
                           theme.fn.themeColor(highlightLines[lineNumber]?.color, 9),
                           0.25
@@ -178,7 +179,7 @@ export const Prism = forwardRef<HTMLDivElement, PrismProps>((props: PrismProps,
                             color: shouldHighlight
                               ? theme.fn.themeColor(
                                   highlightLines[lineNumber]?.color,
-                                  theme.colorScheme === 'dark' ? 5 : 8
+                                  _colorScheme === 'dark' ? 5 : 8
                                 )
                               : undefined,
                           }}
@@ -198,7 +199,7 @@ export const Prism = forwardRef<HTMLDivElement, PrismProps>((props: PrismProps,
                                 color: shouldHighlight
                                   ? theme.fn.themeColor(
                                       highlightLines[lineNumber]?.color,
-                                      theme.colorScheme === 'dark' ? 5 : 8
+                                      _colorScheme === 'dark' ? 5 : 8
                                     )
                                   : (tokenProps?.style?.color as string),
                               }}