CodeHighlight Themes

[inland surge]

Hi,

I was wondering if anyone has any experience changing the theme of the CodeHighlight.

highlight.js has a bunch of themes, and it looks like you just import them to use them like so import 'highlight.js/styles/github.css';

But this doesn't really jive well with import '@mantine/code-highlight/styles.css';

If I remove the import '@mantine/code-highlight/styles.css'; and only import the theme, then it loses some of the Mantine padding and bg colors, as well as dark mode support.

Is there a way to use different themes that anyone has found that works well within the mantine setup?

Not a huge fan of all the orange text in the Mantine implementation, and would love to change it. : )

[fossil snow]

You can browse source code to learn how theme is implemented, you should be able to change colors with CSS variables defined in theme styles.

[inland surge]

Cool, thanks for the heads up.

I'm looking here:
https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/code-highlight/src/CodeHighlight.theme.module.css

Where are those variables declares (e.g. --code-text-color)

Oh wait, they are in the file aren't they. lol

Just trying to wrap my head around how to override the theme variables

It doesn't look like I can pass a theme css module to the classNames root property because the source code overwrites it

const classes = { ..._classes, root: cx(_classes.root, themeClasses.theme) };

https://github.com/mantinedev/mantine/blob/afc992942bdaf4e807e83b9fcb6df340c5e22f4a/packages/%40mantine/code-highlight/src/CodeHighlight.tsx#L22C1-L22C78

And I added this css to my project

:root {
  --code-text-color: red;
  --code-background: red;
  --code-comment-color: red;
  --code-keyword-color: red;
  --code-tag-color: red;
  --code-literal-color: red;
  --code-string-color: red;
  --code-variable-color: red;
  --code-class-color: red;
}

But it did not change any of the colors.

:root {
  --code-text-color: red !important;
  --code-background: red !important;
  --code-comment-color: red !important;
  --code-keyword-color: red !important;
  --code-tag-color: red !important;
  --code-literal-color: red !important;
  --code-string-color: red !important;
  --code-variable-color: red !important;
  --code-class-color: red !important;
}

:where([data-mantine-color-scheme='light']) {
  --code-text-color: red !important;
  --code-background: red !important;
  --code-comment-color: red !important;
  --code-keyword-color: red !important;
  --code-tag-color: red !important;
  --code-literal-color: red !important;
  --code-string-color: red !important;
  --code-variable-color: red !important;
  --code-class-color: red !important;
}
:where([data-mantine-color-scheme='dark']) {
  --code-text-color: red !important;
  --code-background: red !important;
  --code-comment-color: red !important;
  --code-keyword-color: red !important;
  --code-tag-color: red !important;
  --code-literal-color: red !important;
  --code-string-color: red !important;
  --code-variable-color: red !important;
  --code-class-color: red !important;
}

Tried this, too.

I have this in a stylesheet that's the last sheet being imported and it's still not working. Am I missing something?

Cracked the code!

:where([data-mantine-color-scheme='light']) .mantine-CodeHighlight-root {
  --code-text-color: var(--mantine-color-gray-7);
  --code-background: var(--mantine-primary-color-light);
  --code-comment-color: var(--mantine-color-gray-6);
  --code-keyword-color: var(--mantine-color-violet-8);
  --code-tag-color: var(--mantine-color-red-9);
  --code-literal-color: var(--mantine-color-blue-6);
  --code-string-color: var(--mantine-color-blue-9);
  --code-variable-color: var(--mantine-color-lime-9);
  --code-class-color: var(--mantine-color-indigo-9);
}```

It needed the .mantine-CodeHighlight-root class added to the selector

[inland surge]

@fossil snow is there a trick to getting the CodeHighlight to have horizontal/vertical scrollbars? The docs examples seem to "just work". My own usage code overflows, but there's no scrollbars.

Tried added w and maw props, but the overflow is just clipped.