diff --git a/assets/css/themes/dark-cyan.css b/assets/css/themes/dark-cyan.css
new file mode 100644
index 00000000..5346e28c
--- /dev/null
+++ b/assets/css/themes/dark-cyan.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #0c1519;
+$primary-color: #28728f;
+$secondary-color: #4a8486;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 15));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 25));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 20));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/dark-orange.css b/assets/css/themes/dark-orange.css
new file mode 100644
index 00000000..f8b6f419
--- /dev/null
+++ b/assets/css/themes/dark-orange.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #1b1511;
+$primary-color: #8c4010;
+$secondary-color: #a1654d;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 15) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 5) calc(l - 14));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 19));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 15));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 10) calc(l - 28));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/dark-pink.css b/assets/css/themes/dark-pink.css
new file mode 100644
index 00000000..a5b11571
--- /dev/null
+++ b/assets/css/themes/dark-pink.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #1a0f14;
+$primary-color: #871647;
+$secondary-color: #7e4953;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 20) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 12));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 19));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l - 20));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/dark-red.css b/assets/css/themes/dark-red.css
new file mode 100644
index 00000000..3f23a545
--- /dev/null
+++ b/assets/css/themes/dark-red.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #1a1212;
+$primary-color: #842c2c;
+$secondary-color: #99685b;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 50));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 11));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 18));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/dark-silver.css b/assets/css/themes/dark-silver.css
new file mode 100644
index 00000000..9a8eb54f
--- /dev/null
+++ b/assets/css/themes/dark-silver.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #131618;
+$primary-color: #36454f;
+$secondary-color: #444444;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s - 15) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 14));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 5));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 10));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/dark-yellow.css b/assets/css/themes/dark-yellow.css
new file mode 100644
index 00000000..c18ca7e2
--- /dev/null
+++ b/assets/css/themes/dark-yellow.css
@@ -0,0 +1,27 @@
+@import "themes/base/dark";
+
+$background-color: #191810;
+$primary-color: #7a7200;
+$secondary-color: #7e6b36;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 16));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 10));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 15));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+}
diff --git a/assets/css/themes/light-cyan.css b/assets/css/themes/light-cyan.css
new file mode 100644
index 00000000..c394c04e
--- /dev/null
+++ b/assets/css/themes/light-cyan.css
@@ -0,0 +1,36 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #5bcefa;
+$secondary-color: #74c7c7;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 35));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 22));
+  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 29));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 22));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}
+
+.header__link {
+  color: var(--text-color) !important;
+}
+
+nav.header__secondary .header__link {
+  color: var(--text-color) !important;
+}
diff --git a/assets/css/themes/light-orange.css b/assets/css/themes/light-orange.css
new file mode 100644
index 00000000..8d5110e0
--- /dev/null
+++ b/assets/css/themes/light-orange.css
@@ -0,0 +1,28 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #f48906;
+$secondary-color: #e2a344;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 10) calc(l - 25));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 33));
+  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 44));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 14));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 20));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}
diff --git a/assets/css/themes/light-pink.css b/assets/css/themes/light-pink.css
new file mode 100644
index 00000000..9f12233a
--- /dev/null
+++ b/assets/css/themes/light-pink.css
@@ -0,0 +1,36 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #f5a9b8;
+$secondary-color: #cd6994;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 20) calc(l - 35));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 10) calc(l + 9));
+  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 14));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 25));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}
+
+.header__link {
+  color: var(--text-color) !important;
+}
+
+nav.header__secondary .header__link {
+  color: var(--text-color) !important;
+}
diff --git a/assets/css/themes/light-red.css b/assets/css/themes/light-red.css
new file mode 100644
index 00000000..8247a30a
--- /dev/null
+++ b/assets/css/themes/light-red.css
@@ -0,0 +1,32 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #e35a5a;
+$secondary-color: #ea7363;
+$danger-color: #df5858;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 10) calc(l - 25));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 22));
+  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 32));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 14));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 20));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+
+  /* Type (information category) colors */
+  @mixin type-color danger, $danger-color;
+}
diff --git a/assets/css/themes/light-silver.css b/assets/css/themes/light-silver.css
new file mode 100644
index 00000000..ebd3c870
--- /dev/null
+++ b/assets/css/themes/light-silver.css
@@ -0,0 +1,36 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #c0c0c0; /* i'm a chicken :D */
+$secondary-color: #c7c7c7;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h s calc(l - 50));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h s calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h s calc(l + 10));
+  --primary-dark-color: hsl(from $primary-color h s calc(l + 17));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l + 2));
+  --secondary-dark-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}
+
+.header__link {
+  color: var(--text-color) !important;
+}
+
+nav.header__secondary .header__link {
+  color: var(--text-color) !important;
+}
diff --git a/assets/css/themes/light-yellow.css b/assets/css/themes/light-yellow.css
new file mode 100644
index 00000000..5867833d
--- /dev/null
+++ b/assets/css/themes/light-yellow.css
@@ -0,0 +1,36 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #efe00a;
+$secondary-color: #cac467;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s + 45) calc(l - 32));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 27));
+  --primary-dark-color: hsl(from $primary-color h calc(s + 10) calc(l + 46));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 22));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}
+
+.header__link {
+  color: var(--text-color) !important;
+}
+
+nav.header__secondary .header__link {
+  color: var(--text-color) !important;
+}