From 9b73411bc991d3a4d374d57d75142f3de90f0e8a Mon Sep 17 00:00:00 2001
From: Aqeel <aqeelten@gmail.com>
Date: Thu, 27 Jan 2022 20:35:32 +0530
Subject: [PATCH] Aurora theme (#2358) by aqeelshamz

* Add Aurora Theme

* Add Aurora Theme
---
 static/themes/_list.json |  5 +++
 static/themes/aurora.css | 78 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 static/themes/aurora.css

diff --git a/static/themes/_list.json b/static/themes/_list.json
index bcd2ebb9d..179ca1263 100644
--- a/static/themes/_list.json
+++ b/static/themes/_list.json
@@ -694,4 +694,9 @@
     "bgColor": "linear-gradient(to right, #b31313, #ff9000, #fdda16)",
     "mainColor": "#ffffff"
   }
+  ,{
+    "name": "aurora",
+    "bgColor": "linear-gradient(to right, #002c39, #015061, #007a7f, #00e980, #00ffbb)",
+    "mainColor": "#ffffff"
+  }
 ]
diff --git a/static/themes/aurora.css b/static/themes/aurora.css
new file mode 100644
index 000000000..cc53853f9
--- /dev/null
+++ b/static/themes/aurora.css
@@ -0,0 +1,78 @@
+:root {
+  --bg-color: #011926;
+  --main-color: #00e980;
+  --caret-color: #00e980;
+  --sub-color: #245c69;
+  --text-color: #fff;
+  --error-color: #b94da1;
+  --error-extra-color: #9b3a76;
+  --colorful-error-color: #b94da1;
+  --colorful-error-extra-color: #9b3a76;
+}
+
+@keyframes rgb {
+  0% {
+    color: #009fb4;
+  }
+  25% {
+    color: #00e975;
+  }
+  50% {
+    color: #00ffea;
+  }
+  75% {
+    color: #00e975;
+  }
+  100% {
+    color: #009fb4;
+  }
+}
+
+@keyframes rgb-bg {
+  0% {
+    background: #009fb4;
+  }
+  25% {
+    background: #00e975;
+  }
+  50% {
+    background: #00ffea;
+  }
+  75% {
+    background: #00e975;
+  }
+  100% {
+    background: #009fb4;
+  }
+}
+
+.button.discord::after,
+#caret,
+.pageSettings .section .buttons .button.active,
+.pageSettings .section.languages .buttons .language.active,
+.pageAccount .group.filterButtons .buttons .button.active {
+  animation: rgb-bg 5s linear infinite;
+}
+
+#top.focus .button.discord::after,
+#top .button.discord.dotHidden::after {
+  animation-name: none !important;
+}
+
+.logo .bottom,
+#top .config .group .buttons .text-button.active,
+#result .stats .group .bottom,
+#menu .icon-button:hover,
+#top .config .group .buttons .text-button:hover,
+a:hover,
+#words.flipped .word {
+  animation: rgb 5s linear infinite;
+}
+
+#words.flipped .word letter.correct {
+  color: var(--sub-color);
+}
+
+#words:not(.flipped) .word letter.correct {
+  animation: rgb 5s linear infinite;
+}