diff --git a/public/css/lanyon.css b/public/css/lanyon.css
index b0b42b81b17..e3eff42f5b6 100644
--- a/public/css/lanyon.css
+++ b/public/css/lanyon.css
@@ -17,6 +17,8 @@
 /*
  * Contents
  *
+ * CSS variables
+ *
  * Global resets
  * Masthead
  * Sidebar
@@ -27,6 +29,45 @@
  * Themes
  */
 
+ /*
+ * CSS variables
+ *
+ * Contains reused variables for this file.
+ * Variables shared with Poole are included as fallbacks and prefixed with "lanyon".
+ */
+
+:root {
+	--lanyon-masthead-color: #505050;
+	--lanyon-subtitle-color: #c0c0c0;
+
+	--lanyon-post-date-color: #9a9a9a;
+	--lanyon-related-date-color: #999;
+	--lanyon-related-link-hover-color: inherit;
+	--lanyon-pagination-color: #ccc;
+	--lanyon-pagination-hover-background-color: #f5f5f5;
+
+	--lanyon-link-color: #268bd2;
+	--lanyon-header-color: #313131;
+
+	--lanyon-bold-color: #303030;
+
+	--lanyon-layout-border-color: #eee;
+
+	--sidebar-color: rgba(255,255,255,.6);
+	--sidebar-background-color: #202020;
+	--sidebar-overlay-box-shadow-color: rgba(0,0,0,.1);
+
+	--sidebar-nav-link-color: #fff;
+	--sidebar-nav-active-color: rgba(255,255,255,.1);
+	--sidebar-nav-active-border-color: transparent;
+
+	--sidebar-toggle-inactive-color: #505050;
+	--sidebar-toggle-inactive-background-color: #fff;
+
+	--sidebar-toggle-active-color: #fff;
+	--sidebar-toggle-active-background-color: #555;
+}
+
 
 /*
  * Global resets
@@ -47,7 +88,7 @@ html {
 h1, h2, h3, h4, h5, h6 {
   font-family: "PT Sans", Helvetica, Arial, sans-serif;
   font-weight: 400;
-  color: #313131;
+  color: var(--header-color, var(--lanyon-header-color));
   letter-spacing: -.025rem;
 }
 
@@ -97,20 +138,20 @@ h1, h2, h3, h4, h5, h6 {
   padding-top:    1rem;
   padding-bottom: 1rem;
   margin-bottom: 3rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--layout-border-color, var(--lanyon-layout-border-color));
 }
 .masthead-title {
   margin-top: 0;
   margin-bottom: 0;
-  color: #505050;
+  color: var(--masthead-color, var(--lanyon-masthead-color));
 }
 .masthead-title a {
-  color: #505050;
+  color: var(--masthead-color, var(--lanyon-masthead-color));
 }
 .masthead-title small {
   font-size: 75%;
   font-weight: 400;
-  color: #c0c0c0;
+  color: var(--subtitle-color, var(--lanyon-subtitle-color));
   letter-spacing: 0;
 }
 
@@ -150,8 +191,8 @@ h1, h2, h3, h4, h5, h6 {
   overflow-y: auto;
   font-family: "PT Sans", Helvetica, Arial, sans-serif;
   font-size: .875rem; /* 15px */
-  color: rgba(255,255,255,.6);
-  background-color: #202020;
+  color: var(--sidebar-color);
+  background-color: var(--sidebar-background-color);
   -webkit-transition: all .3s ease-in-out;
           transition: all .3s ease-in-out;
 }
@@ -164,7 +205,7 @@ h1, h2, h3, h4, h5, h6 {
 /* Sidebar content */
 .sidebar a {
   font-weight: normal;
-  color: #fff;
+  color: var(--sidebar-nav-link-color);
 }
 .sidebar-item {
   padding: 1rem;
@@ -175,19 +216,19 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Sidebar nav */
 .sidebar-nav {
-  border-bottom: 1px solid rgba(255,255,255,.1);
+  border-bottom: 1px solid var(--sidebar-nav-active-color);
 }
 .sidebar-nav-item {
   display: block;
   padding: .5rem 1rem;
-  border-top: 1px solid rgba(255,255,255,.1);
+  border-top: 1px solid var(--sidebar-nav-active-color);
 }
 .sidebar-nav-item.active,
 a.sidebar-nav-item:hover,
 a.sidebar-nav-item:focus {
   text-decoration: none;
-  background-color: rgba(255,255,255,.1);
-  border-color: transparent;
+  background-color: var(--sidebar-nav-active-color);
+  border-color: var(--sidebar-nav-active-border-color);
 }
 
 @media (min-width: 48em) {
@@ -217,8 +258,8 @@ a.sidebar-nav-item:focus {
   display: flex;
   align-items: center;
   padding: .25rem .75rem;
-  color: #505050;
-  background-color: #fff;
+  color: var(--sidebar-toggle-inactive-color);
+  background-color: var(--sidebar-toggle-inactive-background-color);
   border-radius: .25rem;
   cursor: pointer;
 }
@@ -234,8 +275,8 @@ a.sidebar-nav-item:focus {
 .sidebar-toggle:active,
 #sidebar-checkbox:focus ~ .sidebar-toggle,
 #sidebar-checkbox:checked ~ .sidebar-toggle {
-  color: #fff;
-  background-color: #555;
+  color: var(--sidebar-toggle-active-color);
+  background-color: var(--sidebar-toggle-active-background-color);
 }
 
 .sidebar-toggle:active:before,
@@ -311,7 +352,7 @@ a.sidebar-nav-item:focus {
 .page-title,
 .post-title,
 .post-title a {
-  color: #303030;
+  color: var(--bold-color, var(--lanyon-bold-color));
 }
 .page-title,
 .post-title {
@@ -323,14 +364,14 @@ a.sidebar-nav-item:focus {
   display: block;
   margin-top: -.5rem;
   margin-bottom: 1rem;
-  color: #9a9a9a;
+  color: var(--post-date-color, var(--lanyon-post-date-color));
 }
 
 /* Related posts */
 .related {
   padding-top: 2rem;
   padding-bottom: 2rem;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--layout-border-color, var(--lanyon-layout-border-color));
 }
 .related-posts {
   padding-left: 0;
@@ -341,14 +382,14 @@ a.sidebar-nav-item:focus {
 }
 .related-posts li small {
   font-size: 75%;
-  color: #999;
+  color: var(--related-date-color, --lanyon-related-date-color));
 }
 .related-posts li a:hover {
-  color: #268bd2;
+  color: var(--link-color, --lanyon-link-color));
   text-decoration: none;
 }
 .related-posts li a:hover small {
-  color: inherit;
+  color: var(--related-link-hover-color, var(--lanyon-related-link-hover-color));
 }
 
 
@@ -364,7 +405,7 @@ a.sidebar-nav-item:focus {
   margin-left: -1rem;
   margin-right: -1rem;
   font-family: "PT Sans", Helvetica, Arial, sans-serif;
-  color: #ccc;
+  color: var(--pagination-color, var(--lanyon-pagination-color));
   text-align: center;
 }
 
@@ -372,7 +413,7 @@ a.sidebar-nav-item:focus {
 .pagination-item {
   display: block;
   padding: 1rem;
-  border: 1px solid #eee;
+  border: 1px solid var(--layout-border-color, var(--lanyon-layout-border-color));
 }
 .pagination-item:first-child {
   margin-bottom: -1px;
@@ -380,7 +421,7 @@ a.sidebar-nav-item:focus {
 
 /* Only provide a hover state for linked pagination items */
 a.pagination-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--pagination-hover-background-color, var(--lanyon-pagination-hover-background-color));
 }
 
 @media (min-width: 30em) {
@@ -546,13 +587,13 @@ a.pagination-item:hover {
           transform: translateX(0);
 }
 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
-  box-shadow: 0 0 0 .25rem #fff;
+  box-shadow: 0 0 0 .25rem var(--sidebar-toggle-active-color);
 }
 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
-  box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
+  box-shadow: .25rem 0 .5rem var(--sidebar-overlay-box-shadow-color);
 }
 
 /* Only one tweak for a reverse layout */
 .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
-  box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
+  box-shadow: -.25rem 0 .5rem var(--sidebar-overlay-box-shadow-color);
 }
diff --git a/public/css/poole.css b/public/css/poole.css
index 8ec27e7a844..9c7d05a9dca 100644
--- a/public/css/poole.css
+++ b/public/css/poole.css
@@ -17,6 +17,8 @@
 /*
  * Contents
  *
+ * CSS variables
+ *
  * Body resets
  * Custom type
  * Messages
@@ -28,6 +30,40 @@
  * Themes
  */
 
+/*
+ * CSS variables
+ *
+ * Contains reused variables for this file.
+ */
+
+:root {
+	--masthead-color: #505050;
+	--subtitle-color: #c0c0c0;
+
+	--post-date-color: #9a9a9a;
+	--related-date-color: #999;
+	--related-link-hover-color: inherit;
+	--pagination-color: #ccc;
+	--pagination-hover-background-color: #f5f5f5;
+
+	--text-color: #515151;
+	--background-color: #fff;
+	--link-color: #268bd2;
+	--header-color: #313131;
+
+	--bold-color: #303030;
+	--abbreviation-color: #555;
+	--code-color: #bf616a;
+	--quote-color: #7a7a7a;
+	--message-color: #717171;
+
+	--content-block-background-color: #f9f9f9;
+	--gist-background-color: transparent;
+
+	--layout-border-color: #eee;
+	--content-border-color: #e5e5e5;
+}
+
 
 /*
  * Body resets
@@ -59,15 +95,15 @@ html {
 }
 
 body {
-  color: #515151;
-  background-color: #fff;
+  color: var(--text-color);
+  background-color: var(--background-color);
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
 }
 
 /* No `:visited` state is required by default (browsers will use `a`) */
 a {
-  color: #268bd2;
+  color: var(--link-color);
   text-decoration: none;
 }
 a strong {
@@ -84,7 +120,7 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: .5rem;
   font-weight: bold;
   line-height: 1.25;
-  color: #313131;
+  color: var(--header-color);
   text-rendering: optimizeLegibility;
 }
 h1 {
@@ -110,7 +146,7 @@ p {
 }
 
 strong {
-  color: #303030;
+  color: var(--bold-color);
 }
 
 
@@ -132,19 +168,19 @@ hr {
   position: relative;
   margin: 1.5rem 0;
   border: 0;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #fff;
+  border-top: 1px solid var(--layout-border-color);
+  border-bottom: 1px solid var(--background-color);
 }
 
 abbr {
   font-size: 85%;
   font-weight: bold;
-  color: #555;
+  color: var(--abbreviation-color);
   text-transform: uppercase;
 }
 abbr[title] {
   cursor: help;
-  border-bottom: 1px dotted #e5e5e5;
+  border-bottom: 1px dotted var(--content-border-color);
 }
 
 /* Code */
@@ -155,8 +191,8 @@ pre {
 code {
   padding: .25em .5em;
   font-size: 85%;
-  color: #bf616a;
-  background-color: #f9f9f9;
+  color: var(--code-color);
+  background-color: var(--content-block-background-color);
   border-radius: 3px;
 }
 pre {
@@ -170,13 +206,13 @@ pre {
   white-space: pre-wrap;
   word-break: break-all;
   word-wrap: break-word;
-  background-color: #f9f9f9;
+  background-color: var(--content-block-background-color);
 }
 pre code {
   padding: 0;
   font-size: 100%;
   color: inherit;
-  background-color: transparent;
+  background-color: var(--gist-background-color);
 }
 
 /* Pygments via Jekyll */
@@ -197,7 +233,7 @@ pre code {
 }
 .gist pre {
   padding: 0;
-  background-color: transparent;
+  background-color: var(--gist-background-color);
 }
 .gist .gist-file .gist-data {
   font-size: .8rem !important;
@@ -206,7 +242,7 @@ pre code {
 .gist code {
   padding: 0;
   color: inherit;
-  background-color: transparent;
+  background-color: var(--gist-background-color);
   border-radius: 0;
 }
 
@@ -214,8 +250,8 @@ pre code {
 blockquote {
   padding: .5rem 1rem;
   margin: .8rem 0;
-  color: #7a7a7a;
-  border-left: .25rem solid #e5e5e5;
+  color: var(--quote-color);
+  border-left: .25rem solid var(--content-border-color);
 }
 blockquote p:last-child {
   margin-bottom: 0;
@@ -238,17 +274,17 @@ img {
 table {
   margin-bottom: 1rem;
   width: 100%;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--content-border-color);
   border-collapse: collapse;
 }
 td,
 th {
   padding: .25rem .5rem;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--content-border-color);
 }
 tbody tr:nth-child(odd) td,
 tbody tr:nth-child(odd) th {
-  background-color: #f9f9f9;
+  background-color: var(--content-block-background-color);
 }
 
 
@@ -274,8 +310,8 @@ tbody tr:nth-child(odd) th {
 .message {
   margin-bottom: 1rem;
   padding: 1rem;
-  color: #717171;
-  background-color: #f9f9f9;
+  color: var(--message-color);
+  background-color: var(--content-block-background-color);
 }
 
 
@@ -308,15 +344,15 @@ tbody tr:nth-child(odd) th {
 .masthead-title {
   margin-top: 0;
   margin-bottom: 0;
-  color: #505050;
+  color: var(--masthead-color);
 }
 .masthead-title a {
-  color: #505050;
+  color: var(--masthead-color);
 }
 .masthead-title small {
   font-size: 75%;
   font-weight: 400;
-  color: #c0c0c0;
+  color: var(--subtitle-color);
   letter-spacing: 0;
 }
 
@@ -337,7 +373,7 @@ tbody tr:nth-child(odd) th {
 .page-title,
 .post-title,
 .post-title a {
-  color: #303030;
+  color: var(--bold-color);
 }
 .page-title,
 .post-title {
@@ -349,14 +385,14 @@ tbody tr:nth-child(odd) th {
   display: block;
   margin-top: -.5rem;
   margin-bottom: 1rem;
-  color: #9a9a9a;
+  color: var(--post-date-color);
 }
 
 /* Related posts */
 .related {
   padding-top: 2rem;
   padding-bottom: 2rem;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--layout-border-color);
 }
 .related-posts {
   padding-left: 0;
@@ -367,14 +403,14 @@ tbody tr:nth-child(odd) th {
 }
 .related-posts li small {
   font-size: 75%;
-  color: #999;
+  color: var(--related-date-color);
 }
 .related-posts li a:hover {
-  color: #268bd2;
+  color: var(--link-color);
   text-decoration: none;
 }
 .related-posts li a:hover small {
-  color: inherit;
+  color: var(--related-link-hover-color);
 }
 
 
@@ -390,7 +426,7 @@ tbody tr:nth-child(odd) th {
   margin-left: -1rem;
   margin-right: -1rem;
   font-family: "PT Sans", Helvetica, Arial, sans-serif;
-  color: #ccc;
+  color: var(--pagination-color);
   text-align: center;
 }
 
@@ -398,7 +434,7 @@ tbody tr:nth-child(odd) th {
 .pagination-item {
   display: block;
   padding: 1rem;
-  border: 1px solid #eee;
+  border: 1px solid var(--layout-border-color);
 }
 .pagination-item:first-child {
   margin-bottom: -1px;
@@ -406,7 +442,7 @@ tbody tr:nth-child(odd) th {
 
 /* Only provide a hover state for linked pagination items */
 a.pagination-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--pagination-hover-background-color);
 }
 
 @media (min-width: 30em) {