diff --git a/_config.yml b/_config.yml
index 04b1a7add07..a726d7840ea 100644
--- a/_config.yml
+++ b/_config.yml
@@ -101,3 +101,5 @@ footer_links:
   - title: Feed
     url: atom.xml
     icon: fas fa-rss-square
+
+skin: "/assets/css/skins/default.css"
diff --git a/_includes/head.html b/_includes/head.html
index 65c7fee5d1e..589012f6db8 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -24,6 +24,7 @@
   </script>
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+  <link rel="stylesheet" href="{{ site.skin | default: '/assets/css/skins/default.css' | relative_url }}">
   {% if site.google_fonts %}
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={%- for font in site.google_fonts -%}{{ font.name | replace: ' ', '+' }}{% if font.weights %}:{% endif %}{{ font.weights | remove: ' ' }}{% if forloop.last != true %}|{% endif %}{%- endfor -%}">
   {% endif %}
diff --git a/_sass/so-simple/_base.scss b/_sass/so-simple/_base.scss
index e13abf92cca..04cec863f69 100644
--- a/_sass/so-simple/_base.scss
+++ b/_sass/so-simple/_base.scss
@@ -7,9 +7,7 @@ html {
 }
 
 body {
-  background: $background-color;
-  color: $text-color;
-  border-top: solid 0.25em $nav-background-color;
+  border-top: solid 0.25em;
 }
 
 blockquote,
@@ -37,6 +35,7 @@ kbd {
   display: inline-block;
   margin: 0 0.125em;
   padding: 0.125em 0.5em;
+  color: #000;
   border: 1px solid rgb(204, 204, 204);
   border-radius: 3px;
   background-color: rgb(247, 247, 247);
@@ -102,11 +101,6 @@ figcaption {
 }
 
 a {
-  color: $accent-color;
   -webkit-transition: $global-transition;
   transition: $global-transition;
-
-  &:hover {
-    color: shade($accent-color, 25%);
-  }
 }
diff --git a/_sass/so-simple/_buttons.scss b/_sass/so-simple/_buttons.scss
index 822d64c9304..344f7af28ab 100644
--- a/_sass/so-simple/_buttons.scss
+++ b/_sass/so-simple/_buttons.scss
@@ -28,34 +28,6 @@
     margin-left: -0.5em; /* override for hidden text*/
   }
 
-  /* button colors */
-  $buttoncolors: (primary, $primary-color), (accent, $accent-color), (inverse, #fff),
-     (light-outline, transparent),  (success, $success-color),
-     (warning, $warning-color),  (danger, $danger-color),  (info, $info-color),
-     (facebook, $facebook-color),  (twitter, $twitter-color),
-     (google-plus, $google-plus-color),  (linkedin, $linkedin-color),
-     (reddit, $reddit-color);
-
-  @each $buttoncolor, $color in $buttoncolors {
-    &--#{$buttoncolor} {
-      @include yiq-contrasted($color);
-      @if ($buttoncolor == inverse) {
-        border: 1px solid $border-color;
-      }
-      @if ($buttoncolor == light-outline) {
-        border: 1px solid #fff;
-      }
-
-      &:hover {
-        @include yiq-contrasted(mix(#000, $color, 20%));
-      }
-
-      &:visited {
-        @include yiq-contrasted($color);
-      }
-    }
-  }
-
   /* fills width of parent container */
   &--block {
     display: block;
diff --git a/_sass/so-simple/_entries.scss b/_sass/so-simple/_entries.scss
index 5ac002708ca..04790e4d30f 100644
--- a/_sass/so-simple/_entries.scss
+++ b/_sass/so-simple/_entries.scss
@@ -8,10 +8,6 @@
 
   a {
     color: inherit;
-
-    &:hover {
-      color: $accent-color;
-    }
   }
 }
 
diff --git a/_sass/so-simple/_global.scss b/_sass/so-simple/_global.scss
index 429c00090d2..4da548937ee 100644
--- a/_sass/so-simple/_global.scss
+++ b/_sass/so-simple/_global.scss
@@ -14,8 +14,6 @@
   display: block;
   margin: 0;
   padding: 0.25em 0.75em 0.5em;
-  color: $nav-color;
-  background-color: $nav-background-color;
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
@@ -35,8 +33,6 @@
     margin: 0;
     padding: 0.25em 0.75em;
     list-style: none;
-    color: $nav-color;
-    background-color: $nav-background-color;
     border-radius: 0 0 (2 * $border-radius) (2 * $border-radius);
 
     @include breakpoint($medium) {
@@ -52,15 +48,10 @@
   a {
     display: block;
     padding: 0.5em 0.75em;
-    color: $nav-color;
     text-transform: uppercase;
     text-decoration: none;
-    border: 1px solid $nav-background-color;
+    border: 1px solid;
     border-radius: $border-radius;
-
-    &:hover {
-      border-color: $nav-color;
-    }
   }
 
   @include breakpoint($medium) {
@@ -87,7 +78,6 @@
   font-weight: 700;
 
   a {
-    color: $text-color;
     text-decoration: none;
   }
 }
@@ -109,7 +99,7 @@
 .site-logo-img {
   width: $site-logo-width;
   height: $site-logo-height;
-  border: 5px solid $background-color;
+  border: 5px solid;
   border-radius: $site-logo-width;
 
   @include breakpoint($medium) {
@@ -130,7 +120,7 @@
   margin: 2em 0;
   padding: 2em 0;
   text-align: center;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid;
 
   .social-icons {
     margin-bottom: 0.5em;
@@ -143,23 +133,18 @@
 }
 
 .copyright {
-  color: lighten($text-color, 35%);
   font-size: 0.75em;
 
   p {
     margin: 0;
     padding: 0;
   }
-
-  a {
-    color: lighten($text-color, 35%);
-  }
 }
 
 .footnotes {
   margin: 2rem 0;
   padding-top: 1rem;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid;
   font-size: 80%;
 }
 
@@ -170,7 +155,6 @@
 
 .back-to-top {
   display: block;
-  color: lighten($text-color, 50%);
   font-size: 0.75em;
   text-transform: uppercase;
   text-align: right;
@@ -182,7 +166,7 @@
   padding-bottom: 1em;
 
   &:not(:last-child) {
-    border-bottom: solid 1px $border-color;
+    border-bottom: solid 1px;
   }
 
   + .taxonomy-section {
@@ -193,14 +177,9 @@
 .taxonomy-title {
   @include fluid-type($min-vw, $max-vw, 28px, 32px);
   margin-bottom: 0.5em;
-  color: lighten($text-color, 60%);
   font-family: $base-font-family;
 }
 
-.taxonomy-count {
-  color: lighten($text-color, 50%);
-}
-
 .taxonomy-index {
   display: grid;
   grid-column-gap: 2em;
@@ -225,11 +204,7 @@
     justify-content: space-between;
     color: inherit;
     text-decoration: none;
-    border-bottom: 1px solid $border-color;
-
-    &:hover {
-      color: $accent-color;
-    }
+    border-bottom: 1px solid;
   }
 
   + .taxonomy-section {
@@ -260,22 +235,15 @@
       display: block;
       margin-bottom: 0.25em;
       padding: 0.5em 1em;
-      color: mix(#000, $border-color, 25%);
       font-size: 14px;
       font-weight: bold;
       line-height: 1.5;
       text-align: center;
       text-decoration: none;
-      border: 1px solid $border-color;
+      border: 1px solid;
       border-radius: 0;
 
-      &.current,
-      &.current.disabled {
-        @include yiq-contrasted(mix(#000, $border-color, 25%));
-      }
-
       &.disabled {
-        color: $border-color;
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -304,14 +272,14 @@
   padding: 0.5em;
   width: 100%;
   font-size: 0.9em;
-  border: 2px solid $border-color;
+  border: 2px solid;
   border-radius: $border-radius;
 }
 
 .toc-wrapper {
   display: inline-block;
   margin-bottom: 1.5em;
-  border: 1px solid (mix(#fff, $border-color, 25%));
+  border: 1px solid;
   border-radius: $border-radius;
 
   h2 {
@@ -326,8 +294,6 @@
     align-items: center;
     margin: 0;
     padding: 0.75rem 1rem;
-    color: $base05;
-    background-color: $base00;
     font-family: $base-font-family;
     font-size: 0.75rem;
     text-transform: uppercase;
@@ -356,7 +322,6 @@
     margin-bottom: 0;
     padding-left: 2rem;
     overflow: hidden;
-    color: $base05;
     font-size: 0.9rem;
     -webkit-transition: height 350ms ease;
     transition: height 350ms ease;
@@ -378,17 +343,11 @@
       font-weight: 600;
       text-decoration: none;
       border-bottom: 1px dotted transparent;
-
-      &:hover,
-      &:focus {
-        border-bottom: 1px dotted $border-color;
-      }
     }
 
     ol {
       padding-left: 0.5rem;
       list-style-type: lower-roman;
-      background-color: $background-color;
     }
   }
 }
diff --git a/_sass/so-simple/_notices.scss b/_sass/so-simple/_notices.scss
index 96c166a4c8e..f76e8abdf35 100644
--- a/_sass/so-simple/_notices.scss
+++ b/_sass/so-simple/_notices.scss
@@ -55,45 +55,3 @@
     }
   }
 }
-
-/* Default notice */
-
-.notice {
-  @include notice(lighten($base-color, 90%));
-}
-
-/* Primary notice */
-
-.notice--primary {
-  @include notice(mix(#fff, $primary-color, 70%));
-}
-
-/* Accent notice */
-
-.notice--accent {
-  @include notice(mix(#fff, $accent-color, 70%));
-}
-
-/* Info notice */
-
-.notice--info {
-  @include notice(mix(#fff, $info-color, 70%));
-}
-
-/* Warning notice */
-
-.notice--warning {
-  @include notice(mix(#fff, $warning-color, 70%));
-}
-
-/* Success notice */
-
-.notice--success {
-  @include notice(mix(#fff, $success-color, 70%));
-}
-
-/* Danger notice */
-
-.notice--danger {
-  @include notice(mix(#fff, $danger-color, 70%));
-}
diff --git a/_sass/so-simple/_page.scss b/_sass/so-simple/_page.scss
index 58b4b4d8459..c74a4319dec 100644
--- a/_sass/so-simple/_page.scss
+++ b/_sass/so-simple/_page.scss
@@ -172,7 +172,6 @@
   -ms-flex: 1;
   flex: 1;
   text-decoration: none;
-  color: $text-color;
 }
 
 .page-next {
diff --git a/_sass/so-simple/_reset.scss b/_sass/so-simple/_reset.scss
index 94d7b83772e..dc0e6bbcc69 100644
--- a/_sass/so-simple/_reset.scss
+++ b/_sass/so-simple/_reset.scss
@@ -224,8 +224,7 @@ blockquote {
   margin-right: 0;
   margin-left: 0;
   padding: 2em 3em;
-  background-color: mix(#fff, $accent-color, 95%);
-  border-left: solid 0.5em $accent-color;
+  border-left: solid 0.5em;
 
   *:last-child {
     margin-bottom: 0;
diff --git a/_sass/so-simple/_skin.scss b/_sass/so-simple/_skin.scss
new file mode 100644
index 00000000000..ce3f65dd3d6
--- /dev/null
+++ b/_sass/so-simple/_skin.scss
@@ -0,0 +1,552 @@
+/* ==========================================================================
+   Base elements
+   ========================================================================== */
+
+body {
+  color: $text-color;
+  background: $background-color;
+  border-top-color: $nav-background-color;
+}
+
+a {
+  color: $accent-color;
+
+  &:hover {
+    color: shade($accent-color, 25%);
+  }
+}
+
+blockquote {
+  background-color: mix($background-color, $accent-color, 90%);
+  border-left-color: $accent-color;
+}
+  
+/* ==========================================================================
+   Site-wide
+   ========================================================================== */
+
+.site-title {
+  a {
+    color: $text-color;
+  }
+}
+  
+.copyright {
+  color: lighten($text-color, 35%);
+  a {
+    color: lighten($text-color, 35%);
+  }
+}
+
+.taxonomy-title {
+  color: lighten($text-color, 60%);
+}
+
+.taxonomy-count {
+  color: lighten($text-color, 50%);
+}
+
+.taxonomy-index {
+  a {
+    border-bottom-color: $border-color;
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+}
+
+.taxonomy-section {
+  &:not(:last-child) {
+    border-bottom-color: $border-color;
+  }
+}
+
+.back-to-top {
+  color: lighten($text-color, 50%);
+}
+
+.site-nav {
+  ul {
+    color: $nav-color;
+    background-color: $nav-background-color;
+  }
+
+  a {
+    color: $nav-color;
+    border-color: $nav-background-color;
+
+    &:hover {
+      border-color: $nav-color;
+    }
+  }
+}
+
+.site-footer {
+  border-top-color: $border-color;
+}
+
+.footnotes {
+  border-top-color: $border-color;
+}
+
+.site-logo-img {
+  border-color: $background-color;
+}
+
+.toc-wrapper {
+  border-color: mix(#fff, $border-color, 25%);
+
+  h2 {
+    color: $base05;
+    background-color: $base00;
+  }
+
+  li {
+    ol {
+      background-color: $background-color;
+    }
+
+    a {
+      &:hover,
+      &:focus {
+        border-bottom: 1px dotted $border-color;
+      }
+    }
+  }
+}
+
+#menu-toggle {
+  color: $nav-color;
+}
+
+#menu-toggle {
+  background-color: $nav-background-color;
+}
+
+#markdown-toc {
+  color: $base05;
+}
+
+.pagination {
+  li {
+    a {
+      color: mix(#000, $border-color, 25%);
+      border-color: $border-color;
+
+      &.current,
+      &.current.disabled {
+        @include yiq-contrasted(mix(#000, $border-color, 25%));
+      }
+
+      &.disabled {
+        color: $border-color;
+      }
+    }
+  }
+}
+
+.search-input {
+  border-color: $border-color;
+}
+
+/* ==========================================================================
+   Page
+   ========================================================================== */
+
+.page-previous,
+.page-next {
+  color: $text-color;
+}
+
+/* ==========================================================================
+   Entries (Posts, collection documents, etc.)
+   ========================================================================== */
+
+.entry {
+  a {
+    &:hover {
+      color: $accent-color;
+    }
+  }
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+th,
+td {
+  border-bottom-color: $border-color;
+}
+
+  
+/* ==========================================================================
+   NOTICE TEXT BLOCKS
+   ========================================================================== */
+  
+/* Default notice */
+.notice {
+  @include notice(lighten($base-color, 90%));
+}
+
+/* Accent notice */
+.notice--accent {
+  @include notice(mix(#fff, $accent-color, 70%));
+}
+
+/* Primary notice */
+.notice--primary {
+  @include notice(mix(#fff, $primary-color, 70%));
+}
+
+/* Warning notice */
+.notice--warning {
+  @include notice(mix(#fff, $warning-color, 70%));
+}
+
+/* Success notice */
+.notice--success {
+  @include notice(mix(#fff, $success-color, 70%));
+}
+
+/* Danger notice */
+.notice--danger {
+  @include notice(mix(#fff, $danger-color, 70%));
+}
+
+/* Info notice */
+.notice--info {
+  @include notice(mix(#fff, $info-color, 70%));
+}
+  
+/* ==========================================================================
+   Accessibility Modules
+   ========================================================================== */
+
+/* Text meant only for screen readers */
+.screen-reader-text,
+.screen-reader-text span,
+.screen-reader-shortcut {
+  background-color: $base-color;
+}
+
+/* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+.btn {
+  /* button colors */
+  $buttoncolors: (primary, $primary-color), (accent, $accent-color), (inverse, #fff),
+  (light-outline, transparent),  (success, $success-color),
+  (warning, $warning-color),  (danger, $danger-color),  (info, $info-color),
+  (facebook, $facebook-color),  (twitter, $twitter-color),
+  (google-plus, $google-plus-color),  (linkedin, $linkedin-color),
+  (reddit, $reddit-color);
+
+  @each $buttoncolor, $color in $buttoncolors {
+    &--#{$buttoncolor} {
+      @include yiq-contrasted($color);
+      @if ($buttoncolor == inverse) {
+        border: 1px solid $border-color;
+      }
+      @if ($buttoncolor == light-outline) {
+        border: 1px solid #fff;
+      }
+
+      &:hover {
+        @include yiq-contrasted(mix(#000, $color, 20%));
+      }
+
+      &:visited {
+        @include yiq-contrasted($color);
+      }
+    }
+  }
+}
+
+/* ==========================================================================
+   Syntax highlighting
+   ========================================================================== */
+
+code.highlighter-rouge {
+  color: $base05;
+  background-color: $base00;
+}
+
+div.highlighter-rouge,
+figure.highlight {
+  color: $base05;
+  background-color: $base00;
+}
+
+.highlight table {
+  td {
+    &.gutter {
+      color: $base04;
+      border-right-color: $base04;
+    }
+  }
+}
+
+.highlight .hll {
+  background-color: $base06;
+}
+
+.highlight {
+  .c {
+    /* Comment */
+    color: $base04;
+  }
+  .err {
+    /* Error */
+    color: $base08;
+  }
+  .k {
+    /* Keyword */
+    color: $base0e;
+  }
+  .l {
+    /* Literal */
+    color: $base09;
+  }
+  .n {
+    /* Name */
+    color: $base05;
+  }
+  .o {
+    /* Operator */
+    color: $base0c;
+  }
+  .p {
+    /* Punctuation */
+    color: $base05;
+  }
+  .cm {
+    /* Comment.Multiline */
+    color: $base04;
+  }
+  .cp {
+    /* Comment.Preproc */
+    color: $base04;
+  }
+  .c1 {
+    /* Comment.Single */
+    color: $base04;
+  }
+  .cs {
+    /* Comment.Special */
+    color: $base04;
+  }
+  .gd {
+    /* Generic.Deleted */
+    color: $base08;
+  }
+  .ge {
+    /* Generic.Emph */
+    font-style: italic;
+  }
+  .gh {
+    /* Generic.Heading */
+    color: $base05;
+    font-weight: bold;
+  }
+  .gi {
+    /* Generic.Inserted */
+    color: $base0b;
+  }
+  .gp {
+    /* Generic.Prompt */
+    color: $base04;
+    font-weight: bold;
+  }
+  .gs {
+    /* Generic.Strong */
+    font-weight: bold;
+  }
+  .gu {
+    /* Generic.Subheading */
+    color: $base0c;
+    font-weight: bold;
+  }
+  .kc {
+    /* Keyword.Constant */
+    color: $base0e;
+  }
+  .kd {
+    /* Keyword.Declaration */
+    color: $base0e;
+  }
+  .kn {
+    /* Keyword.Namespace */
+    color: $base0c;
+  }
+  .kp {
+    /* Keyword.Pseudo */
+    color: $base0e;
+  }
+  .kr {
+    /* Keyword.Reserved */
+    color: $base0e;
+  }
+  .kt {
+    /* Keyword.Type */
+    color: $base0a;
+  }
+  .ld {
+    /* Literal.Date */
+    color: $base0b;
+  }
+  .m {
+    /* Literal.Number */
+    color: $base09;
+  }
+  .s {
+    /* Literal.String */
+    color: $base0b;
+  }
+  .na {
+    /* Name.Attribute */
+    color: $base0d;
+  }
+  .nb {
+    /* Name.Builtin */
+    color: $base05;
+  }
+  .nc {
+    /* Name.Class */
+    color: $base0a;
+  }
+  .no {
+    /* Name.Constant */
+    color: $base08;
+  }
+  .nd {
+    /* Name.Decorator */
+    color: $base0c;
+  }
+  .ni {
+    /* Name.Entity */
+    color: $base05;
+  }
+  .ne {
+    /* Name.Exception */
+    color: $base08;
+  }
+  .nf {
+    /* Name.Function */
+    color: $base0d;
+  }
+  .nl {
+    /* Name.Label */
+    color: $base05;
+  }
+  .nn {
+    /* Name.Namespace */
+    color: $base0a;
+  }
+  .nx {
+    /* Name.Other */
+    color: $base0d;
+  }
+  .py {
+    /* Name.Property */
+    color: $base05;
+  }
+  .nt {
+    /* Name.Tag */
+    color: $base0c;
+  }
+  .nv {
+    /* Name.Variable */
+    color: $base08;
+  }
+  .ow {
+    /* Operator.Word */
+    color: $base0c;
+  }
+  .w {
+    /* Text.Whitespace */
+    color: $base05;
+  }
+  .mf {
+    /* Literal.Number.Float */
+    color: $base09;
+  }
+  .mh {
+    /* Literal.Number.Hex */
+    color: $base09;
+  }
+  .mi {
+    /* Literal.Number.Integer */
+    color: $base09;
+  }
+  .mo {
+    /* Literal.Number.Oct */
+    color: $base09;
+  }
+  .sb {
+    /* Literal.String.Backtick */
+    color: $base0b;
+  }
+  .sc {
+    /* Literal.String.Char */
+    color: $base05;
+  }
+  .sd {
+    /* Literal.String.Doc */
+    color: $base04;
+  }
+  .s2 {
+    /* Literal.String.Double */
+    color: $base0b;
+  }
+  .se {
+    /* Literal.String.Escape */
+    color: $base09;
+  }
+  .sh {
+    /* Literal.String.Heredoc */
+    color: $base0b;
+  }
+  .si {
+    /* Literal.String.Interpol */
+    color: $base09;
+  }
+  .sx {
+    /* Literal.String.Other */
+    color: $base0b;
+  }
+  .sr {
+    /* Literal.String.Regex */
+    color: $base0b;
+  }
+  .s1 {
+    /* Literal.String.Single */
+    color: $base0b;
+  }
+  .ss {
+    /* Literal.String.Symbol */
+    color: $base0b;
+  }
+  .bp {
+    /* Name.Builtin.Pseudo */
+    color: $base05;
+  }
+  .vc {
+    /* Name.Variable.Class */
+    color: $base08;
+  }
+  .vg {
+    /* Name.Variable.Global */
+    color: $base08;
+  }
+  .vi {
+    /* Name.Variable.Instance */
+    color: $base08;
+  }
+  .il {
+    /* Literal.Number.Integer.Long */
+    color: $base09;
+  }
+}
diff --git a/_sass/so-simple/_syntax-highlighting.scss b/_sass/so-simple/_syntax-highlighting.scss
index 557ea4e7214..802531e3d56 100644
--- a/_sass/so-simple/_syntax-highlighting.scss
+++ b/_sass/so-simple/_syntax-highlighting.scss
@@ -7,8 +7,6 @@
 code.highlighter-rouge {
   margin: 0;
   padding: 0.2em 0.4em;
-  color: $base05;
-  background-color: $base00;
   font-size: 85%;
   border-radius: 3px;
 }
@@ -19,8 +17,6 @@ div.highlighter-rouge,
 figure.highlight {
   position: relative;
   margin-bottom: 1em;
-  background: $base00;
-  color: $base05;
   font-family: $monospace-font-family;
   line-height: 1.8;
 
@@ -45,8 +41,7 @@ figure.highlight {
     &.gutter {
       padding-right: 1em;
       width: 1em;
-      color: $base04;
-      border-right: 1px solid $base04;
+      border-right: 1px solid;
       text-align: right;
     }
 
@@ -65,267 +60,6 @@ figure.highlight {
   width: 100%;
 }
 
-.highlight .hll {
-  background-color: $base06;
-}
-.highlight {
-  .c {
-    /* Comment */
-    color: $base04;
-  }
-  .err {
-    /* Error */
-    color: $base08;
-  }
-  .k {
-    /* Keyword */
-    color: $base0e;
-  }
-  .l {
-    /* Literal */
-    color: $base09;
-  }
-  .n {
-    /* Name */
-    color: $base05;
-  }
-  .o {
-    /* Operator */
-    color: $base0c;
-  }
-  .p {
-    /* Punctuation */
-    color: $base05;
-  }
-  .cm {
-    /* Comment.Multiline */
-    color: $base04;
-  }
-  .cp {
-    /* Comment.Preproc */
-    color: $base04;
-  }
-  .c1 {
-    /* Comment.Single */
-    color: $base04;
-  }
-  .cs {
-    /* Comment.Special */
-    color: $base04;
-  }
-  .gd {
-    /* Generic.Deleted */
-    color: $base08;
-  }
-  .ge {
-    /* Generic.Emph */
-    font-style: italic;
-  }
-  .gh {
-    /* Generic.Heading */
-    color: $base05;
-    font-weight: bold;
-  }
-  .gi {
-    /* Generic.Inserted */
-    color: $base0b;
-  }
-  .gp {
-    /* Generic.Prompt */
-    color: $base04;
-    font-weight: bold;
-  }
-  .gs {
-    /* Generic.Strong */
-    font-weight: bold;
-  }
-  .gu {
-    /* Generic.Subheading */
-    color: $base0c;
-    font-weight: bold;
-  }
-  .kc {
-    /* Keyword.Constant */
-    color: $base0e;
-  }
-  .kd {
-    /* Keyword.Declaration */
-    color: $base0e;
-  }
-  .kn {
-    /* Keyword.Namespace */
-    color: $base0c;
-  }
-  .kp {
-    /* Keyword.Pseudo */
-    color: $base0e;
-  }
-  .kr {
-    /* Keyword.Reserved */
-    color: $base0e;
-  }
-  .kt {
-    /* Keyword.Type */
-    color: $base0a;
-  }
-  .ld {
-    /* Literal.Date */
-    color: $base0b;
-  }
-  .m {
-    /* Literal.Number */
-    color: $base09;
-  }
-  .s {
-    /* Literal.String */
-    color: $base0b;
-  }
-  .na {
-    /* Name.Attribute */
-    color: $base0d;
-  }
-  .nb {
-    /* Name.Builtin */
-    color: $base05;
-  }
-  .nc {
-    /* Name.Class */
-    color: $base0a;
-  }
-  .no {
-    /* Name.Constant */
-    color: $base08;
-  }
-  .nd {
-    /* Name.Decorator */
-    color: $base0c;
-  }
-  .ni {
-    /* Name.Entity */
-    color: $base05;
-  }
-  .ne {
-    /* Name.Exception */
-    color: $base08;
-  }
-  .nf {
-    /* Name.Function */
-    color: $base0d;
-  }
-  .nl {
-    /* Name.Label */
-    color: $base05;
-  }
-  .nn {
-    /* Name.Namespace */
-    color: $base0a;
-  }
-  .nx {
-    /* Name.Other */
-    color: $base0d;
-  }
-  .py {
-    /* Name.Property */
-    color: $base05;
-  }
-  .nt {
-    /* Name.Tag */
-    color: $base0c;
-  }
-  .nv {
-    /* Name.Variable */
-    color: $base08;
-  }
-  .ow {
-    /* Operator.Word */
-    color: $base0c;
-  }
-  .w {
-    /* Text.Whitespace */
-    color: $base05;
-  }
-  .mf {
-    /* Literal.Number.Float */
-    color: $base09;
-  }
-  .mh {
-    /* Literal.Number.Hex */
-    color: $base09;
-  }
-  .mi {
-    /* Literal.Number.Integer */
-    color: $base09;
-  }
-  .mo {
-    /* Literal.Number.Oct */
-    color: $base09;
-  }
-  .sb {
-    /* Literal.String.Backtick */
-    color: $base0b;
-  }
-  .sc {
-    /* Literal.String.Char */
-    color: $base05;
-  }
-  .sd {
-    /* Literal.String.Doc */
-    color: $base04;
-  }
-  .s2 {
-    /* Literal.String.Double */
-    color: $base0b;
-  }
-  .se {
-    /* Literal.String.Escape */
-    color: $base09;
-  }
-  .sh {
-    /* Literal.String.Heredoc */
-    color: $base0b;
-  }
-  .si {
-    /* Literal.String.Interpol */
-    color: $base09;
-  }
-  .sx {
-    /* Literal.String.Other */
-    color: $base0b;
-  }
-  .sr {
-    /* Literal.String.Regex */
-    color: $base0b;
-  }
-  .s1 {
-    /* Literal.String.Single */
-    color: $base0b;
-  }
-  .ss {
-    /* Literal.String.Symbol */
-    color: $base0b;
-  }
-  .bp {
-    /* Name.Builtin.Pseudo */
-    color: $base05;
-  }
-  .vc {
-    /* Name.Variable.Class */
-    color: $base08;
-  }
-  .vg {
-    /* Name.Variable.Global */
-    color: $base08;
-  }
-  .vi {
-    /* Name.Variable.Instance */
-    color: $base08;
-  }
-  .il {
-    /* Literal.Number.Integer.Long */
-    color: $base09;
-  }
-}
-
 .gist {
   td,
   th {
diff --git a/_sass/so-simple/_tables.scss b/_sass/so-simple/_tables.scss
index 5ae7b3d1c55..82908211e10 100644
--- a/_sass/so-simple/_tables.scss
+++ b/_sass/so-simple/_tables.scss
@@ -14,7 +14,7 @@ table {
 
 th,
 td {
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid;
 }
 
 th {
diff --git a/_sass/so-simple/_variables.scss b/_sass/so-simple/_variables.scss
index dc671933216..c67efa29c37 100644
--- a/_sass/so-simple/_variables.scss
+++ b/_sass/so-simple/_variables.scss
@@ -51,22 +51,6 @@ $meta-font-family: $serif-font-family !default;
 $page-title-weight: bold !default;
 $entry-title-weight: bold !default;
 
-/* Colors */
-$base-color: #000 !default;
-$text-color: #000 !default;
-$accent-color: #34374C !default;
-$nav-color: #fff !default;
-$background-color: #fff !default;
-$nav-background-color: #000 !default;
-$code-background-color: tint($base-color, 95%) !default;
-$border-color: tint($base-color, 80%) !default;
-
-$primary-color: #000 !default;
-$success-color: #62c462 !default;
-$warning-color: #f89406 !default;
-$danger-color: #ee5f5b !default;
-$info-color: #52adc8 !default;
-
 /* YIQ color contrast */
 $yiq-contrasted-dark-default: #000 !default;
 $yiq-contrasted-light-default: #fff !default;
@@ -97,24 +81,6 @@ $vine-color: #00bf8f !default;
 $youtube-color: #bb0000 !default;
 $xing-color: #006567 !default;
 
-/* Syntax highlighting (base16) colors */
-$base00: #fafafa !default;
-$base01: #073642 !default;
-$base02: #586e75 !default;
-$base03: #657b83 !default;
-$base04: #839496 !default;
-$base05: #586e75 !default;
-$base06: #eee8d5 !default;
-$base07: #fdf6e3 !default;
-$base08: #dc322f !default;
-$base09: #cb4b16 !default;
-$base0a: #b58900 !default;
-$base0b: #859900 !default;
-$base0c: #2aa198 !default;
-$base0d: #268bd2 !default;
-$base0e: #6c71c4 !default;
-$base0f: #d33682 !default;
-
 /* Max-width of the main content */
 $main-max-width: $medium !default;
 
diff --git a/_sass/so-simple/utilities/_accessibility.scss b/_sass/so-simple/utilities/_accessibility.scss
index 38f2b6e81d7..e49722d4cde 100644
--- a/_sass/so-simple/utilities/_accessibility.scss
+++ b/_sass/so-simple/utilities/_accessibility.scss
@@ -22,7 +22,6 @@
     padding: 0.75em 1em;
     clip: auto !important;
     border-radius: 0.125em;
-    background-color: $base-color;
     color: #fff;
     font-weight: bold;
     line-height: normal;
diff --git a/assets/css/skins/dark.scss b/assets/css/skins/dark.scss
new file mode 100644
index 00000000000..f4b766c7d17
--- /dev/null
+++ b/assets/css/skins/dark.scss
@@ -0,0 +1,43 @@
+---
+---
+
+@charset "utf-8";
+
+@import "so-simple/functions";
+@import "so-simple/variables";
+@import "so-simple/notices";
+
+/* Colors */
+$base-color: #eaeaea !default;
+$text-color: #eaeaea !default;
+$accent-color: #00adb5 !default;
+$nav-color: #aeaeae !default;
+$background-color: #252a34 !default;
+$nav-background-color: mix(#000, $background-color, 30%) !default;
+$code-background-color: mix(#000, $background-color, 15%) !default;
+$border-color: tint($base-color, 80%) !default;
+
+$primary-color: white !default;
+$success-color: rgb(48, 209, 88) !default;
+$warning-color: rgb(255, 214, 10) !default;
+$danger-color: rgb(255, 69, 58) !default;
+$info-color: rgb(100, 210, 255) !default;
+
+$base00: #263238;
+$base01: #2e3c43;
+$base02: #314549;
+$base03: #546e7a;
+$base04: #b2ccd6;
+$base05: #eeffff;
+$base06: #eeffff;
+$base07: #ffffff;
+$base08: #f07178;
+$base09: #f78c6c;
+$base0a: #ffcb6b;
+$base0b: #c3e88d;
+$base0c: #89ddff;
+$base0d: #82aaff;
+$base0e: #c792ea;
+$base0f: #ff5370;
+
+@import "so-simple/skin";
diff --git a/assets/css/skins/default.scss b/assets/css/skins/default.scss
new file mode 100644
index 00000000000..fc659f4ba42
--- /dev/null
+++ b/assets/css/skins/default.scss
@@ -0,0 +1,44 @@
+---
+---
+
+@charset "utf-8";
+
+@import "so-simple/functions";
+@import "so-simple/variables";
+@import "so-simple/notices";
+
+/* Colors */
+$base-color: #000 !default;
+$text-color: #000 !default;
+$accent-color: #34374C !default;
+$nav-color: #fff !default;
+$background-color: #fff !default;
+$nav-background-color: #000 !default;
+$code-background-color: tint($base-color, 95%) !default;
+$border-color: tint($base-color, 80%) !default;
+
+$primary-color: #000 !default;
+$success-color: #62c462 !default;
+$warning-color: #f89406 !default;
+$danger-color: #ee5f5b !default;
+$info-color: #52adc8 !default;
+
+/* Syntax highlighting (base16) colors */
+$base00: #fafafa !default;
+$base01: #073642 !default;
+$base02: #586e75 !default;
+$base03: #657b83 !default;
+$base04: #839496 !default;
+$base05: #586e75 !default;
+$base06: #eee8d5 !default;
+$base07: #fdf6e3 !default;
+$base08: #dc322f !default;
+$base09: #cb4b16 !default;
+$base0a: #b58900 !default;
+$base0b: #859900 !default;
+$base0c: #2aa198 !default;
+$base0d: #268bd2 !default;
+$base0e: #6c71c4 !default;
+$base0f: #d33682 !default;
+
+@import "so-simple/skin";
diff --git a/assets/css/skins/light.scss b/assets/css/skins/light.scss
new file mode 100644
index 00000000000..785f7b253df
--- /dev/null
+++ b/assets/css/skins/light.scss
@@ -0,0 +1,44 @@
+---
+---
+
+@charset "utf-8";
+
+@import "so-simple/functions";
+@import "so-simple/variables";
+@import "so-simple/notices";
+
+/* Colors */
+$base-color: #404040 !default;
+$text-color: #404040 !default;
+$accent-color: #0a71e2 !default;
+$nav-color: #fff !default;
+$background-color: #fff !default;
+$nav-background-color: #626262 !default;
+$code-background-color: tint($base-color, 95%) !default;
+$border-color: tint($base-color, 80%) !default;
+
+$primary-color: #fff !default;
+$success-color: #34c759 !default;
+$warning-color: #ffcc00 !default;
+$danger-color: #ff3b30 !default;
+$info-color: #5ac8fa !default;
+
+/* Syntax highlighting (base16) colors */
+$base00: #fafafa !default;
+$base01: #073642 !default;
+$base02: #586e75 !default;
+$base03: #657b83 !default;
+$base04: #839496 !default;
+$base05: #586e75 !default;
+$base06: #eee8d5 !default;
+$base07: #fdf6e3 !default;
+$base08: #dc322f !default;
+$base09: #cb4b16 !default;
+$base0a: #b58900 !default;
+$base0b: #859900 !default;
+$base0c: #2aa198 !default;
+$base0d: #268bd2 !default;
+$base0e: #6c71c4 !default;
+$base0f: #d33682 !default;
+
+@import "so-simple/skin";
diff --git a/jekyll-theme-so-simple.gemspec b/jekyll-theme-so-simple.gemspec
index a5718602e06..94aa352dda8 100644
--- a/jekyll-theme-so-simple.gemspec
+++ b/jekyll-theme-so-simple.gemspec
@@ -22,6 +22,6 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency "jekyll-feed", "~> 0.1"
   spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.4"
 
-  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "bundler", "~> 2.0.2"
   spec.add_development_dependency "rake", "~> 10.0"
 end