From 94a320eb26ad3e3288a2a3b72088cca5c7650c14 Mon Sep 17 00:00:00 2001
From: Hemram Kumarapu <95411164+H4-MM-3R@users.noreply.github.com>
Date: Thu, 27 Feb 2025 15:59:16 +0530
Subject: [PATCH] feat(theme): add solarized osaka (@H4-MM-3R) (#6287)

---
 frontend/static/themes/_list.json          |  7 +++
 frontend/static/themes/solarized_osaka.css | 56 ++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 frontend/static/themes/solarized_osaka.css

diff --git a/frontend/static/themes/_list.json b/frontend/static/themes/_list.json
index 0de5dc1c144d..ee561beeab96 100644
--- a/frontend/static/themes/_list.json
+++ b/frontend/static/themes/_list.json
@@ -398,6 +398,13 @@
     "subColor": "#2aa198",
     "textColor": "#181819"
   },
+  {
+    "name": "solarized_osaka",
+    "bgColor": "#00141a",
+    "mainColor": "#859900",
+    "subColor": "#2aa198",
+    "textColor": "#b58900"
+  },
   {
     "name": "terra",
     "bgColor": "#0c100e",
diff --git a/frontend/static/themes/solarized_osaka.css b/frontend/static/themes/solarized_osaka.css
new file mode 100644
index 000000000000..da0fe6cb077d
--- /dev/null
+++ b/frontend/static/themes/solarized_osaka.css
@@ -0,0 +1,56 @@
+:root {
+  --bg-color: #00141a;
+  --main-color: #859900;
+  --caret-color: #b58900;
+  --sub-color: #2aa198;
+  --sub-alt-color: #00222b;
+  --text-color: #eee8d5;
+  --error-color: #dc322f;
+  --error-extra-color: #9b225c;
+  --colorful-error-color: #d33682;
+  --colorful-error-extra-color: #9b225c;
+}
+
+#words {
+  --correct-letter-color: var(--text-color);
+  --untyped-letter-color: #586e75;
+}
+
+header #logo {
+  color: var(--text-color);
+}
+
+header #logo .icon {
+  color: var(--text-color) !important;
+}
+
+key {
+  color: var(--text-color);
+  background-color: var(--sub-alt-color);
+}
+
+button.text:hover,
+.button.text:hover,
+.textButton:hover {
+  color: var(--caret-color);
+}
+
+button.text.active,
+.button.text.active,
+.textButton.active {
+  color: var(--main-color);
+}
+
+button:hover,
+.button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover {
+  color: var(--bg-color);
+  background: var(--caret-color);
+}
+
+.scrollToTopButton:hover {
+  background: var(--caret-color);
+  color: var(--bg-color);
+}