How do I change Org's HTML code background?

Question

Modifying Minted background is easy if my output from Org is LaTeX.

\definecolor{LightGray}{gray}{0.9}

\begin{minted}
[
frame=lines,
framesep=2mm,
baselinestretch=1.2,
bgcolor=LightGray,
fontsize=\footnotesize,
linenos
]
{python}
(code)
\end{minted}

Also, for Minted I understand that I "have to set the background color [myself]. This is not the default because it is really printer unfriendly." That's just fine, as I need no printouts. But IIUC HTML export does not go through LaTeX. Org exports directly to HTML (is that right?).

How do I change Org's HTML code background?

As it is, the syntax highlighting is close to unreadable.

If I use the .emacs

(set-foreground-color "white")
(set-background-color "black")

(defun my-org-inline-css-hook (exporter)
  "Insert custom inline css"
  (when (eq exporter 'html)
    (let ((my-pre-bg (face-background 'default)))
      (setq org-html-head-include-default-style nil)
      (setq org-html-head
            (format "<style type=\"text/css\">\n pre.src { background-color: %s;}</style>\n" my-pre-bg)))))

(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook)

the HTML code output does get a dark background, but other colors vanish. Do you see what is happening?

Answer 1

Summarizing amitp's and NickD's comments:

Do not modify your .emacs file. It's sufficient to add

#+HTML_HEAD_EXTRA: <style> pre.src { background-color: black; color: white; }</style>

in your .org file.

Answer 2

I would go with custom css instead to have more control of the html output look'n'feel, including source code blocks.

This is relevant configuration of org:

  (setq org-html-head-include-default-style nil
        org-html-htmlize-output-type 'css)
  (setq org-html-style 
        (concat "<style type=\"text/css\">\n"
                (with-temp-buffer
                  (insert-file-contents (concat user-emacs-directory "org/org.css"))
                  (buffer-string))
                "</style>\n"))

Where default org css is not included and htmlize output would be pure css you can style yourself.

Then with org-html-style you can include your own css, here I include (as in read from file) ~/.config/emacs/org/org.css.

The org.css contents should cover everything you care about, including the relevant htmlize css class names:

.org-src-container {
    border: 1px solid #ccc;
    background-color: #f7f7f3;
    border-radius: 3px;
    line-height: 1.3;
    font-family: monospace;
    margin: 1em auto;
    padding: .1em .5em;
    position: relative
}
/* highglighting */
.org-function-name {
    color: #af00af
}
.org-keyword {
    color: #005faf
}
.org-builtin {
    color: #870087
}
.org-string, .org-doc {
    color: #008700
}
.org-comment,
.org-comment-delimiter {
    color: #8a8a8a;
    font-style: italic;
}
.org-preprocessor {
    color: #008787
}
.org-type {
    color: #af5f00
}
.org-variable-name {
    color: #870087
}
.org-constant {
    color: #af0000
}
.org-warning {
    color: #ff8c00;
    font-weight: 700
}
.org-error {
    color: red;
    font-weight: 700
}
.org-escape-glyph {
    color: #8700ff
}

Result might look like: