diff --git a/src/builds/dark-legacy.scss b/src/builds/dark-legacy.scss
new file mode 100755
index 0000000..c0170fe
--- /dev/null
+++ b/src/builds/dark-legacy.scss
@@ -0,0 +1,9 @@
+/**
+ * Dark-themed version for legacy browsers:
+ * Loads the compiled, standalone version of the dark theme,
+ * but overrides it with the compiled, standalone version of the light theme
+ * if a system-wide theme preference is set on the user's device.
+ */
+
+@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css');
+@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css') (prefers-color-scheme: light);
diff --git a/src/builds/dark.scss b/src/builds/dark.scss
new file mode 100644
index 0000000..e958c58
--- /dev/null
+++ b/src/builds/dark.scss
@@ -0,0 +1,16 @@
+/**
+ * Dark-themed version:
+ * uses dark theme by default but switches to light theme
+ * if a system-wide theme preference is set on the user's device.
+ *
+ * Variables will remain uncompiled so the theme can update dynamically
+ * at runtime in the browser.
+ */
+
+@import '../_variables/_variables-dark';
+
+@media (prefers-color-scheme: light) {
+  @import '../_variables/_variables-light';
+}
+
+@import '../parts/core';
diff --git a/src/builds/dark.standalone.scss b/src/builds/dark.standalone.scss
new file mode 100755
index 0000000..7f9932c
--- /dev/null
+++ b/src/builds/dark.standalone.scss
@@ -0,0 +1,8 @@
+/**
+ * Standalone dark-themed version.
+ * Includes dark variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../_variables/variables-dark';
+@import '../parts/core';
diff --git a/src/builds/light-legacy.scss b/src/builds/light-legacy.scss
new file mode 100755
index 0000000..064d82f
--- /dev/null
+++ b/src/builds/light-legacy.scss
@@ -0,0 +1,9 @@
+/**
+ * Light-themed version for legacy browsers:
+ * Loads the compiled, standalone version of the light theme at runtime,
+ * but overrides it with the compiled, standalone version of the dark theme
+ * if a system-wide theme preference is set on the user's device.
+ */
+
+@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css');
+@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css') (prefers-color-scheme: dark);
diff --git a/src/builds/light.scss b/src/builds/light.scss
new file mode 100644
index 0000000..89205db
--- /dev/null
+++ b/src/builds/light.scss
@@ -0,0 +1,16 @@
+/**
+ * Light-themed version:
+ * uses light theme by default but switches to dark theme
+ * if a system-wide theme preference is set on the user's device.
+ *
+ * Variables will remain uncompiled so the theme can update dynamically
+ * at runtime in the browser.
+ */
+
+@import '../_variables/variables-light';
+
+@media (prefers-color-scheme: dark) {
+  @import '../_variables/variables-dark';
+}
+
+@import '../parts/core';
\ No newline at end of file
diff --git a/src/builds/light.standalone.scss b/src/builds/light.standalone.scss
new file mode 100755
index 0000000..eab8a85
--- /dev/null
+++ b/src/builds/light.standalone.scss
@@ -0,0 +1,8 @@
+/**
+ * Standalone light-themed version.
+ * Includes light variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../_variables/variables-light';
+@import '../parts/core';