GeSHI Filter Dark Theme

Emily Newsom — Thu, 01 Nov 2012 11:50:40 +0000

Are you one of those people like me that can only use dark themed IDEs these days? Ever since I switched to Aptana (with its default dark layout) from Eclipse for most of my dev work, I can no longer look at light-colored code windows.

So how does one get GeSHI filter to go along with the dark trend? Well, here's some css that I use to do just that:

/* Geshi */
.geshifilter {
        color: #ddd !important;
        background-color: #222 !important;
        border: none !important;
        padding: 1em !important;
        margin: 0.8em 0 !important;
        font-size: 1.2em;
}
 
/* Line highlights */
.geshifilter .li1 { background: #202021 !important; }

/* comments */
.geshifilter .co1,
.geshifilter .coMULTI { color: #7a7a75 !important; font-style: italic; }
/* methods */
.geshifilter .me1 { color: #ffffff !important; }
.geshifilter .me0 { }
.geshifilter .me2 { color: #ffcc66 !important; }

/* brackets */
.geshifilter .br0 { color:#fff !important; }

/* strings */
.geshifilter .st0 { color: #99ff00 !important; }

/* keywords */
.geshifilter .kw1 { color: #ff8400 !important; }
.geshifilter .kw2 { color: #ffcc66 !important; }

.geshifilter .kw3 { color: #07dffc !important; }

/* numbers */
.geshifilter .nu0 { color: #66cc66 !important; }

/* vars */
.geshifilter .re0 { color: #ffffff !important; }

/* CSS selectors */
 
/* classnames */
.geshifilter [lang=css] .kw2,
.geshifilter .css .kw2 { color: #f9ee7e !important; }
.geshifilter .re1 { color: #96703d !important; }

/* px values */
.geshifilter [lang=css] .re3,
.geshifilter .css .re3 { color: #ca7840 !important; }

/* Javascript */
.geshifilter [lang=javascript] .me1,
.geshifilter .javascript .me1 { color: #505e80 !important; }

.geshifilter .text .de1, .geshifilter .text .de2 { font-family: monospace, Courier; }

Looks a little boring for CSS but it works great for most other syntaxes like PHP. Just pop these into your theme's style.css and enjoy GeSHI darkness :)

These were originally inspired by this for Drupal by Brightflock.

Brightflock - Design

GeSHI Filter Dark Theme