For the record, here is an attempt for a "gruvbox" code blocks:
.code {
/* light mode */
/*
background-color: #fbf1c7;
color: #282828;
*/
/* dark mode */
background-color: #1d2021;
color: #ebdbb2;
.co0 {
color: #928374; /* gray */
font-style: italic;
}
.co4, .re1, .st0, .st_h {
color: #cc241d; /* red */
font-style: italic;
}
.es5 {
color: #458588; /* blue */
font-weight: bold;
}
.es6, .co3, .sy4 {
color: #427b58; /* dark cyan */
font-weight: bold;
}
.kw2 {
color: #928374; /* gray */
font-weight: bold;
}
.kw5, .co2, .sy1 {
color: #98971a; /* green */
}
.kw6 {
color: #b16286; /* purple */
font-weight: bold;
}
.me0 {
color: #79740e; /* dark green */
}
.nu0 {
color: #d3869b; /* light purple */
}
.re3, .kw4, .re2 {
color: #fb4934; /* light red */
font-weight: bold;
}
.re4 {
color: #689d6a; /* cyan */
}
.re5 {
color: #8f3f71; /* dark purple */
}
.re7 {
color: #9d0006; /* dark red */
}
.re8, .br0, .sy0 {
color: #b8bb26; /* bright green */
}
.sc-2 {
color: #7c6f64; /* dark gray */
}
.co1, .coMULTI, .sc-1 {
color: #a89984; /* light gray */
font-style: italic;
}
.es0, .es1, .esHARD {
color: #076678; /* dark blue */
font-weight: bold;
}
.es2, .es3, .es4 {
color: #8f3f71; /* dark purple */
font-weight: bold;
}
.kw1, .kw8 {
color: #d65d0e; /* yellow */
}
.kw10, .kw11, .kw12, .kw9 {
color: #458588; /* blue */
font-weight: bold;
}
.kw13, .kw14, .kw15, .kw16, .me1, .me2 {
color: #d79921 /* yellow */
}
.kw3, .kw7, .sy2, .sy3, .re0 {
color: #076678; /* dark blue */
}
.ln-xtra {
background-color: #fabd2f; /* light yellow */
}
}