diff --git a/assets/css/layout.css b/assets/css/layout.css
index 4b37e17..db02ad8 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -1,4 +1,3 @@
-@import url("/assets/css/fonts/merriweather.css");
 
 html {
   font-size: 16px;
@@ -6,22 +5,6 @@ html {
 
 body {
   font-size: 1.125rem;
-  font-family: "Merriweather", serif;
-}
-
-img {
-  max-width: 100%;
-}
-
-img.avatar {
-  height: 3rem;
-  width: 3rem;
-  border-radius: 50%;
-}
-
-.profile-page img.avatar {
-  height: 8rem;
-  width: 8rem;
 }
 
 h1 {
@@ -59,6 +42,16 @@ pre code {
   padding: 0.6rem 1rem;
 }
 
+img {
+  max-width: 100%;
+}
+
+img.avatar {
+  height: 3rem;
+  width: 3rem;
+  border-radius: 50%;
+}
+
 dl dt {
   font-weight: bold;
   margin: 0 0 0.5rem 0;
@@ -68,6 +61,10 @@ dl dd {
   margin: 0 0 1.6rem 0;
 }
 
+hr {
+  border: 1px solid;
+}
+
 main {
   display: block;
   max-width: 44rem;
@@ -112,6 +109,15 @@ main.profile-page {
   margin-top: 6rem;
 }
 
+main.profile-page header {
+  margin-bottom: 2rem;
+}
+
+main.profile-page img.avatar {
+  height: 8rem;
+  width: 8rem;
+}
+
 main .article-list .item h3 {
   margin-bottom: 0.5rem;
 }
@@ -128,10 +134,6 @@ main article footer {
   margin-top: 5rem;
 }
 
-.profile-page header {
-  margin-bottom: 2rem;
-}
-
 /* Dropdown menu */
 
 .dropdown {
@@ -140,7 +142,6 @@ main article footer {
 }
 
 .dropdown-button {
-  font-family: "Merriweather", serif;
   font-size: 0.875rem;
   padding: 0.6rem 1rem;
   border: 1px solid;
diff --git a/assets/css/themes/default-light.css b/assets/css/themes/default-light.css
index 3e10d41..5b3d42e 100644
--- a/assets/css/themes/default-light.css
+++ b/assets/css/themes/default-light.css
@@ -1,10 +1,23 @@
+@import url("/assets/css/fonts/merriweather.css");
+
+:root {
+  --font-family: "Merriweather", serif;
+  --background-color-body: #f5f2eb;
+  --background-color-dark: #333;
+  --text-color-body: #3b3a38;
+  --text-color-headings: #191818;
+  --text-color-discreet: #888;
+  --text-color-dark-bg: #ccc;
+}
+
 body {
-  background-color: #f5f2eb;
-  color: #3b3a38;
+  font-family: var(--font-family);
+  background-color: var(--background-color-body);
+  color: var(--text-color-body);
 }
 
 h1, h2, h3, h4 {
-  color: #191818;
+  color: var(--text-color-headings);
 }
 
 a {
@@ -15,23 +28,29 @@ a:visited {
   color: #3b0277;
 }
 
+button {
+  font-family: var(--font-family);
+}
+
+
 code {
   background-color: #e8e3da;
   color: #027739;
 }
 
 pre {
-  background-color: #333;
-  color: #ccc;
+  background-color: var(--background-color-dark);
+  color: var(--text-color-dark-bg);
 }
 
 pre code {
-  background-color: #333;
-  color: #ccc;
+  background-color: var(--background-color-dark);
+  color: var(--text-color-dark-bg);
 }
 
 dl dt {
-  color: #888;
+  color: var(--text-color-discreet)
+}
 
 hr {
   border-color: #e8e3da;
@@ -43,43 +62,48 @@ main header .draft-label {
 }
 
 main header .meta .date {
-  color: #888;
+  color: var(--text-color-discreet)
 }
 
 main header .meta .name a {
-  color: #3b3a38;
+  color: var(--text-color-body);
 }
 
-.profile-page .pubkey {
-  color: #888;
+main.profile-page .pubkey {
+  color: var(--text-color-discreet)
 }
 
 /* Dropdown menu */
 
+.dropdown {
+  --background-color: #fff;
+  --background-color-highlight: #f1f1f1;
+}
+
 .dropdown-button {
-  background-color: #f5f2eb;
-  color: #3b3a38;
-  border-color: #ccc;
+  background-color: var(--background-color-body);
+  color: var(--text-color-body);
+  border-color: var(--text-color-dark-bg);
 }
 
 .dropdown-content {
-  background-color: #fff;
+  background-color: var(--background-color);
 }
 
 .dropdown-content a {
-  color: #3b3a38 !important;
+  color: var(--text-color-body) !important;
 }
 
 .dropdown-content a:hover {
-  background-color: #f1f1f1;
+  background-color: var(--background-color-highlight);
 }
 
 .dropdown-content h4.title {
-  color: #888;
-  border-color: #f1f1f1;
+  color: var(--text-color-discreet);
+  border-color: var(--background-color-highlight);
 }
 
 .dropdown:hover .dropdown-button {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: var(--background-color);
+  border-color: var(--background-color);
 }