From 6963d646f460f40ac9b6736f1a974457b1a18fdd Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Wed, 14 Sep 2022 17:45:01 +0400
Subject: [PATCH] [@mantine/Prism] Fix lines highlight color not respecting
 colorScheme prop (#2404)

---
 src/mantine-prism/src/Prism/Prism.story.tsx | 34 +++++++++++++++++++++
 src/mantine-prism/src/Prism/Prism.styles.ts |  2 +-
 src/mantine-prism/src/Prism/Prism.tsx       | 11 ++++---
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/mantine-prism/src/Prism/Prism.story.tsx b/src/mantine-prism/src/Prism/Prism.story.tsx
index db640872af2..eaa7b8bdae9 100644
--- 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
index f4fd285bbd6..4f6cda2f533 100644
--- 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
index 60515642204..61aa229f5b7 100644
--- 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),
                               }}