Darkmode on hightlightjs

llaumgui

Hello,

It seems that Flarum relies on the Highlight.js library for syntax highlighting. I've noticed that when I switch to the dark theme, the Highlight.js configuration doesn't follow, resulting in dark text on a dark background.

Is it possible to switch to a dark Highlight.js theme when Flarum is in dark mode?

Stezkoy

llaumgui For example
You can place this in CSS or use it in your design theme.

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  & when (@config-dark-mode =false) {
    color: #d73a49 !important;
  }

  & when (@config-dark-mode =true) {
    color: #ff7b72 !important;
  }
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  & when (@config-dark-mode =false) {
    color: #6f42c1 !important;
  }

  & when (@config-dark-mode =true) {
    color: #d2a8ff !important;
  }
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  & when (@config-dark-mode =false) {
    color: #005cc5 !important;
  }

  & when (@config-dark-mode =true) {
    color: #79c0ff !important;
  }
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  & when (@config-dark-mode =false) {
    color: #032f62 !important;
  }

  & when (@config-dark-mode =true) {
    color: #a5d6ff !important;
  }
}

.hljs-built_in,
.hljs-symbol {
  & when (@config-dark-mode =false) {
    color: #e36209 !important;
  }

  & when (@config-dark-mode =true) {
    color: #ffa657 !important;
  }
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  & when (@config-dark-mode =false) {
    color: #6a737d !important;
  }

  & when (@config-dark-mode =true) {
    color: #8b949e !important;
  }
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  & when (@config-dark-mode =false) {
    color: #22863a !important;
  }

  & when (@config-dark-mode =true) {
    color: #7ee787 !important;
  }
}

.hljs-subst {
  & when (@config-dark-mode =false) {
    color: #24292e !important;
  }

  & when (@config-dark-mode =true) {
    color: #c9d1d9 !important;
  }
}

.hljs-section {
  & when (@config-dark-mode =false) {
    color: #005cc5 !important;
  }

  & when (@config-dark-mode =true) {
    color: #1f6feb !important;
  }
}

.hljs-bullet {
  & when (@config-dark-mode =false) {
    color: #735c0f !important;
  }

  & when (@config-dark-mode =true) {
    color: #f2cc60 !important;
  }
}

.hljs-emphasis {
  & when (@config-dark-mode =false) {
    color: #24292e !important;
  }

  & when (@config-dark-mode =true) {
    color: #c9d1d9 !important;
  }
}

.hljs-strong {
  & when (@config-dark-mode =false) {
    color: #24292e !important;
  }

  & when (@config-dark-mode =true) {
    color: #c9d1d9 !important;
  }
}

.hljs-addition {
  & when (@config-dark-mode =false) {
    color: #22863a !important;
    background-color: #033a16 !important;
  }

  & when (@config-dark-mode =true) {
    color: #aff5b4 !important;
    background-color: #033a16 !important;
  }
}

.hljs-deletion {
  & when (@config-dark-mode =false) {
    color: #b31d28 !important;
    background-color: #ffeef0 !important;
  }

  & when (@config-dark-mode =true) {
    color: #ffdcd7 !important;
    background-color: #67060c !important;
  }
}