Add theme feature

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";
+}

public/themes/main.css

@@ -1,28 +1,28 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
+
-:root {
+:root {
-  --background-primary: #191724;
+  --background-primary: #191724;
-  --background-lighter: #16121f;
+  --background-lighter: #16121f;
-  --navbar-color: #26233a;
+  --navbar-color: #26233a;
-  --navbar-height: 60px;
+  --navbar-height: 60px;
-  --navbar-text-color: #7967dd;
+  --navbar-text-color: #7967dd;
-  --navbar-link-color: #e0def4;
+  --navbar-link-color: #e0def4;
-  --navbar-link-hover-color: gray;
+  --navbar-link-hover-color: gray;
-  --navbar-font: "Roboto";
+  --navbar-font: "Roboto";
-  --input-text-color: #e0def4;
+  --input-text-color: #e0def4;
-  --input-placeholder-color: white;
+  --input-placeholder-color: white;
-  --input-background-color: #1f1d2e;
+  --input-background-color: #1f1d2e;
-  --input-border-color: #eb6f92;
+  --input-border-color: #eb6f92;
-  --input-border-size: 1.3px;
+  --input-border-size: 1.3px;
-  --navbar-logo-filter: none;
+  --navbar-logo-filter: none;
-  --dropdown-option-hover-color: #312a49;
+  --dropdown-option-hover-color: #312a49;
-}
+}
-
+
-.font-inter {
+.font-inter {
-  font-family: "Inter", sans-serif;
+  font-family: "Inter", sans-serif;
-  font-weight: 300;
+  font-weight: 300;
-}
+}
-
+
-.font-roboto {
+.font-roboto {
-  font-family: "Roboto";
+  font-family: "Roboto";
-}
+}

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>
-      <div>
+      <Helmet>
-        <Routes />
+        <link rel="stylesheet" href={"/themes/" + theme + ".css"}></link>
-      </div>
+      </Helmet>
-    </Suspense>
+      <Suspense fallback={<LoadSuspense />}>
+        <div>
+          <Routes />
+        </div>
+      </Suspense>
+    </div>
   );
 }
 

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"
+  }
 }

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"
+  }
 }

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"
+  }
 }

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>
+        <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">
-        <h1 class="font-roboto text-3xl">{t("comingsoon")}</h1>
+          <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>
   );

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() {