From c4007c84361c7521704eb8e0c905bfe5bc8f6655 Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Sat, 30 Dec 2023 16:05:57 -0600
Subject: [PATCH] Add theme feature

---
 public/themes/catppucinMocha.css     | 28 ++++++++++++++
 {src => public}/themes/main.css      | 56 ++++++++++++++--------------
 src/index.tsx                        | 19 +++++++---
 src/locales/en.json                  | 10 ++++-
 src/locales/es.json                  | 10 ++++-
 src/locales/ja.json                  | 10 ++++-
 src/pages/Settings/Customization.tsx | 15 +++++++-
 src/routes.tsx                       |  3 +-
 8 files changed, 111 insertions(+), 40 deletions(-)
 create mode 100644 public/themes/catppucinMocha.css
 rename {src => public}/themes/main.css (96%)

diff --git a/public/themes/catppucinMocha.css b/public/themes/catppucinMocha.css
new file mode 100644
index 0000000..61aa04b
--- /dev/null
+++ b/public/themes/catppucinMocha.css
@@ -0,0 +1,28 @@
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
+
+:root {
+  --background-primary: #1e1e2e;
+  --background-lighter: #11111b;
+  --navbar-color: #11111b;
+  --navbar-height: 60px;
+  --navbar-text-color: #cba6f7;
+  --navbar-link-color: #89b4fa;
+  --navbar-link-hover-color: #cba6f7;
+  --navbar-font: "Roboto";
+  --input-text-color: #cdd6f4;
+  --input-placeholder-color: #bac2de;
+  --input-background-color: #181825;
+  --input-border-color: #cba6f7;
+  --input-border-size: 1.3px;
+  --navbar-logo-filter: none;
+  --dropdown-option-hover-color: #11111b;
+}
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+}
+
+.font-roboto {
+  font-family: "Roboto";
+}
diff --git a/src/themes/main.css b/public/themes/main.css
similarity index 96%
rename from src/themes/main.css
rename to public/themes/main.css
index 472676d..4225b6c 100644
--- a/src/themes/main.css
+++ b/public/themes/main.css
@@ -1,28 +1,28 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #191724;
-  --background-lighter: #16121f;
-  --navbar-color: #26233a;
-  --navbar-height: 60px;
-  --navbar-text-color: #7967dd;
-  --navbar-link-color: #e0def4;
-  --navbar-link-hover-color: gray;
-  --navbar-font: "Roboto";
-  --input-text-color: #e0def4;
-  --input-placeholder-color: white;
-  --input-background-color: #1f1d2e;
-  --input-border-color: #eb6f92;
-  --input-border-size: 1.3px;
-  --navbar-logo-filter: none;
-  --dropdown-option-hover-color: #312a49;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
+
+:root {
+  --background-primary: #191724;
+  --background-lighter: #16121f;
+  --navbar-color: #26233a;
+  --navbar-height: 60px;
+  --navbar-text-color: #7967dd;
+  --navbar-link-color: #e0def4;
+  --navbar-link-hover-color: gray;
+  --navbar-font: "Roboto";
+  --input-text-color: #e0def4;
+  --input-placeholder-color: white;
+  --input-background-color: #1f1d2e;
+  --input-border-color: #eb6f92;
+  --input-border-size: 1.3px;
+  --navbar-logo-filter: none;
+  --dropdown-option-hover-color: #312a49;
+}
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+}
+
+.font-roboto {
+  font-family: "Roboto";
+}
diff --git a/src/index.tsx b/src/index.tsx
index e17fecb..bea3426 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,24 @@
 import { render } from "preact";
 import { Suspense, lazy } from "preact/compat";
 import { LoadSuspense } from "./LoadSuspense";
+import { Helmet } from "react-helmet";
+
 const Routes = lazy(() => import("./routes"));
 
+const theme = localStorage.getItem("theme") || "main";
+
 export default function App() {
   return (
-    <Suspense fallback={<LoadSuspense />}>
-      <div>
-        <Routes />
-      </div>
-    </Suspense>
+    <div>
+      <Helmet>
+        <link rel="stylesheet" href={"/themes/" + theme + ".css"}></link>
+      </Helmet>
+      <Suspense fallback={<LoadSuspense />}>
+        <div>
+          <Routes />
+        </div>
+      </Suspense>
+    </div>
   );
 }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 3bfcddf..f5e67de 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -51,6 +51,10 @@
     "search": {
       "title": "Search Engine",
       "subtitle": "Choose your search engine"
+    },
+    "theme": {
+      "title": "Theme",
+      "subtitle": "Choose a theme so your eyes don't hate us"
     }
   },
   "titles": {
@@ -59,5 +63,9 @@
     "discord": "Nebula - Discord",
     "404": "Nebula - 404"
   },
-  "comingsoon": "Coming soon!"
+  "comingsoon": "Coming soon!",
+  "themes": {
+    "main": "Por defecto",
+    "catppucinMocha": "Catppucin Mocha"
+  }
 }
diff --git a/src/locales/es.json b/src/locales/es.json
index 881629b..2105c48 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -51,6 +51,10 @@
     "search": {
       "title": "Buscador",
       "subtitle": "Elige tu motor de búsqueda."
+    },
+    "theme": {
+      "title": "Mirar",
+      "subtitle": "Elige una mirada para que tus ojos no nos odienn"
     }
   },
   "titles": {
@@ -59,5 +63,9 @@
     "discord": "Nebula - Discord",
     "404": "Nebula - 404"
   },
-  "comingsoon": "¡Próximamente!"
+  "comingsoon": "¡Próximamente!",
+  "themes": {
+    "main": "Por defecto",
+    "catppucinMocha": "Catppucin Mocha"
+  }
 }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 02c1fb1..8c7471a 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -51,6 +51,10 @@
     "search": {
       "title": "検索エンジン",
       "subtitle": "ネビュラの検索エンジンを選択してください"
+    },
+    "theme": {
+      "title": "テーマ",
+      "subtitle": "目が嫌いにならないようにテーマを選んでください"
     }
   },
   "titles": {
@@ -59,5 +63,9 @@
     "discord": "ネブラ - Discord",
     "404": "ネブラ - 404"
   },
-  "comingsoon": "近日公開"
+  "comingsoon": "近日公開",
+  "themes": {
+    "main": "デフォルト",
+    "catppucinMocha": "Catppucin Mocha"
+  }
 }
diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx
index 758854c..ba4edbf 100644
--- a/src/pages/Settings/Customization.tsx
+++ b/src/pages/Settings/Customization.tsx
@@ -1,9 +1,17 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import { useTranslation } from "react-i18next";
+import Dropdown from "./Dropdown";
+
 
 function Customization({ id, active }) {
   const { t } = useTranslation();
+
+  const themes = [
+    { id: "main", label: "Main" },
+    { id: "catppucinMocha", label: "Catppucin Mocha" }
+  ];
+
   return (
     <motion.div
       role="tabpanel"
@@ -17,8 +25,11 @@ function Customization({ id, active }) {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
-        <h1 class="font-roboto text-3xl">{t("comingsoon")}</h1>
+        <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div class="p-2 text-3xl">{t("settings.theme.title")}</div>
+          <div class="text-md p-4">{t("settings.theme.subtitle")}</div>
+          <Dropdown storageKey="theme" options={themes} refresh={true} />
+        </div>
       </motion.div>
     </motion.div>
   );
diff --git a/src/routes.tsx b/src/routes.tsx
index 9a0feaf..0ba5a70 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -6,9 +6,8 @@ import { ProxyFrame } from "./pages/ProxyFrame.js";
 import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
-import AutocompleteInput from "./Autocomplete";
+
 import "./style.css";
-import "./themes/main.css";
 import "./i18n";
 
 export default function Routes() {