diff --git a/themes/light/01-variables/colors.css b/themes/light/01-variables/colors.css
new file mode 100644
index 0000000000000000000000000000000000000000..f1ccb1ab9141237f246f8a73b4895d096d2808b0
--- /dev/null
+++ b/themes/light/01-variables/colors.css
@@ -0,0 +1,18 @@
+:root {
+    /* base */
+    --background-color: #fff;
+    --sidebar-color: #ccf;
+    --sidebar-hover-color: #99f;
+    --text-color: #000;
+    --divider-color: #888;
+
+    /* button */
+    --button-color: #b38cd9;
+    --button-border-color: #9966cc;
+    --button-selected-color: #663399;
+    --button-hover-color: #ccb3e6;
+    --button-disabled-color: #80609f;
+
+    --link-color: #1c377d;
+    --link-hover-color: #2a53bb;
+}
diff --git a/themes/light/02-sugarcube/01-init-screen.css b/themes/light/02-sugarcube/01-init-screen.css
new file mode 100644
index 0000000000000000000000000000000000000000..13d22e295f595e0effc535ef7c0ea843cd0d873b
--- /dev/null
+++ b/themes/light/02-sugarcube/01-init-screen.css
@@ -0,0 +1,4 @@
+#init-screen {
+	color: var(--text-color);
+	background-color: var(--background-color);
+}
diff --git a/themes/light/02-sugarcube/03-core.css b/themes/light/02-sugarcube/03-core.css
new file mode 100644
index 0000000000000000000000000000000000000000..1dff3183705f2b8e229125642d7508dcd26c8698
--- /dev/null
+++ b/themes/light/02-sugarcube/03-core.css
@@ -0,0 +1,44 @@
+body {
+	color: var(--text-color);
+	background-color: var(--background-color);
+}
+
+a {
+	color: var(--link-color);
+}
+
+a:hover {
+	color: var(--link-hover-color);
+}
+
+button {
+	color: var(--text-color);
+	background-color: var(--button-color);
+	border: 1px solid var(--button-border-color);
+}
+
+button:hover {
+	background-color: var(--button-hover-color);
+	border-color: var(--button-border-color);
+}
+
+button:disabled {
+	background-color: var(--button-disabled-color);
+	border: 1px solid var(--button-border-color);
+}
+
+input, select, textarea {
+	color: #333;
+	background-color: transparent;
+	border: 1px solid var(--button-border-color);
+}
+
+input:not(:disabled):focus, select:not(:disabled):focus, textarea:not(:disabled):focus,
+input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover {
+	background-color: #e5d9f2;
+	border-color: var(--button-selected-color);
+}
+
+hr {
+	border-top: 1px solid var(--divider-color);
+}
diff --git a/themes/light/02-sugarcube/07-ui-dialog.css b/themes/light/02-sugarcube/07-ui-dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..a31570106256cb9399fa7716e30c5781e6ca7c93
--- /dev/null
+++ b/themes/light/02-sugarcube/07-ui-dialog.css
@@ -0,0 +1,10 @@
+#ui-dialog-titlebar {
+	background-color: var(--divider-color);
+}
+#ui-dialog-body {
+	background-color: var(--sidebar-color);
+	border: 1px solid var(--divider-color);
+}
+#ui-dialog-body hr {
+	background-color: var(--divider-color);
+}
diff --git a/themes/light/02-sugarcube/08-ui.css b/themes/light/02-sugarcube/08-ui.css
new file mode 100644
index 0000000000000000000000000000000000000000..3d4f9732b216cb30b68710395c185e27946954ce
--- /dev/null
+++ b/themes/light/02-sugarcube/08-ui.css
@@ -0,0 +1,10 @@
+/* Saves dialog styling. */
+#ui-dialog-body.saves > *:not(:first-child) {
+	border-top-color: var(--divider-color);
+}
+#ui-dialog-body.saves tr:not(:first-child) {
+	border-top-color: var(--divider-color);
+}
+#ui-dialog-body.saves .empty {
+	color: var(--text-color);
+}
diff --git a/themes/light/02-sugarcube/09-ui-bar.css b/themes/light/02-sugarcube/09-ui-bar.css
new file mode 100644
index 0000000000000000000000000000000000000000..16b3d0ea5bf623e2dcb9eb95751edc33849f8e50
--- /dev/null
+++ b/themes/light/02-sugarcube/09-ui-bar.css
@@ -0,0 +1,33 @@
+#ui-bar {
+	background-color: var(--sidebar-color);
+	border-right: 1px solid var(--divider-color);
+}
+#ui-bar a:hover {
+	text-decoration: underline;
+}
+#ui-bar hr {
+	border-color: var(--divider-color);
+}
+#ui-bar-toggle{
+	color: #444;
+	border: 1px solid var(--divider-color);
+	border-right: none;
+}
+#ui-bar-toggle:hover {
+	background-color: var(--sidebar-hover-color);
+	border-color: var(--divider-color);
+}
+#menu ul {
+	border: 1px solid var(--divider-color);
+}
+#menu li:not(:first-child) {
+	border-top: 1px solid var(--divider-color);
+}
+#menu li a {
+	color: var(--text-color);
+	background-color: transparent;
+	border: none;
+}
+#menu li a:hover {
+	background-color: var(--sidebar-hover-color);
+}
diff --git a/themes/light/arcologyBuilding.css b/themes/light/arcologyBuilding.css
new file mode 100644
index 0000000000000000000000000000000000000000..5cae3dcc760d24fa44cc6abe73ff2cbaf7cc464d
--- /dev/null
+++ b/themes/light/arcologyBuilding.css
@@ -0,0 +1,18 @@
+div.building.basement {
+    border-top-color: #999;
+    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #999 20px, #999 30px);
+}
+
+div.building div.innerCell {
+    background-color: var(--background-color);
+}
+
+div.building div.decorative {
+    outline-color: black;
+}
+
+/* introduction special formatting */
+/* makes all links unusable */
+.intro div.building a {
+    color: var(--text-color);
+}
diff --git a/themes/light/options.css b/themes/light/options.css
new file mode 100644
index 0000000000000000000000000000000000000000..88e25e7e362d0ee0669b6fb4c471dcd7a7e7c8e7
--- /dev/null
+++ b/themes/light/options.css
@@ -0,0 +1,3 @@
+div.options-group span.comment {
+    color: #575757;
+}
diff --git a/themes/light/quicklinks.css b/themes/light/quicklinks.css
new file mode 100644
index 0000000000000000000000000000000000000000..1aa56a6a2807153a48b1a51437728f2eeabd6620
--- /dev/null
+++ b/themes/light/quicklinks.css
@@ -0,0 +1,13 @@
+div.quick-links div.toggle {
+    background-color: var(--button-color);
+}
+
+div.quick-links div.toggle:hover {
+    background-color: var(--button-hover-color);
+}
+
+div.quick-links div.menu-link {
+    background-color: var(--button-disabled-color);
+    border-color: var(--button-border-color);
+    box-shadow: var(--button-border-color);
+}