diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9f295e8..1b7946e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -8,7 +8,7 @@
 <body>
     <a class="skip-main" href="#main">{{ i18n "skipToContent" | humanize }}</a>
     <div class="container">
-        <header> 
+        <header class="common-header"> 
             {{ block "header" . }}
                 {{ partial "header.html" . }}
             {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index c40d9da..89fec15 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -7,7 +7,7 @@
     {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
     {{ range $pages }}
         <div class="post-short-list">
-            <header> 
+            <header class="post-header"> 
                 <h2 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h2>
             </header>
             {{ partial "postInfo.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6f61195..8d1e3b7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,7 +8,7 @@
     {{ end }}
     
     <article class="post">
-        <header>
+        <header class="post-header">
             <h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}">{{ trim .Title  " " }}</h1>
         </header>
         <div class="content">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a799397..22758ef 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,17 @@
 
 <link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
 
+{{- $style := "light" -}}
+{{- if and (isset site.Params "style") (ne site.Params.style "") -}}
+{{- $style = site.Params.style | lower -}}
+{{- end -}}
+
+{{- if eq $style "dark" -}} 
+<link rel="stylesheet" href="{{ "css/dark.css" | absURL }}?rnd={{ now.Unix }}" />
+{{- else -}}
+    <link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
+{{- end -}}
+
 {{ range .Site.Params.customCSS -}}
 <link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
 {{- end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5b84493..2b29c7e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<h1 class="site-header">
+<h1 class="site-title">
     <a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a>
 </h1>
 <nav>
diff --git a/layouts/partials/postSummary.html b/layouts/partials/postSummary.html
index ae6657b..11bb9e0 100644
--- a/layouts/partials/postSummary.html
+++ b/layouts/partials/postSummary.html
@@ -1,5 +1,5 @@
 <article class="post-list">
-    <header>
+    <header class="post-header">
         <h1 class="post-title{{ if .Params.favorite }} favorite{{end}}{{ if .Params.draft }} draft{{end}}"><a href="{{ .RelPermalink }}">{{ trim .Title " " }}</a></h1>
     </header>
 
diff --git a/static/css/dark.css b/static/css/dark.css
new file mode 100644
index 0000000..a3768e3
--- /dev/null
+++ b/static/css/dark.css
@@ -0,0 +1,129 @@
+body {
+    background: #212121;
+    color: #eee;
+}
+
+/* Links */
+
+a {
+    color: #599ada;
+}
+
+a:hover,
+a:focus,
+a:active {
+    color: #ff5858;
+    border-bottom: 1px solid rgba(238, 54, 54, 0.5);
+}
+
+/* Table */
+thead {
+    background: #343a40;
+}
+
+th, td {
+    border: 1px double lightgrey;
+}
+
+/* Code */
+pre {
+    background-color: #f1f1f1;
+    color: #333;
+}
+
+/* Styles */
+
+blockquote {
+    border-left: 2px solid #ccc;
+}
+
+hr {
+    border-top: 1px solid #ccc;
+}
+
+/* Header */
+
+header a {
+    color: #eee;
+}
+
+.common-header {
+    border-bottom: thin solid #333;
+}
+
+/* Articles */
+
+.post-navigation {
+    background: #373737;
+}
+
+.post-navigation a {
+    color: #b6b6b6;
+}
+
+.post-navigation a:hover, 
+.post-navigation a:focus,
+.post-navigation a:active {
+    color: #ff5858;
+}
+
+article:not(:last-of-type) {
+    border-bottom: thin solid #333;
+}
+
+article header h1 a {
+    color: #eee;
+}
+
+.post-info {
+    color: grey;
+}
+
+.post-info a {
+    color: grey;
+}
+
+.post-info a:hover {
+    color: #ff5858;
+}
+
+article figcaption {
+    color: lightgrey;
+}
+
+.divider {
+    border-top: thin solid #ccc;
+}
+
+/* Pagination */
+
+.pagination-item {
+    background: #373737;
+}
+
+.pagination-item a {
+    color: #eee;
+}
+
+.pagination-item a:hover, .pagination-item a:focus {
+    color: #ff5858;
+}
+
+/* Footer */
+
+footer {
+    border-top: thin solid #333;
+}
+
+/* Media Queries */
+
+@media (max-width: 840px) {
+    header nav {
+        background: #373737;
+    }
+
+    .post-navigation {
+        background: #373737;
+    }
+
+}
\ No newline at end of file
diff --git a/static/css/light.css b/static/css/light.css
new file mode 100644
index 0000000..4578278
--- /dev/null
+++ b/static/css/light.css
@@ -0,0 +1,128 @@
+body {
+    background: #fff;
+    color: #333;
+}
+
+/* Links */
+
+a {
+    color: #1d60a3;
+}
+
+a:hover,
+a:focus,
+a:active {
+    color: #a31d1d;
+    border-bottom: 1px solid rgba(163, 29, 29, .5);
+}
+
+/* Table */
+thead {
+    background: lightgrey;
+}
+
+th, td {
+    border: 1px double lightgrey;
+}
+
+/* Code */
+pre {
+    background-color: #f1f1f1;
+}
+
+/* Styles */
+
+blockquote {
+    border-left: 2px solid #ccc;
+}
+
+hr {
+    border-top: 1px solid #ccc;
+}
+
+/* Header */
+
+header a {
+    color: #333;
+}
+
+.common-header {
+    border-bottom: thin solid #f1f1f1;
+}
+
+/* Articles */
+
+.post-navigation {
+    background: #fafafa;
+}
+
+.post-navigation a {
+    color: #696969;
+}
+
+.post-navigation a:hover, 
+.post-navigation a:focus,
+.post-navigation a:active {
+    color: #a31d1d;
+}
+
+article:not(:last-of-type) {
+    border-bottom: thin solid #f1f1f1;
+}
+
+article header h1 a {
+    color: #333;
+}
+
+.post-info {
+    color: grey;
+}
+
+.post-info a {
+    color: grey;
+}
+
+.post-info a:hover {
+    color: #a31d1d;
+}
+
+article figcaption {
+    color: grey;
+}
+
+
+.divider {
+    border-top: thin solid #f1f1f1;
+}
+
+/* Pagination */
+
+.pagination-item {
+    background: #fafafa;
+}
+
+.pagination-item a {
+    color: #333;
+}
+
+.pagination-item a:hover, .pagination-item a:focus {
+    color: #a31d1d;
+}
+
+/* Footer */
+
+footer {
+    border-top: thin solid #f1f1f1;
+}
+
+/* Media Queries */
+
+@media (max-width: 840px) {
+    header nav {
+        background: #fafafa;
+    }
+
+    .post-navigation {
+        background: #fafafa;
+    }
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index c8e38b9..caca00f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -11,8 +11,6 @@ html {
 
 body {
     margin: 0;
-    background: #ffffff;
-    color: #333;
     font-size: 18px;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
@@ -59,7 +57,6 @@ h3 {
 /* Links */
 
 a {
-    color: #1d60a3;
     text-decoration: none;
 }
 
@@ -68,13 +65,6 @@ a:hover {
     outline: 0;
 }
 
-a:hover,
-a:focus, 
-a:active {
-    color: #a31d1d;
-    border-bottom: 1px solid rgba(163, 29, 29, .5);
-}
-
 a:active {
     opacity: 0.9;
 }
@@ -112,19 +102,14 @@ table {
     border-spacing: 0;
 }
 
-thead {
-    background: lightgrey;
-}
 
 th, td {
     padding: 0.5em 1em;
-    border: 1px double lightgrey;
 }
 
 /* Code */
 pre {
     padding: 1em;
-    background-color: #f1f1f1;
     max-width: 100%;
     overflow: auto;
 }
@@ -140,7 +125,6 @@ kbd {
 /* Styles */
 
 blockquote {
-    border-left: 2px solid #cccccc;
     padding: 0.1em 1em;
     margin-left: 0.75em;
 }
@@ -153,7 +137,6 @@ p {
 hr {
     height: 1px;
     border: 0;
-    border-top: 1px solid #cccccc;
 }
 
 ul ol, ol ol, ul ul {
@@ -184,19 +167,18 @@ header nav {
     margin-top: 1em;
     max-width: 100%;
     text-align: right;
-    margin-bottom: 1em;
 }
 
 header nav a {
     margin-left: 2em;
 }
 
-header a {
-    color: #333;
+.site-title {
+    white-space: nowrap;
 }
 
-.site-header {
-    white-space: nowrap;
+.common-header {
+    padding-bottom: 2em;
 }
 
 /* Pages */
@@ -218,7 +200,6 @@ main h1 {
     text-align: center;
     margin-top: 1em;
     max-width: 100%;
-    background: #fafafa;
     padding: 0.5em 0;
 }
 
@@ -227,18 +208,11 @@ main h1 {
 }
 
 .post-navigation a {
-    color: #696969;
     margin-left: 2em;
 }
 
-.post-navigation a:hover, 
-.post-navigation a:focus,
-.post-navigation a:active {
-    color: #a31d1d;
-}
-
 .post-title.favorite::after {
-    content: "★";
+    content: "☆";
     display: inline-block;
     margin-left: 0.2em;
 }
@@ -250,13 +224,12 @@ main h1 {
 }
 
 .post-title.favorite.draft::after {
-    content: "★ ✎";
+    content: "☆ ✎";
     display: inline-block;
     margin-left: 0.2em;
 }
 
 article:not(:last-of-type) {
-    border-bottom: thin solid #f1f1f1;
     padding-bottom: 2em;
 }
 
@@ -270,23 +243,13 @@ article header h1 {
 article header h1 a {
     border: none;
     text-decoration: none;
-    color: #333;
 }
 
 .post-info {
     font-size: 0.75em;
-    color: grey;
     margin-top: 1em;
 }
 
-.post-info a {
-    color: grey;
-}
-
-.post-info a:hover {
-    color: #a31d1d;
-}
-
 .post-short-list .post-info {
     margin-top: 0;
     margin-bottom: 1.5em;
@@ -333,7 +296,6 @@ article img {
 article figcaption {
     text-align: center;
     font-size: 0.85em;
-    color: grey;
     margin-bottom: 2em;
 }
 
@@ -345,7 +307,6 @@ article figcaption {
     display: block;
     height: 1px;
     border: 0;
-    border-top: thin solid #f1f1f1;
     width: 25%;
     margin: 1em auto;
 }
@@ -379,7 +340,6 @@ article figcaption {
 }
 
 .pagination-item {
-    background: #fafafa;
     padding: 0.75em 0.75em;
 }
 
@@ -387,12 +347,7 @@ article figcaption {
     visibility: hidden;
 }
 
-.pagination-item a {
-    color: #333333;
-}
-
 .pagination-item a:hover, .pagination-item a:focus {
-    color: #a31d1d;
     border-bottom: 0;
 }
 
@@ -406,7 +361,6 @@ article figcaption {
 /* Footer */
 
 footer {
-    border-top: thin solid #f1f1f1;
     margin-top: 3em;
     font-size: 16px;
 }
@@ -454,7 +408,6 @@ ul.language-select > li {
         margin-top: 1em;
         max-width: 100%;
         text-align: center;
-        background: #fafafa;
         padding: 0.5em 0;
     }
 
@@ -468,7 +421,6 @@ ul.language-select > li {
 
     .post-navigation {
         text-align: center;
-        background: #fafafa;
         padding: 0.5em 0;
     }
 
