<Prism colorScheme="dark"> not respecting dark mode with highlighted lines.

[dmerand]

What package has an issue

@mantine/prism

Describe the bug

When using <Prism> with colorScheme="dark" and highlighted lines, the per-line highlight is defaulting to the "light mode" colors instead of "dark mode" colors.

What version of @mantine/hooks page do you have in package.json?

^5.1.1

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/happy-johnson-uheyg9

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

If I'm reading the code correctly, the reason is that the following lines are referring to the theme's colorScheme instead of the passed colorScheme value for highlighted lines:

mantine/src/mantine-prism/src/Prism/Prism.tsx

Line 161 in 15b29b6

theme.colorScheme === 'dark'

mantine/src/mantine-prism/src/Prism/Prism.tsx

Line 181 in 15b29b6

theme.colorScheme === 'dark' ? 5 : 8

mantine/src/mantine-prism/src/Prism/Prism.tsx

Line 201 in 15b29b6

theme.colorScheme === 'dark' ? 5 : 8

I believe that in all three cases, referencing the passed colorScheme variable instead of theme.colorScheme would produce the desired behavior.

My current workaround is to create a "temporary theme" using a MantineProvider e.g.:

<MantineProvider theme={{colorScheme: "dark"}}>
  <Prism language="json" highlightLines={{5: added, 7: removed}}>
    {code}
  </Prism>
</MantineProvider>

... instead of

<Prism language="json" colorScheme="dark" highlightLines={{5: added, 7: removed}}>
  {code}
</Prism>

Here's a link to a code sandbox with the simulated workaround: https://codesandbox.io/s/currying-brook-bei9um

[rtivital]

Thanks for reporting, the issue will be fixed in one of the next patches

[rtivital]

Fixed in 5.3.1

[dmerand]

I updated my repository and can confirm that this fixed my issue! Thanks again!