A dark theme for Geshi filter based on PHPStorm

Sep 21st, 2014

This is a dark theme I created for the Geshi filter module. I tried to mimic the colors of the dark theme in PHPStorm because I find that theme is very easy on the old eyeballs after staring at the screen all day. The file is a SASS file with a couple of variables: $body-bg and $text-color which are from the theme I originally designed this to work with. Replace those variables with colors that work for the particular site where the code will be used.

div.geshifilter,
span.geshifilter {
  background-color: darken($body-bg, 4%);
  border: 1px solid darken($body-bg, 6%);
  margin: 0;
 
  pre {
    color: #ffc974;
    line-height: 1.5em;
    padding: 0;
    background: darken($body-bg, 4%);
    border: 0;
  }
 
  pre ol {
    list-style: decimal;
    list-style-position: outside;
    padding: 0;
    margin: 0;
  }
 
  pre ol li {
    margin: 0 0 0 35px;
    padding: 0;
    color: $text-color;
    clear: none;
  }
 
  pre ol li div {
    color: $text-color;
  }
 
  code {
    background-color: darken($body-bg, 4%);
    color: #ffc974;
  }
 
  .st_h {
    color: #689b5d;
  }
 
  .li1 {
    background: #202021;
  }
 
  .co1,
  .coMULTI {
    color: darken($text-color, 15%);
  }
  .co0,
  .co4 {
    color: #689b5d;
  }
 
  .me1 {
    color: $text-color;
  }
 
  .me0 {
    @extend .me1;
  }
 
  .me2 {
    @extend .me1;
  }
 
  .br0 {
    color: #90b6ca;
  }
 
  .st0 {
    color: #8F9657;
  }
 
  .kw1 {
    color: #d28039;
  }
 
  .kw2 {
    @extend .kw1;
  }
 
  .kw3 {
    @extend .kw1;
  }
 
  .nu0 {
    color: #CF6745;
  }
 
  .re0 {
    color: #9f80b0;
  }
 
  [lang=css] .kw2,
  .css .kw2 {
    color: #F9EE7E;
  }
 
  .re1 {
    color: #96703D;
  }
 
  [lang=css] .re3,
  .css .re3 {
    color: #CA7840;
  }
 
  [lang=javascript] .me1,
  .javascript .me1 {
    color: #505e80;
  }
}

Tags

Theming

Internal References

GeSHi Filter for syntax highlighting
Add Sass and Twig support for Geshi filter syntax highlighting in Drupal

Article Type

General