diff --git a/frontend/static/themes/oscura.css b/frontend/static/themes/oscura.css
new file mode 100644
index 000000000..af19de99f
--- /dev/null
+++ b/frontend/static/themes/oscura.css
@@ -0,0 +1,52 @@
+:root {
+  --bg-color: #0b0b0f;
+  --main-color: #e2e3a0;
+  --caret-color: #e2e3a0;
+  --sub-color: #a0a0a0;
+  --sub-alt-color: #121213;
+  --text-color: #e6e6e6;
+  --error-color: #ff5c5c;
+  --error-extra-color: #ff6c72;
+  --colorful-error-color: #ff5c5c;
+  --colorful-error-extra-color: #d84f68;
+}
+
+/* Background & Text Colors */
+#notificationCenter .notif.bad {
+  --notif-border-color: #ff5c5c;
+  --notif-background-color: #ff5c5c;
+}
+
+#notificationCenter .notif.good {
+  --notif-border-color: #4ebe96;
+  --notif-background-color: #4ebe96;
+}
+
+#notificationCenter .notif.notice {
+  --notif-border-color: #479ffa;
+  --notif-background-color: #479ffa;
+}
+
+/* Hover Styles  */
+#notificationCenter .notif:hover.good {
+  --notif-background-color: #4ebe96ad;
+}
+#notificationCenter .notif:hover.bad {
+  --notif-background-color: #ff5c5cc2;
+}
+#notificationCenter .notif:hover.notice {
+  --notif-background-color: #479ffabd;
+}
+
+/* Content Colors  */
+#notificationCenter .notif .message {
+  color: var(--bg-color);
+}
+
+#notificationCenter .notif .message .title {
+  color: var(--bg-color);
+}
+
+#notificationCenter .notif .icon {
+  color: var(--bg-color);
+}