Merge pull request #188 from IncognitoTGT/main

Got theme backend working, eruda also has a theme that matches with nebula more

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

public/themes/mocha.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";
+}

src/components/iframe/IframeHeader.tsx

@@ -97,7 +97,12 @@ export function IframeHeader(props: { url: string }) {
                 script.src = "https://cdn.jsdelivr.net/npm/eruda";
                 script.onload = function () {
                   if (!proxyWindow) return;
-                  proxyWindow.eruda.init();
+                  proxyWindow.eruda.init({
+                    defaults: {
+                      displaySize: 45,
+                      theme: 'Material Palenight'
+                    }
+                  });
                   proxyWindow.eruda.show();
                 };
                 proxyDocument.head.appendChild(script);

src/routes.tsx

@@ -6,14 +6,14 @@ 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 AutocompleteInput from "./Autocomplete";
 import "./style.css";
-import "./themes/main.css";
 import "./i18n";
-
+const theme:string = localStorage.getItem("theme") || "main";
 export default function Routes() {
   return (
     <LocationProvider>
+      <link rel="stylesheet" href={`/themes/${theme}.css`} />
       <Router>
         <Route path="/" component={Home} />
         <Route path="/discord" component={DiscordPage} />