XF 2.2 bbcode code tag syntax highlighting code colors

[danger@]

Hi, could you point me to where I should look at if I want to adjust the colors of the syntax highlighting feature of the code bbcode tag? For some reason, the default theme has different (OK) colors of the highlighted code, however our custom theme has the colors way off...

e.g. https://forums.freebsd.org/threads/syntax-highlighting-feature-of-forums-code-c-tag-doesnt-work.78756/

Thanks!

 

[Paul B]

Has the bb_code.less template been modified from the default?

These are the relevant lines:

    .prism-token
    {
        &.prism-comment,
        &.prism-prolog,
        &.prism-doctype,
        &.prism-cdata
        {
            & when (@xf-styleType = light) { color: #a50; }
            & when (@xf-styleType = dark) { color: #8292a2; }
        }

        &.prism-constant
        {
            & when (@xf-styleType = light) { color: #05a; }
            & when (@xf-styleType = dark) { color: #f92672; }
        }

        &.prism-tag
        {
            & when (@xf-styleType = light) { color: #170; }
            & when (@xf-styleType = dark) { color: #f92672; }
        }

        &.prism-boolean
        {
            & when (@xf-styleType = light) { color: #219; }
            & when (@xf-styleType = dark) { color: #ae81ff; }
        }

        &.prism-symbol,
        &.prism-atrule,
        &.prism-keyword
        {
            & when (@xf-styleType = light) { color: #708; }
            & when (@xf-styleType = dark) { color: #e6db74; }
        }

        &.prism-selector,
        &.prism-function
        {
            & when (@xf-styleType = light) { color: #05a; }
            & when (@xf-styleType = dark) { color: #e6db74; }
        }

        &.prism-deleted
        {
            color: #d44;
        }

        &.prism-inserted
        {
            color: #292;
        }

        &.prism-string,
        &.prism-attr-value
        {
            & when (@xf-styleType = light) { color: #a11; }
            & when (@xf-styleType = dark) { color: #a6e22e; }
        }

        &.prism-number
        {
            & when (@xf-styleType = light) { color: #164; }
            & when (@xf-styleType = dark) { color: #ae81ff; }
        }

        &.prism-attr-name,
        &.prism-char,
        &.prism-builtin
        {
            & when (@xf-styleType = light) { color: #00c; }
            & when (@xf-styleType = dark) { color: #a6e22e; }
        }

        &.prism-regex,
        &.prism-important,
        &.prism-variable,
        &.prism-package
        {
            & when (@xf-styleType = light) { color: #05a; }
            & when (@xf-styleType = dark) { color: #fd971f; }
        }

        &.prism-class-name,
        &.prism-important,
        &.prism-bold
        {
            & when (@xf-styleType = light) { color: #00f; }
            & when (@xf-styleType = dark) { color: #e6db74; }
        }

        &.prism-bold
        {
            font-weight: bold;
        }

        &.prism-italic,
        &.prism-constant
        {
            & when (@xf-styleType = light) { color: #05a; }
            & when (@xf-styleType = dark) { color: #f92672; }

            font-style: italic;
        }

        &.prism-entity
        {
            cursor: help;
        }
    }
}

Edit: Looking at your site, it looks like the style is set to dark mode but it's actually a light style - so that is what is throwing it off.
Try switching to light mode - although that may affect other areas.

Alternatively, you can edit the colours in the file, or override them using the extra.less template.

 

[danger@]

Edit: Looking at your site, it looks like the style is set to dark mode but it's actually a light style - so that is what is throwing it off.
Try switching to light mode - although that may affect other areas.

Hi Brogan, this indeed did the trick, although it changed some other areas, but I guess we can live with those given the quick solution Thanks.