Colors for pre elem. on orgmode.org

[Sebastian Rose <sebastian_rose@gmx.de>]

Hi,


the colors on orgmode.org are made from an Emacs setup with a dark
background.

Because of the light background on the Web, code examples with syntax
highlighting are hard to read. I even avoid #+BEGIN_SRC and use
#+BEGIN_EXAMPLE instead.


I played a little locally, and found, that the following simple change
makes highlighted source code readable. Just put this in an exported
HTML file, just before the `</head>' tag and keep the original styles in
place, to see the results:


<style type="text/css">
pre {
    background-color:#333333;
    color:white;
}
</pre>

These are just the changed values.



Unfortunately, this changes the appearance significantly. Dark
background for all code.



As an alternative, we could change all foreground colors, in that we
keep the tint, but reduce the brightness of each. That way we would keep
the appearance and have readable code. I've changed the background to be
slightly lighter. Just put this in an exported HTML file, just before
the `</head>' tag and keep the original styles in place, to see the
results:


<style type="text/css">

pre {
    /* only the changed values for <pre> again */
    background-color:#fafafa;

    /* Use bigger font? courier is soo small on my system: */
    font-size:110%;
}


.org-string   { color:#BC2020; }
.org-builtin  { color:#5C2659; }
.org-keyword  { color:#5C128A; }
.org-doc      { color:#754C4C; }
.org-constant { color:#385D5E; }

.org-variable-name { color:#805F11; }
.org-function-name { color:#0000CC; }

</style>



What do you think?

How is the font-size of code on Windows and MAC (Safari)?



  Sebastian