From bd99a4382f051817f6e0eebc2fff6cc43afbca02 Mon Sep 17 00:00:00 2001
From: Mathieu David <mathieudavid@mathieudavid.org>
Date: Fri, 18 Sep 2015 22:13:55 +0200
Subject: [PATCH] Converted all css to stylus

---
 .gitignore                         |   2 +
 .travis.yml                        |   2 +-
 README.md                          |   4 +-
 build.rs                           |  17 +-
 src/theme/_book.css                | 512 -----------------------------
 src/theme/book.css                 |   3 -
 src/theme/stylus/book.styl         |  12 +-
 src/theme/stylus/general.styl      |  12 +
 src/theme/stylus/menu.styl         |  39 +++
 src/theme/stylus/nav-icons.styl    |  23 ++
 src/theme/stylus/page.styl         |  45 +++
 src/theme/stylus/print.styl        |  45 +++
 src/theme/stylus/sidebar.styl      |  50 +++
 src/theme/stylus/theme-popup.styl  |  47 +++
 src/theme/stylus/themes/base.styl  |  52 +++
 src/theme/stylus/themes/coal.styl  |  21 ++
 src/theme/stylus/themes/index.styl |   4 +
 src/theme/stylus/themes/light.styl |  21 ++
 src/theme/stylus/themes/navy.styl  |  21 ++
 src/theme/stylus/themes/rust.styl  |  21 ++
 20 files changed, 426 insertions(+), 527 deletions(-)
 delete mode 100644 src/theme/_book.css
 delete mode 100644 src/theme/book.css
 create mode 100644 src/theme/stylus/general.styl
 create mode 100644 src/theme/stylus/menu.styl
 create mode 100644 src/theme/stylus/nav-icons.styl
 create mode 100644 src/theme/stylus/page.styl
 create mode 100644 src/theme/stylus/print.styl
 create mode 100644 src/theme/stylus/sidebar.styl
 create mode 100644 src/theme/stylus/theme-popup.styl
 create mode 100644 src/theme/stylus/themes/base.styl
 create mode 100644 src/theme/stylus/themes/coal.styl
 create mode 100644 src/theme/stylus/themes/index.styl
 create mode 100644 src/theme/stylus/themes/light.styl
 create mode 100644 src/theme/stylus/themes/navy.styl
 create mode 100644 src/theme/stylus/themes/rust.styl

diff --git a/.gitignore b/.gitignore
index 68208bcb..a7224236 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ Cargo.lock
 
 book-test
 book-example/book
+
+src/theme/book.css
diff --git a/.travis.yml b/.travis.yml
index 1e1d68ca..b880e4f8 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,6 +15,6 @@ addons:
     - nodejs
     - npm
 install:
-    - npm install stylus
+    - npm install stylus nib
 after_success:
   - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh
diff --git a/README.md b/README.md
index 4a8bea15..36f5af29 100644
--- a/README.md
+++ b/README.md
@@ -12,12 +12,12 @@ To have an idea of what a rendered book looks like,take a look at the [**Documen
 
 ## Installation
 
-Before building mdBook, make sure that you installed `stylus` from `npm` because it is used to compile the stylesheets
+Before building mdBook, make sure that you installed `stylus` and `nib` from `npm` because it is used to compile the stylesheets
 
 Install [node.js](https://nodejs.org/en/)
 
 ```
-npm install -g stylus
+npm install -g stylus nib
 ```
 
 ```
diff --git a/build.rs b/build.rs
index 7860cff9..36a9eaba 100644
--- a/build.rs
+++ b/build.rs
@@ -10,12 +10,17 @@ fn main() {
     let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
 
     let theme_dir = Path::new(&manifest_dir).join("src/theme/");
-    let stylus_dir = theme_dir.join("stylus");
+    let stylus_dir = theme_dir.join("stylus/book.styl");
 
-    Command::new("stylus")
-        .arg(format!("{}", stylus_dir.to_str().unwrap()))
-        .arg("--out")
-        .arg(format!("{}", theme_dir.to_str().unwrap()))
-        .status().unwrap();
+    if !Command::new("stylus")
+            .arg(format!("{}", stylus_dir.to_str().unwrap()))
+            .arg("--out")
+            .arg(format!("{}", theme_dir.to_str().unwrap()))
+            .arg("--use")
+            .arg("nib")
+            .status().unwrap()
+            .success() {
+        panic!("Stylus encoutered an error");
+    }
 
 }
diff --git a/src/theme/_book.css b/src/theme/_book.css
deleted file mode 100644
index 45338e67..00000000
--- a/src/theme/_book.css
+++ /dev/null
@@ -1,512 +0,0 @@
-html, body {
-    font-family: "Open Sans", sans-serif;
-    color: #333;
-}
-
-@media only screen {
-    /* Light theme */
-    .light .sidebar {
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-        background-color: #fafafa;
-        color: #364149;
-    }
-    .light .page-wrapper {
-        background: none repeat scroll 0 0 #FFF;
-    }
-    .light .chapter li {
-        color: #aaa;
-    }
-    .light .chapter li .active,
-    .light .chapter li a:hover {
-        /* Animate color change */
-        color: #008cff;
-    }
-    .light .menu-bar,
-    .light .nav-chapters {
-        color: #CCC;
-    }
-    .light .chapter li a,
-    .light .menu-bar i:hover,
-    .light .nav-chapters:hover {
-        /* Animate color change */
-        color: #333;
-    }
-    .light .content a {
-        color: #4183c4;
-    }
-    /* Theme changer */
-    .light .theme-popup {
-        background: #fafafa;
-        border: 1px solid #ccc;
-    }
-    .light .theme-popup .theme:hover {
-        background-color: #e6e6e6;
-    }
-
-    /* Coal theme */
-    .coal {
-        color: #98a3ad;
-        background-color: #141617;
-    }
-    .coal .sidebar {
-        background-color: #292c2f;
-        color: #a1adb8;
-    }
-    .coal .chapter li {
-        color: #505254;
-    }
-    .coal .chapter li .active,
-    .coal .chapter li a:hover {
-        /* Animate color change */
-        color: #3473ad;
-    }
-    .coal .menu-bar,
-    .coal .nav-chapters {
-        color: #43484d;
-    }
-    .coal .chapter li a,
-    .coal .menu-bar i:hover,
-    .coal .nav-chapters:hover {
-        color: #b3c0cc;
-    }
-    .coal .content a {
-        color: #2b79a2;
-    }
-    /* Theme changer */
-    .coal .theme-popup {
-        background: #141617;
-        border: 1px solid #43484d;
-    }
-    .coal .theme-popup .theme:hover {
-        background-color: #1f2124;
-    }
-    /* Dark blue colored theme */
-    .navy {
-        background-color: #161923;
-        color: #bcbdd0;
-    }
-    .navy .sidebar {
-        background-color: #282d3f;
-        color: #c8c9db;
-    }
-    .navy .chapter li {
-        color: #505274;
-    }
-    .navy .chapter li .active,
-    .navy .chapter li a:hover {
-        /* Animate color change */
-        color: #2b79a2;
-    }
-    .navy .menu-bar,
-    .navy .nav-chapters {
-        color: #737480;
-    }
-    .navy .chapter li a,
-    .navy .menu-bar i:hover,
-    .navy .nav-chapters:hover {
-        color: #b7b9cc;
-    }
-    .navy .content a {
-        color: #2b79a2;
-    }
-    /* Theme changer */
-    .navy .theme-popup {
-        background: #161923;
-        border: 1px solid #737480;
-    }
-    .navy .theme-popup .theme:hover {
-        background-color: #282e40;
-    }
-    /* Rust theme */
-    .rust {
-        background-color: #e1e1db;
-        color: #262625;
-    }
-    .rust .sidebar {
-        background-color: #3b2e2a;
-        color: #c8c9db;
-    }
-    .rust .chapter li {
-        color: #505254;
-    }
-    .rust .chapter li .active,
-    .rust .chapter li a:hover {
-        /* Animate color change */
-        color: #e69f67;
-    }
-    .rust .menu-bar,
-    .rust .nav-chapters {
-        color: #737480;
-    }
-    .rust .chapter li a {
-        color: #bfbfba;
-    }
-    .rust .menu-bar i:hover,
-    .rust .nav-chapters:hover {
-        color: #262625;
-    }
-    .rust .content a {
-        color: #2b79a2;
-    }
-    /* Theme changer */
-    .rust .theme-popup {
-        background: #e1e1db;
-        border: 1px solid #b38f6b;
-    }
-    .rust .theme-popup .theme:hover {
-        background-color: #99908a;
-    }
-    .sidebar {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 300px;
-        overflow-y: auto;
-        padding: 10px 10px;
-        font-size: 14px;
-        box-sizing: border-box;
-        -webkit-overflow-scrolling: touch;
-
-        /* Animation: slide away */
-        -webkit-transition: left 0.5s; /* Safari */
-        -o-transition: left 0.5s; /* Opera */
-        -moz-transition: left 0.5s; /* Mozilla Firefox */
-        transition: left 0.5s;
-    }
-
-    .page-wrapper {
-        position: absolute;
-        overflow-y: auto;
-        left: 315px;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        box-sizing: border-box;
-        -webkit-overflow-scrolling: touch;
-
-        min-height: 100%;
-
-        /* Animation: slide away */
-        -webkit-transition: left 0.5s; /* Safari */
-        -o-transition: left 0.5s; /* Opera */
-        -moz-transition: left 0.5s; /* Mozilla Firefox */
-        transition: left 0.5s;
-    }
-
-    .page {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-
-        padding-right: 15px;
-        overflow-y: auto;
-    }
-
-    .content {
-        margin-left: auto;
-        margin-right:auto;
-        max-width: 750px;
-        padding-bottom: 50px;
-    }
-
-    .chapter {
-        list-style: none outside none;
-        padding-left: 0;
-        line-height: 30px;
-    }
-
-    .section {
-        list-style: none outside none;
-        padding-left: 20px;
-        line-height: 40px;
-    }
-
-    .section li {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .chapter li a {
-        padding: 5px 0;
-        text-decoration: none;
-    }
-
-    .chapter li a:hover {
-        text-decoration: none;
-    }
-
-    .chapter .affix {
-
-    }
-
-    .chapter .spacer {
-        width: 100%;
-        height: 3px;
-        background-color: #f4f4f4;
-        margin: 10px 0px;
-    }
-
-    .navy .chapter .spacer {
-        background-color: #2d334f;
-    }
-
-    .coal .chapter .spacer {
-        background-color: #393939;
-    }
-
-    .rust .chapter .spacer {
-        background-color: #45373a;
-    }
-
-    .menu-bar {
-        position: relative;
-        height: 50px;
-    }
-
-    .menu-bar i {
-        position: relative;
-        margin: 0 10px;
-        z-index: 10;
-        line-height: 50px;
-        -webkit-transition: color 0.5s; /* Safari */
-        -o-transition: color 0.5s; /* Opera */
-        -moz-transition: color 0.5s; /* Mozilla Firefox */
-        transition: color 0.5s;
-    }
-
-    .menu-bar .left-buttons {
-        float: left;
-    }
-
-    .menu-bar .right-buttons {
-        float: right;
-    }
-
-    .menu-bar i:hover {
-        cursor: pointer;
-    }
-
-    .menu-title {
-        display: inline-block;
-        font-weight: 200;
-        font-size: 20px;
-        line-height: 50px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        text-align: center;
-        margin: 0;
-
-        opacity: 0;
-        -webkit-transition: opacity 0.5s ease-in-out; /* Safari */
-        -o-transition: opacity 0.5s ease-in-out; /* Opera */
-        -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
-        transition: opacity 0.5s ease-in-out;
-    }
-
-    .menu-bar:hover .menu-title {
-        opacity: 1;
-    }
-
-    .left {
-        float: left;
-    }
-
-    .right {
-        float: right;
-    }
-
-    /* Content */
-
-    .content a {
-        text-decoration: none;
-    }
-
-    .content a:hover {
-        text-decoration: underline;
-    }
-
-    .content img {
-        max-width: 100%;
-    }
-
-    /* Nav icons */
-    .nav-chapters {
-        font-size: 40px;
-        text-align: center;
-        text-decoration: none;
-
-        position: absolute;
-        top: 50px; /* Height of menu-bar */
-        bottom: 0;
-        margin: 0;
-        max-width: 150px;
-        min-width: 90px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-        flex-direction: column;
-
-        -webkit-transition: color 0.5s; /* Safari */
-        -o-transition: color 0.5s; /* Opera */
-        -moz-transition: color 0.5s; /* Mozilla Firefox */
-        transition: color 0.5s;
-    }
-
-    .mobile-nav-chapters { display: none; }
-
-    .nav-chapters:hover {
-        text-decoration: none;
-    }
-
-    .previous {
-        left: 0;
-    }
-
-    .next {
-        right: 0;
-    }
-
-
-    /* Theme Popup */
-    .theme-popup {
-        position: fixed;
-        left: -40px;
-
-        border-radius: 4px;
-
-        font-size: 0.7em;
-    }
-
-    .theme-popup .theme {
-        margin: 0;
-        padding: 2px 10px;
-        line-height: 25px;
-        white-space: nowrap;
-    }
-}
-
-
-@media only screen and (max-width: 1060px) {
-    .sidebar {
-        left: -300px;
-    }
-    .page-wrapper {
-        left: 15px;
-        padding-right: 15px;
-    }
-}
-
-/* Fix the navigation arrows that collapsed with the text on smaller screens */
-
-@media only screen and (max-width: 1250px) {
-    /* Light theme */
-    .light .mobile-nav-chapters {
-        background-color: #E0E0E0;
-        color: #999;
-    }
-    .light .mobile-nav-chapters i:hover {
-        color: #333;
-    }
-    /* Coal theme */
-    .coal .mobile-nav-chapters {
-        background-color: #212426;
-        color: #43484d;
-    }
-    .coal .mobile-nav-chapters i:hover {
-        color: #b3c0cc;
-    }
-    /* Navy theme */
-    .navy .mobile-nav-chapters {
-        background-color: #242838;
-        color: #737480;
-    }
-    .navy .mobile-nav-chapters i:hover {
-        color: #b7b9cc;
-    }
-    /* Rust theme */
-    .rust .mobile-nav-chapters {
-        background-color: #4d413d;
-        color: #737480;
-    }
-    .rust .mobile-nav-chapters i:hover {
-        color: #b7b9cc;
-    }
-    .nav-chapters {
-        display: none;
-    }
-
-    .mobile-nav-chapters {
-        font-size: 40px;
-        text-align: center;
-        text-decoration: none;
-
-        max-width: 150px;
-        min-width: 90px;
-
-        justify-content: center;
-        align-content: center;
-
-        position: relative;
-        display: inline-block;
-        margin-bottom: 50px;
-
-        border-radius: 5px;
-    }
-
-    .next {
-        float: right;
-    }
-
-    .previous {
-        float: left;
-    }
-}
-
-@media only print {
-    .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters {
-      display: none;
-    }
-
-    .page-wrapper {
-      left: 0;
-    }
-
-    .content {
-      max-width: 100%;
-    }
-
-    code {
-      background-color: #666666;
-      border-radius: 5px;
-
-      /* Force background to be printed in Chrome */
-      -webkit-print-color-adjust: exact;
-    }
-
-    a, a:visited, a:active, a:hover {
-      color: #4183c4;
-      text-decoration: none;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        page-break-inside: avoid;
-        page-break-after: avoid;
-        /*break-after: avoid;*/
-    }
-
-    pre, code {
-        page-break-inside: avoid;
-        white-space: pre-wrap;       /* CSS 3 */
-        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-        white-space: -pre-wrap;      /* Opera 4-6 */
-        white-space: -o-pre-wrap;    /* Opera 7 */
-        word-wrap: break-word;       /* Internet Explorer 5.5+ */
-    }
-}
diff --git a/src/theme/book.css b/src/theme/book.css
deleted file mode 100644
index 8fb49149..00000000
--- a/src/theme/book.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  font-size: 2px;
-}
diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl
index 81b0e5b3..f8eaaaf0 100644
--- a/src/theme/stylus/book.styl
+++ b/src/theme/stylus/book.styl
@@ -1,3 +1,9 @@
-body {
-    font-size: 2px;
-}
+@import "nib"
+
+@import 'general'
+@import 'sidebar'
+@import 'page'
+@import 'menu'
+@import 'nav-icons'
+@import 'theme-popup'
+@import 'themes'
diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl
new file mode 100644
index 00000000..8a92e25f
--- /dev/null
+++ b/src/theme/stylus/general.styl
@@ -0,0 +1,12 @@
+html, body {
+    font-family: "Open Sans", sans-serif;
+    color: #333;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl
new file mode 100644
index 00000000..e3a8a20b
--- /dev/null
+++ b/src/theme/stylus/menu.styl
@@ -0,0 +1,39 @@
+.menu-bar {
+    position: relative
+    height: 50px
+
+    i {
+        position: relative
+        margin: 0 10px
+        z-index: 10
+        line-height: 50px
+
+        transition: color 0.5s
+
+        &:hover { cursor: pointer }
+    }
+
+    .left-buttons { float: left }
+    .right-buttons { float: right }
+}
+
+.menu-title {
+    display: inline-block
+    font-weight: 200
+    font-size: 20px
+    line-height: 50px
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    text-align: center
+    margin: 0
+
+    opacity: 0
+    transition: opacity 0.5s ease-in-out
+}
+
+.menu-bar:hover .menu-title {
+    opacity: 1
+}
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
new file mode 100644
index 00000000..2ffb93f7
--- /dev/null
+++ b/src/theme/stylus/nav-icons.styl
@@ -0,0 +1,23 @@
+.nav-chapters {
+    font-size: 2.5em
+    text-align: center
+    text-decoration: none
+
+    position: absolute
+    top: 50px /* Height of menu-bar */
+    bottom: 0
+    margin: 0
+    max-width: 150px
+    min-width: 90px
+    display: flex
+    justify-content: center
+    align-content: center
+    flex-direction: column
+
+    transition: color 0.5s
+}
+
+.mobile-nav-chapters { display: none }
+.nav-chapters:hover { text-decoration: none }
+.previous { left: 0 }
+.next { right: 0 }
diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl
new file mode 100644
index 00000000..8ca5de37
--- /dev/null
+++ b/src/theme/stylus/page.styl
@@ -0,0 +1,45 @@
+.page-wrapper {
+    position: absolute
+    overflow-y: auto
+    left: 315px
+    right: 0
+    top: 0
+    bottom: 0
+    box-sizing: border-box
+    -webkit-overflow-scrolling: touch
+
+    min-height: 100%
+
+    // Animation: slide away
+    transition: left 0.5s
+
+    @media only screen and (max-width: 1060px) {
+        left: 15px;
+        padding-right: 15px;
+    }
+}
+
+.page {
+    position: absolute
+    top: 0
+    right: 0
+    left: 0
+    bottom: 0
+
+    padding-right: 15px
+    overflow-y: auto
+}
+
+.content {
+    margin-left: auto
+    margin-right:auto
+    max-width: 750px
+    padding-bottom: 50px
+
+    a {
+        text-decoration: none;
+        &:hover { text-decoration: underline; }
+    }
+
+    img { max-width: 100%; }
+}
diff --git a/src/theme/stylus/print.styl b/src/theme/stylus/print.styl
new file mode 100644
index 00000000..95d68fc9
--- /dev/null
+++ b/src/theme/stylus/print.styl
@@ -0,0 +1,45 @@
+@media only print {
+
+    .sidebar,
+    .menu-bar,
+    .nav-chapters,
+    .mobile-nav-chapters {
+      display: none
+    }
+
+    .page-wrapper {
+      left: 0
+    }
+
+    .content {
+      max-width: 100%
+    }
+
+    code {
+      background-color: #666666
+      border-radius: 5px
+
+      /* Force background to be printed in Chrome */
+      -webkit-print-color-adjust: exact
+    }
+
+    a, a:visited, a:active, a:hover {
+      color: #4183c4
+      text-decoration: none
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        page-break-inside: avoid
+        page-break-after: avoid
+        /*break-after: avoid*/
+    }
+
+    pre, code {
+        page-break-inside: avoid
+        white-space: pre-wrap       /* CSS 3 */
+        white-space: -moz-pre-wrap  /* Mozilla, since 1999 */
+        white-space: -pre-wrap      /* Opera 4-6 */
+        white-space: -o-pre-wrap    /* Opera 7 */
+        word-wrap: break-word       /* Internet Explorer 5.5+ */
+    }
+}
diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl
new file mode 100644
index 00000000..9feb5a18
--- /dev/null
+++ b/src/theme/stylus/sidebar.styl
@@ -0,0 +1,50 @@
+.sidebar {
+    position: absolute
+    left: 0
+    top: 0
+    bottom: 0
+    width: 300px
+    overflow-y: auto
+    padding: 10px 10px
+    font-size: 0.875em
+    box-sizing: border-box
+    -webkit-overflow-scrolling: touch
+
+    // Animation: slide away
+    transition: left 0.5s
+
+    @media only screen and (max-width: 1060px) {
+        left: -300px
+    }
+}
+
+.chapter {
+    list-style: none outside none
+    padding-left: 0
+    line-height: 1.9em
+
+    li a {
+        padding: 5px 0
+        text-decoration: none
+
+        &:hover { text-decoration: none }
+    }
+
+    .spacer {
+        width: 100%
+        height: 3px
+        margin: 10px 0px
+    }
+}
+
+.section {
+    list-style: none outside none
+    padding-left: 20px
+    line-height: 2.5em
+
+    li {
+        text-overflow: ellipsis
+        overflow: hidden
+        white-space: nowrap
+    }
+}
diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl
new file mode 100644
index 00000000..53c06cb2
--- /dev/null
+++ b/src/theme/stylus/theme-popup.styl
@@ -0,0 +1,47 @@
+.theme-popup {
+    position: fixed
+    left: -40px
+
+    border-radius: 4px
+    font-size: 0.7em
+
+    .theme {
+        margin: 0
+        padding: 2px 10px
+        line-height: 25px
+        white-space: nowrap
+    }
+}
+
+@media only screen and (max-width: 1250px) {
+
+    .nav-chapters {
+        display: none
+    }
+
+    .mobile-nav-chapters {
+        font-size: 2.5em
+        text-align: center
+        text-decoration: none
+
+        max-width: 150px
+        min-width: 90px
+
+        justify-content: center
+        align-content: center
+
+        position: relative
+        display: inline-block
+        margin-bottom: 50px
+
+        border-radius: 5px
+    }
+
+    .next {
+        float: right
+    }
+
+    .previous {
+        float: left
+    }
+}
diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl
new file mode 100644
index 00000000..5411b2bf
--- /dev/null
+++ b/src/theme/stylus/themes/base.styl
@@ -0,0 +1,52 @@
+.{unquote($theme-name)} {
+    color: $fg
+    background-color: $bg
+
+    .sidebar {
+        background-color: $sidebar-bg
+        color: $sidebar-fg
+    }
+
+    .chapter li {
+        color: $sidebar-non-existant
+
+        a { color: $sidebar-fg }
+
+        .active,
+         a:hover {
+            /* Animate color change */
+            color: $sidebar-active
+        }
+    }
+
+    .chapter .spacer {
+        background-color: $sidebar-spacer
+    }
+
+    .menu-bar,
+    .nav-chapters,
+    .mobile-nav-chapters {
+        color: $icons
+    }
+
+    .menu-bar i:hover,
+    .nav-chapters:hover,
+    .mobile-nav-chapters i:hover {
+        color: $icons-hover
+    }
+
+    .mobile-nav-chapters {
+        background-color: $sidebar-bg
+    }
+
+    .content a {
+        color: $links
+    }
+
+    .theme-popup {
+        background: $theme-popup-bg
+        border: 1px solid $theme-popup-border
+
+        .theme:hover { background-color: $theme-hover }
+    }
+}
diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl
new file mode 100644
index 00000000..0abb10a0
--- /dev/null
+++ b/src/theme/stylus/themes/coal.styl
@@ -0,0 +1,21 @@
+$theme-name = 'coal'
+
+$bg = #141617
+$fg = #98a3ad
+
+$sidebar-bg = #292c2f
+$sidebar-fg = #a1adb8
+$sidebar-non-existant = #505254
+$sidebar-active = #3473ad
+$sidebar-spacer = #393939
+
+$icons = #43484d
+$icons-hover = #b3c0cc
+
+$links = #2b79a2
+
+$theme-popup-bg = #141617
+$theme-popup-border = #43484d
+$theme-hover = #1f2124
+
+@import 'base'
diff --git a/src/theme/stylus/themes/index.styl b/src/theme/stylus/themes/index.styl
new file mode 100644
index 00000000..f364b5aa
--- /dev/null
+++ b/src/theme/stylus/themes/index.styl
@@ -0,0 +1,4 @@
+@import 'light'
+@import 'coal'
+@import 'navy'
+@import 'rust'
diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl
new file mode 100644
index 00000000..871b0a8c
--- /dev/null
+++ b/src/theme/stylus/themes/light.styl
@@ -0,0 +1,21 @@
+$theme-name = 'light'
+
+$bg = #ffffff
+$fg = #333333
+
+$sidebar-bg = #fafafa
+$sidebar-fg = #364149
+$sidebar-non-existant = #aaaaaa
+$sidebar-active = #008cff
+$sidebar-spacer = #f4f4f4
+
+$icons = #cccccc
+$icons-hover = #333333
+
+$links = #4183c4
+
+$theme-popup-bg = #fafafa
+$theme-popup-border = #cccccc
+$theme-hover = #e6e6e6
+
+@import 'base'
diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl
new file mode 100644
index 00000000..51d5aaf6
--- /dev/null
+++ b/src/theme/stylus/themes/navy.styl
@@ -0,0 +1,21 @@
+$theme-name = 'navy'
+
+$bg = #161923
+$fg = #bcbdd0
+
+$sidebar-bg = #282d3f
+$sidebar-fg = #c8c9db
+$sidebar-non-existant = #505274
+$sidebar-active = #2b79a2
+$sidebar-spacer = #2d334f
+
+$icons = #737480
+$icons-hover = #b7b9cc
+
+$links = #2b79a2
+
+$theme-popup-bg = #161923
+$theme-popup-border = #737480
+$theme-hover = #282e40
+
+@import 'base'
diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl
new file mode 100644
index 00000000..98227960
--- /dev/null
+++ b/src/theme/stylus/themes/rust.styl
@@ -0,0 +1,21 @@
+$theme-name = 'rust'
+
+$bg = #e1e1db
+$fg = #262625
+
+$sidebar-bg = #3b2e2a
+$sidebar-fg = #c8c9db
+$sidebar-non-existant = #505254
+$sidebar-active = #e69f67
+$sidebar-spacer = #45373a
+
+$icons = #737480
+$icons-hover = #262625
+
+$links = #2b79a2
+
+$theme-popup-bg = #e1e1db
+$theme-popup-border = #b38f6b
+$theme-hover = #99908a
+
+@import 'base'