diff --git a/themes/Twilight/01-variables/colors.css b/themes/Twilight/01-variables/colors.css
new file mode 100644
index 0000000000000000000000000000000000000000..c7522cdb1085695cef55882664623d295da72ee4
--- /dev/null
+++ b/themes/Twilight/01-variables/colors.css
@@ -0,0 +1,80 @@
+:root {
+    /* base */
+    --background-color: #1c1d24;
+    --sidebar-color: #212534;/*#2b2f42;*/
+    --sidebar-hover-color: #40486e;
+    --text-color: #e1e1e1;
+    --divider-color: #888;
+
+    /* button */
+    --button-color: #2b2640;
+    --button-border-color: #2b2640;
+    --button-selected-color: #524064;
+    --button-hover-color: #524064;
+    --button-disabled-color: #22162e;
+
+    --link-color: #6574cd;
+    --link-hover-color: #6589e7;
+}
+
+.aquamarine, .aquamarine a, .skill, .skill a { color: #43e9e9 }
+.coral, .coral a, .fetish.loss, .fetish.loss a { color: #ff8b39 }
+.cyan, .cyan a, .hotkey { color: #00dfdf }
+/*
+.darkgoldenrod, .darkgoldenrod a, .trust.extremely-terrified, .trust.extremely-terrified a { color: darkgoldenrod }
+.darkred, .darkred a, .defiant.full, .defiant.full a { color: darkred }
+.darkviolet, .darkviolet a, .devotion.hateful, .devotion.hateful a { color: darkviolet }
+*/
+.deeppink, .deeppink a, .devotion.devoted, .devotion.devoted a { color: #ff4dad }
+/*
+.steelblue, .steelblue a { color: steelblue }
+*/
+.deepskyblue, .deepskyblue a, .intelligent, .intelligent a { color: #26bdef }
+/*
+.dodgerblue, .dodgerblue a { color: dodgerblue }
+.blue, .blue a { color: blue }
+*/
+.gold, .gold a, .trust.dec, .trust.dec a, .trust.frightened, .trust.frightened a { color: #ffd90c }
+/*
+.goldenrod, .goldenrod a, .trust.terrified, .trust.terrified a { color: goldenrod }
+.gray, .gray a { color: gray }
+*/
+.green, .green a, .reputation.inc, .reputation.inc a, .improvement, .improvement a, .flaw.break, .flaw.break a, .skill.inc, .skill.inc a, .positive, .positive a { color: #18af18 }
+.hotpink, .hotpink a, .devotion.inc, .devotion.inc a, .devotion.accept, .devotion.accept a { color: #ff86c3 }
+/*
+.lawngreen, .lawngreen a { color: lawngreen }
+.lightblue, .lightblue a { color: lightblue }
+*/
+.lightcoral, .lightcoral a, .fetish.gain, .fetish.gain a { color: #e762e3 }
+.lightgreen, .lightgreen a, .relationship, .relationship a { color: #00cb7a }
+/*
+.lightpink, .lightpink a { color: lightpink }
+.lightsalmon, .lightsalmon a, .fetish.inc, .fetish.inc a { color: lightsalmon }
+*/
+.lime, .lime a, .change.positive, .change.positive a, .virginity.loss, .virginity.loss a, .pregnant, .pregnant a { color: #40ff40 }
+.limegreen, .limegreen a { color: limegreen }
+.magenta, .magenta a, .devotion.worship, .devotion.worship a { color: #ff36ff }
+.mediumaquamarine, .mediumaquamarine a, .trust.inc, .trust.inc a, .trust.careful, .trust.careful a { color: #52d3d3 }
+
+.mediumorchid, .mediumorchid a, .devotion.dec, .devotion.dec a, .devotion.resistant, .devotion.resistant a { color: #bc60d3 }
+/*
+.mediumseagreen, .mediumseagreen a, .trust.trusting, .trust.trusting a { color: mediumseagreen }
+*/
+.orange, .orange a, .stupid, .stupid a, .change.negative, .change.negative a, .defiant.careful, .defiant.careful a, .intro.question { color: #ffbb3e }
+/*
+.orangered, .orangered a, .defiant.inc, .defiant.inc a, .defiant.bold, .defiant.bold, .education.neg a { color: orangered }
+.orchid, .orchid a { color: orchid }
+*/
+.pink, .pink a, .slave.name.simple, .slave-name { color: #ff9fc3 }
+.red, .red a, .health.dec, .health.dec a, .cash.dec, .cash.dec a, .flaw.gain, .flaw.gain a, .error, .error a, .elites.loss, .elites.loss a, .reputation.dec, .reputation.dec a, .warning, .warning a { color: #ff3131 }
+/*.seagreen, .seagreen a, .trust.prof-trusting, .trust.prof-trusting a { color: seagreen }
+.springgreen, .springgreen a, .skill.player, .skill.player a { color: springgreen }
+*/
+.tan, .tan a { color: #d2b48c }
+/*
+.chocolate, .chocolate a { color: chocolate }
+.saddlebrown, .saddlebrown a { color: saddlebrown }
+.teal, .teal a { color: teal }
+*/
+.yellow, .yellow a, .noteworthy, .noteworthy a, .devotion.ambivalent, .devotion.ambivalent a, .trust.fearful, .trust.fearful a { color: #f7f754 }
+.yellowgreen, .yellowgreen a, .cash.inc, .cash.inc a, .cash, .cash a { color: #9acd32 }
diff --git a/themes/Twilight/02-sugarcube/01-init-screen.css b/themes/Twilight/02-sugarcube/01-init-screen.css
new file mode 100644
index 0000000000000000000000000000000000000000..13d22e295f595e0effc535ef7c0ea843cd0d873b
--- /dev/null
+++ b/themes/Twilight/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/Twilight/02-sugarcube/03-core.css b/themes/Twilight/02-sugarcube/03-core.css
new file mode 100644
index 0000000000000000000000000000000000000000..77a767658274cf2eb1e5090c31dce2af6be6a5a3
--- /dev/null
+++ b/themes/Twilight/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: #e1e1e1;
+	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: #2b2640;
+	border-color: var(--button-selected-color);
+}
+
+hr {
+	border-top: 1px solid var(--divider-color);
+}
diff --git a/themes/Twilight/02-sugarcube/07-ui-dialog.css b/themes/Twilight/02-sugarcube/07-ui-dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..213f9aa258953b4c5a64356aa846af5454d46c22
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/07-ui-dialog.css
@@ -0,0 +1,10 @@
+#ui-dialog-titlebar {
+	background-color: var(--sidebar-color);
+}
+#ui-dialog-body {
+	background-color: var(--background-color);
+	border: 1px solid var(--divider-color);
+}
+#ui-dialog-body hr {
+	background-color: var(--divider-color);
+}
diff --git a/themes/Twilight/02-sugarcube/08-ui.css b/themes/Twilight/02-sugarcube/08-ui.css
new file mode 100644
index 0000000000000000000000000000000000000000..3d4f9732b216cb30b68710395c185e27946954ce
--- /dev/null
+++ b/themes/Twilight/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/Twilight/02-sugarcube/09-ui-bar.css b/themes/Twilight/02-sugarcube/09-ui-bar.css
new file mode 100644
index 0000000000000000000000000000000000000000..96f35b7ab046e380355fbeb9575a6cfa6b5e7520
--- /dev/null
+++ b/themes/Twilight/02-sugarcube/09-ui-bar.css
@@ -0,0 +1,34 @@
+#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);
+	text-decoration: none;
+}
diff --git a/themes/Twilight/arcologyBuilding.css b/themes/Twilight/arcologyBuilding.css
new file mode 100644
index 0000000000000000000000000000000000000000..9f64ec3ca84a52e4c5a72f55f17e24396a59ece9
--- /dev/null
+++ b/themes/Twilight/arcologyBuilding.css
@@ -0,0 +1,38 @@
+div.building.basement {
+	border-top-color: #8F8F8F;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #8F8F8F 20px, #8F8F8F 30px);
+}
+
+div.building .row .penthouse{
+	border-color: #5daad7;
+}
+
+div.building .row .apartments{
+	border-color: #3eaf3e;
+}
+
+div.building .row .private{
+	border-color: #cb1a1a;
+}
+
+div.building .row .pit{
+	border-color: #d94c18;
+}
+
+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);
+}
+
+div.building div.row div.dairy {
+	border-color: saddlebrown;
+}
diff --git a/themes/Twilight/cardStyle.css b/themes/Twilight/cardStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..9fd029fcaf016d4f928cd95a6bb4dabe98d66960
--- /dev/null
+++ b/themes/Twilight/cardStyle.css
@@ -0,0 +1,6 @@
+div.card {
+	/*border: none;*/
+	border-color: #384678;
+	background-color: #212534;
+	box-shadow: 10px 10px 5px #282d40;
+}
diff --git a/themes/Twilight/main.css b/themes/Twilight/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..127f3bfde289917ef115bdfacc6f76436a2f43dc
--- /dev/null
+++ b/themes/Twilight/main.css
@@ -0,0 +1,7 @@
+.lrgRender > div.mask, .lrgVector > div.mask {
+	background: linear-gradient(90deg, rgba(28, 29, 36, 1), rgba(28, 29, 36, 0.8) 60%, rgba(28, 29, 36, 0));
+}
+
+.clear-formatting {
+	color: var(--text-color);
+}
diff --git a/themes/Twilight/options.css b/themes/Twilight/options.css
new file mode 100644
index 0000000000000000000000000000000000000000..7d213df171c715ea7cc76064ee90db6d7f64a141
--- /dev/null
+++ b/themes/Twilight/options.css
@@ -0,0 +1,3 @@
+div.options-group .comment {
+	color: #575757;
+}
diff --git a/themes/Twilight/quicklinks.css b/themes/Twilight/quicklinks.css
new file mode 100644
index 0000000000000000000000000000000000000000..5f43b8e13837cf8ac6bde454ea9d155faa163105
--- /dev/null
+++ b/themes/Twilight/quicklinks.css
@@ -0,0 +1,18 @@
+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);
+}
+
+div.quick-links div.notification:not(.category)::after,
+div.quick-links div.category.notification.collapsed > div.toggle::after {
+	content: "\e80b";
+}