Can I configure highlight.js when using the docker compose deployment?

[serefarikan]

Hi. Absolutely fantastic work, many thanks to all those who made it possible!

I have severe astigmatism and code samples/responses with a black background are killing me. Is there a way I can modify some settings so that highlight.js uses some other configuration? I'm using the docker compose based deployment to run LibreChat. Maybe there is a theme setting for LibreChat itself that uses a light background for code output? (I'm already using the light theme but that still keeps code with black bg)

My google searches did not take me to any meaningful documents/pages, so I'm trying my chances here 😄

[serefarikan]

It is more of a hack but in case it is good enough for someone else, I cheated by using stylish browser extension with the following stylesheet which runs for my LibreChat deployment:

.overflow-y-auto:nth-child(2) {
    /* background-color: #475956; */
    background-color: #ffffff;
    border-block-width: inherit;
    border-color: black;
    border-width: thin;
    border-radius: inherit;
}

code[class=language-plaintext] {
    white-space: pre-line
}

code.hljs,code[class*=language-],pre[class*=language-] {
    word-wrap: normal;
    background: none;
    color: black;
    -webkit-hyphens: none;
    hyphens: none;
    font-size: .85rem;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal
}

pre[class*=language-] {
    border-radius: .3em;
    overflow: auto
}

:not(pre)>code.hljs,:not(pre)>code[class*=language-] {
    border-radius: .3em;
    padding: .1em;
    white-space: normal
}

.hljs-comment {
    color: #475956
}

.hljs-meta {
    color: blue
}

.hljs-built_in,.hljs-class .hljs-title {
    color: #e9950c
}

.hljs-doctag,.hljs-formula,.hljs-keyword,.hljs-literal {
    color: #2e95d3
}

.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string {
    color: #10a37f
}

.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {
    color: black
}

.hljs-bullet,.hljs-link,.hljs-selector-id,.hljs-symbol,.hljs-title {
    color: #f22c3d
}

[danny-avila]

this solution is perfectly fine, I've made note to add theming for the code blocks later on. You can also always fork and adjust the main stylesheet as needed

[serefarikan]

thanks @danny-avila I am not remotely competent with css but this one worked 😄 I think your response answers my question.