dark mode : identifiers in code blocks are invisible for dark background

[ych817]

Greetings ,

1. Here is my dark mode syntax highlighting theme :

   #set raw(
     theme: "tokyo-night.tmTheme" // dark theme
   )

   I notice that the identifiers in the code blocks are still in black , which makes them invisible , i.e. ,

   Details

   

2. so I add this line :

   #show raw: set text(fill: rgb("#a9b1d6"))

   and then new problem comes : the text inside the language tag on the top-right corner of the code blocks are invisible , i.e. ,

   Details

   

3. Is it possible to make adjustments only for the main code text ?

4. by the way the fill color for code highlighting is brighter than what I thought . I tried the following settings ,

   #codly(highlights: (
     (line: 4, start: 5, end: none, fill: maroon),
     (line: 5, start: 14, end: 16, fill: olive, tag: "(a)"),
     (line: 5, start: 29, end: 35, fill: eastern, tag: "(b)"),
   ))

   and this is what it looks like :

   Details

   

I cannot upload the source code , I can only upload the pdf file .

main.pdf

[ych817]

I think I found a solution , here is the result :

and the corresponded code :

#set raw(
  theme: "tokyo-night.tmTheme"
)
#show raw: set text(fill: rgb("#a9b1d6"))
#show raw.where(block: false): box.with(
  fill: rgb("#1d2433"),
  inset: (x: .3em, y: 0em),
  outset: (y: .3em),
  radius: .5em,
)
#show: codly-init.with()
// #show figure.where(kind: "__codly-raw-line"): set text(fill: rgb("#a9b1d6"))
// #show figure.where(kind: "codly-line"): set text(fill: rgb("#a9b1d6"))
#codly(
  languages: codly-languages,
  zebra-fill: none,
  fill: rgb("#1d2433"),
  radius: .5em,
  stroke: gray + .4pt,
  lang-outset: (x: .3em, y: .2em),
  lang-radius: .4em,
  number-align: right + horizon,
  number-format: (number) => {
    let sample = `999`
    let w = measure(sample).width
    box(width: w)[#text(fill: white)[#number]]
  },
  header-transform: (hdr) => {
    text(size: 0.7em, weight: "regular", fill: white)[#hdr#hide("fgFG")]
  },
  header-repeat: true,
  header-cell-args: (align: left, fill: rgb("#3d308a")),
  lang-format: (name, icon, color) => {
    let radius = 0.32em
    let padding = 0.32em
    let lang_stroke = 0.5pt + color
    let lang_fill = if type(color) == color { color.lighten(75%) } else { color.lighten(50%) }
    let b = measure(icon + name)
    box(
      radius: radius,
      fill: lang_fill,
      inset: padding,
      stroke: lang_stroke,
      outset: 0em,
      height: b.height + padding * 2,
      text(fill: black)[#name #icon],
    )
  },
  highlight-fill: (c) => c.darken(70%),
  highlight-stroke: (c) => 0.4pt + c,
  highlight-inset: 0em, 
  highlight-outset: (x:0em, y:.3em),
  highlight-clip: false,
  highlight-radius: .4em,
)

main.pdf

[Dherse]

I don't see a nice way of implementing it but in #141 this should be fairly straight forward using basic set rules:

set the fallback foreground on raw.line instead of raw:

#show raw.line: set text(fill: rgb("#a9b1d6"))

This styles code without affecting language badges and preserves the syntax theme’s token colors.

To use highlight colors without the default lightening:

#show: codly.highlight-set_(fill: color => color)

Example: