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,
);
+
+const demoCode = `
+import { Button } from '@mantine/core';
+
+function Demo() {
+ return
+}
+
+function Usage() {
+ return Hello;
+}
+`;
+export function LinesHighlightWithCustomTheme() {
+ const deleted = { color: 'red', label: '-' };
+ const added = { color: 'green', label: '+' };
+
+ return (
+
+ {demoCode}
+
+ );
+}
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((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((props: PrismProps,
@@ -158,7 +159,7 @@ export const Prism = forwardRef((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((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((props: PrismProps,
color: shouldHighlight
? theme.fn.themeColor(
highlightLines[lineNumber]?.color,
- theme.colorScheme === 'dark' ? 5 : 8
+ _colorScheme === 'dark' ? 5 : 8
)
: (tokenProps?.style?.color as string),
}}