Equinox theme

Equinox is a medium-to-high contrast theme that is meant to show the balance between the seasons. The theme’s overall presentation hints towards the blue side of spectrum. Even ‘warmer’ colours are relatively subdued to be closer to their ‘cold’ counterparts. Equinox comes in light and dark variants, while using a single 16-colour palette.

Packages or ports of it are available for the Atom text editor, Vim, the Vim Airline plugin, Jekyll websites using the Rouge gem, as well as the XFCE4, Terminator, iTerm2, urxvt, and Hyper terminal emulators.

Palette

Dark base

1D1921 2D2931 7D7981 ADA9B1

Light base

FCFAFE ECEAEE 7C7A7E 3C3A3E

Accent values

9A334F 936A48 138E6C 536CB2
CC5D9A 859356 369AA6 8955BA

Base values from left to right: background, background highlight, secondary text, primary text.

Atom text editor packages

Equinox light available at

Atom GitHub Or run the command apm install equinox-syntax

Equinox dark available at

Atom GitHub Or run the command apm install equinox-dark-syntax

Vim and Vim Airline

All Prot16 themes (including Equinox) are available as plugins for Vim and Vim Airline. To install them, use your favourite plugin manager. With vim-plug:

Plug 'protesilaos/prot16-vim'
Plug 'protesilaos/prot16-vim-airline'

Then specify your choice in .vimrc. Use either the light or dark variant:

colorscheme equinox_light
let g:airline_theme='equinox_light'

" or use these instead
colorscheme equinox_dark
let g:airline_theme='equinox_dark'

Atom and Vim colour mapping

Primary

Secondary

Tertiary


Primary: Class names, variables, functions, etc.
Secondary: Measurement units, strings, support functions, etc.
Tertiary: Cursor, support classes, etc.

Terminal emulators

All of my themes were originally developed for Atom. I do, nonetheless, plan to branch out from there. For the time being, I am experimenting with ways to make ports for at least some of the most popular programs. Based on my current tests on Arch Linux and Linux Mint 17.3 and 18, I have settled on the following colour mapping (which you have to implement manually if none of the options below suits your needs).

2D2931 9A334F 138E6C 859356 536CB2 CC5D9A 369AA6 ECEAEE 1D1921 936A48 3C3A3E 7D7981 7C7A7E 8955BA ADA9B1 FCFAFE

For Equinox, the following terminal emulators are supported thus far:

Jekyll blog with Rouge for highlighting

To use Equinox on your Rouge-enabled Jekyll site, go ahead and implement this SCSS stylesheet. Read the inline comments on how to switch between light and dark.

This demo makes use of the Rouge gem to create the markup. It is a lightweight solution for highlighting code on the web. Bear in mind that it is not a perfect representation of the Atom packages or terminal ports.

<!-- Some comment -->
<div class="schemesmenu">

 <button onclick="schemesFunction()" class="schemes-button">
   Prot16 schemes
   <svg class="deco-icon icon-menu">
     <use xlink:href="#icon-menu"></use>
   </svg>
 </button>

 <nav id="schemesDropdown" class="dropdown-content" aria-label="Prot16 schemes menu">
   <ul>
     <li><a href="#">Text</a></li>
     <li><a href="#">Text</a></li>
   </ul>
 </nav>

</div>
<!-- Some comment -->
<div class="schemesmenu">

 <button onclick="schemesFunction()" class="schemes-button">
   Prot16 schemes
   <svg class="deco-icon icon-menu">
     <use xlink:href="#icon-menu"></use>
   </svg>
 </button>

 <nav id="schemesDropdown" class="dropdown-content" aria-label="Prot16 schemes menu">
   <ul>
     <li><a href="#">Text</a></li>
     <li><a href="#">Text</a></li>
   </ul>
 </nav>

</div>
// Random Mixin
@mixin tablet {
  @media screen and (min-width: #{$tablet}) {
    @content;
  }
}

// Some SCSS
.social-share {
  font-family: $fontui;
  font-size: $ssize;
  margin: ($vrythm * 2) 0 0;
  padding: 0;
  @extend %clearfix;

  div {
    a {
      color: $lbg;
      font-weight: 400;
      display: block;
      margin: ($sone / 2) 0;
      padding: ($sone / 2) $sone;

      @include tablet {
        float: left;
        display: inline-block;
        margin: 0 $sone 0 0;
      }

      &[href*="facebook.com"] {
        background: #3B5998;
      }

      &[href*="twitter.com"] {
        background: #1DA1F3;
      }

      &:hover {
        opacity: .8;
      }
    }
  }
}
// Random Mixin
@mixin tablet {
  @media screen and (min-width: #{$tablet}) {
    @content;
  }
}

// Some SCSS
.social-share {
  font-family: $fontui;
  font-size: $ssize;
  margin: ($vrythm * 2) 0 0;
  padding: 0;
  @extend %clearfix;

  div {
    a {
      color: $lbg;
      font-weight: 400;
      display: block;
      margin: ($sone / 2) 0;
      padding: ($sone / 2) $sone;

      @include tablet {
        float: left;
        display: inline-block;
        margin: 0 $sone 0 0;
      }

      &[href*="facebook.com"] {
        background: #3B5998;
      }

      &[href*="twitter.com"] {
        background: #1DA1F3;
      }

      &:hover {
        opacity: .8;
      }
    }
  }
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function schemesFunction() {
    document.getElementById("schemesDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.schemes-button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function schemesFunction() {
    document.getElementById("schemesDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.schemes-button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};

Related git repositories

Wish to contribute? Check out these repos:

If my work has been helpful and you would like to buy me a coffee, please do so via my Paypal link.