RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revamp themes

Browse source
This commit is contained in:
incognitotgt 2024-04-11 17:02:53 -04:00
parent b152154cf0
commit 7201d7120e
No known key found for this signature in database
GPG key ID: D229D19A500C60B0
14 changed files with 289 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
public/themes/catppuccinFrappe.css
View file

@ -1,30 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #303446 !important;
--background-lighter: #292c3c !important;
--navbar-color: #292c3c !important;
--navbar-height: 60px !important;
--navbar-text-color: #c6d0f5 !important;
--navbar-link-color: #8caaee !important;
--navbar-link-hover-color: #ca9ee6 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #c6d0f5 !important;
--input-placeholder-color: #a5adce !important;
--input-background-color: #232634 !important;
--input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #232634 !important;
--tab-color: #414559 !important;
--active-color: #ca9ee6 !important;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

30
public/themes/catppuccinLatte.css
View file

@ -1,30 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #eff1f5 !important;
--background-lighter: #e6e9ef !important;
--navbar-color: #e6e9ef !important;
--navbar-height: 60px !important;
--navbar-text-color: #4c4f69 !important;
--navbar-link-color: #1e66f5 !important;
--navbar-link-hover-color: #8839ef !important;
--navbar-font: "Roboto" !important;
--input-text-color: #4c4f69 !important;
--input-placeholder-color: #6c6f85 !important;
--input-background-color: #dce0e8 !important;
--input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #dce0e8 !important;
--tab-color: #ccd0da !important;
--active-color: #8839ef !important;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

30
public/themes/catppuccinMacchiato.css
View file

@ -1,30 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #24273a !important;
--background-lighter: #1e2030 !important;
--navbar-color: #1e2030 !important;
--navbar-height: 60px !important;
--navbar-text-color: #cad3f5 !important;
--navbar-link-color: #8aadf4 !important;
--navbar-link-hover-color: #c6a0f6 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #cad3f5 !important;
--input-placeholder-color: #a5adcb !important;
--input-background-color: #181926 !important;
--input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #181926 !important;
--tab-color: #363a4f !important;
--active-color: #c6a0f6 !important;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

30
public/themes/catppuccinMocha.css
View file

@ -1,30 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #1e1e2e !important;
--background-lighter: #181825 !important;
--navbar-color: #181825 !important;
--navbar-height: 60px !important;
--navbar-text-color: #cdd6f4 !important;
--navbar-link-color: #89b4fa !important;
--navbar-link-hover-color: #cba6f7 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #cdd6f4 !important;
--input-placeholder-color: #a6adc8 !important;
--input-background-color: #11111b !important;
--input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #11111b !important;
--tab-color: #313244 !important;
--active-color: #cba6f7 !important;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

30
public/themes/hacker.css
View file

@ -1,30 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #000 !important;
--background-lighter: #000 !important;
--navbar-color: #000 !important;
--navbar-height: 60px !important;
--navbar-text-color: greenyellow !important;
--navbar-link-color: greenyellow !important;
--navbar-link-hover-color: green !important;
--navbar-font: "Roboto" !important;
--input-text-color: greenyellow !important;
--input-placeholder-color: white !important;
--input-background-color: #000 !important;
--input-border-color: greenyellow !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #312a49 !important;
--tab-color: var(--black) !important;
--border-color: greenyellow !important;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

30
public/themes/main.css
View file

@ -1,30 +0,0 @@
@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;
--tab-color: var(--black);
--border-color: #16121f;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

74
src/components/ThemeProvider.tsx Normal file
View file

@ -0,0 +1,74 @@
import { createContext } from "preact";
import { useContext, useEffect, useState } from "preact/hooks";
export type Theme =
| "main"
| "hacker"
| "catppuccin-mocha"
| "catppuccin-macchiato"
| "catppuccin-frappe"
| "catppuccin-latte";
export const themes: Theme[] = [
"main",
"hacker",
"catppuccin-mocha",
"catppuccin-macchiato",
"catppuccin-frappe",
"catppuccin-latte"
];
type ThemeProviderProps = {
children: React.ReactNode;
};
type ThemeProviderState = {
themes: Theme[];
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
themes: themes,
theme: "main",
setTheme: () => null
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
const defaultTheme = "main";
const storageKey = "theme";
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
);
useEffect(() => {
const root = window.document.documentElement;
themes.forEach((theme) => {
root.classList.remove(theme);
});
root.classList.add(theme);
}, [theme, themes]);
const value = {
theme,
themes,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
}
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider");
return context;
};

8
src/index.tsx
View file

@ -1,12 +1,12 @@
import { render } from "preact"; import { render } from "preact";
import { Suspense, lazy } from "preact/compat"; import { Suspense, lazy } from "preact/compat";
import { LoadSuspense } from "./LoadSuspense"; import { LoadSuspense } from "./LoadSuspense";
import { Helmet } from "react-helmet";
import Meta from "./components/Meta"; import Meta from "./components/Meta";
import Particles, { initParticlesEngine } from "@tsparticles/react"; import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim"; import { loadSlim } from "@tsparticles/slim";
import { useEffect, useState } from "preact/compat"; import { useEffect, useState } from "preact/compat";
import { ThemeProvider } from "./components/ThemeProvider";
const Routes = lazy(() => import("./routes")); const Routes = lazy(() => import("./routes"));
@ -36,13 +36,10 @@ export default function App() {
}; };
return ( return (
<ThemeProvider>
<div class="w-srceen h-screen"> <div class="w-srceen h-screen">
{window.location.origin === "https://nebulaproxy.io" && <Meta />} {window.location.origin === "https://nebulaproxy.io" && <Meta />}
{/* {window.location.origin === "http://localhost:8080" && <Meta />} */} {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
<Helmet>
<link rel="stylesheet" href={"/themes/" + theme + ".css"}></link>
<link rel="stylesheet" href="/themes/main.css"></link>
</Helmet>
<Suspense fallback={<LoadSuspense />}> <Suspense fallback={<LoadSuspense />}>
<div className="absolute z-20 h-full w-full"> <div className="absolute z-20 h-full w-full">
<Routes /> <Routes />
@ -59,6 +56,7 @@ export default function App() {
</div> </div>
</Suspense> </Suspense>
</div> </div>
</ThemeProvider>
); );
} }

8
src/locales/en.json
View file

@ -94,10 +94,10 @@
"main": "Main", "main": "Main",
"hacker": "Hacker", "hacker": "Hacker",
"crismas": "Crismas🐴🎄", "crismas": "Crismas🐴🎄",
"catppuccinMocha": "Catppuccin Mocha", "catppuccin-mocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato", "catppuccin-macchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe", "catppuccin-frappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte" "catppuccin-latte": "Catppuccin Latte"
}, },
"clipboard": "URL copied to clipboard!", "clipboard": "URL copied to clipboard!",
"bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.", "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.",

8
src/locales/es.json
View file

@ -93,10 +93,10 @@
"main": "Por defecto", "main": "Por defecto",
"hacker": "Hacker", "hacker": "Hacker",
"crismas": "Naidad🐴🎄", "crismas": "Naidad🐴🎄",
"catppuccinMocha": "Catppuccin Mocha", "catppuccin-mocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato", "catppuccin-macchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe", "catppuccin-frappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte" "catppuccin-latte": "Catppuccin Latte"
}, },
"clipboard": "¡URL copiada al portapapeles!", "clipboard": "¡URL copiada al portapapeles!",
"bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.", "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.",

8
src/locales/ja.json
View file

@ -93,10 +93,10 @@
"main": "標準", "main": "標準",
"hacker": "Hacker", "hacker": "Hacker",
"crismas": "Crismas🐴🎄", "crismas": "Crismas🐴🎄",
"catppuccinMocha": "Catppuccin Mocha", "catppuccin-mocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato", "catppuccin-macchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe", "catppuccin-frappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte" "catppuccin-latte": "Catppuccin Latte"
}, },
"clipboard": "コピーしました!", "clipboard": "コピーしました!",
"bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください", "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください",

12
src/pages/Settings/Customization.tsx
View file

@ -2,19 +2,11 @@ import { motion } from "framer-motion";
import { tabContentVariant, settingsPageVariant } from "./Variants"; import { tabContentVariant, settingsPageVariant } from "./Variants";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Dropdown from "./Dropdown"; import Dropdown from "./Dropdown";
import ThemeDropdown from "./ThemeDropdown";
function Customization({ id, active }) { function Customization({ id, active }) {
const { t } = useTranslation(); const { t } = useTranslation();
const themes = [
{ id: "main", label: t("themes.main") },
{ id: "hacker", label: t("themes.hacker") },
{ id: "catppuccinMocha", label: t("themes.catppuccinMocha") },
{ id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") },
{ id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") },
{ id: "catppuccinLatte", label: t("themes.catppuccinLatte") }
];
const particles = [ const particles = [
{ id: "none", label: t("settings.theme.particlesNone") }, { id: "none", label: t("settings.theme.particlesNone") },
{ id: "/crismas.json", label: t("themes.crismas") } { id: "/crismas.json", label: t("themes.crismas") }
@ -40,7 +32,7 @@ function Customization({ id, active }) {
<div className="text-md p-4 font-bold text-input-text"> <div className="text-md p-4 font-bold text-input-text">
{t("settings.theme.subtitle")} {t("settings.theme.subtitle")}
</div> </div>
<Dropdown storageKey="theme" options={themes} refresh={true} /> <ThemeDropdown />
</div> </div>
<div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center"> <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
<div className="p-2 text-3xl font-bold text-input-text"> <div className="p-2 text-3xl font-bold text-input-text">

53
src/pages/Settings/ThemeDropdown.tsx Normal file
View file

@ -0,0 +1,53 @@
import { useState } from "preact/hooks";
import { FaAngleDown } from "react-icons/fa";
import { useTheme } from "../../components/ThemeProvider";
import { useTranslation } from "react-i18next";
const ThemeDropdown = () => {
const [isOpen, setIsOpen] = useState(false);
const { t } = useTranslation();
const { theme, setTheme, themes } = useTheme();
const options = themes.map((theme) => {
return { id: theme, label: t(`themes.${theme}`) };
});
return (
<div className="relative text-center">
<div
className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
isOpen ? "rounded-t-2xl" : "rounded-2xl"
}`}
onClick={() => setIsOpen(!isOpen)}
>
<div className="flex h-full w-full select-none flex-row items-center">
<div className="h-full w-1/4"></div>
<div className="flex w-2/4 flex-row items-center justify-center text-input-text">
{options.find((o) => o.id === theme)?.label}
</div>
<div className="flex w-1/4 flex-col items-center text-input-text">
<FaAngleDown />
</div>
</div>
{isOpen && (
<div className="absolute top-full w-full">
{options.map((option, index) => (
<div
key={option.id}
className={`flex flex-row justify-center border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
index === options.length - 1 ? "rounded-b-2xl" : ""
}`}
onClick={() => {
setIsOpen(false);
setTheme(option.id);
}}
>
{option.label}
</div>
))}
</div>
)}
</div>
</div>
);
};
export default ThemeDropdown;

128
src/style.css
View file

@ -1,9 +1,133 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
:root,
.main {
--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;
--tab-color: var(--black);
--border-color: #16121f;
}
.hacker {
--background-primary: #000 !important;
--background-lighter: #000 !important;
--navbar-color: #000 !important;
--navbar-height: 60px !important;
--navbar-text-color: greenyellow !important;
--navbar-link-color: greenyellow !important;
--navbar-link-hover-color: green !important;
--navbar-font: "Roboto" !important;
--input-text-color: greenyellow !important;
--input-placeholder-color: white !important;
--input-background-color: #000 !important;
--input-border-color: greenyellow !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #312a49 !important;
--tab-color: var(--black) !important;
--border-color: greenyellow !important;
}
.catppuccin-mocha {
--background-primary: #1e1e2e !important;
--background-lighter: #181825 !important;
--navbar-color: #181825 !important;
--navbar-height: 60px !important;
--navbar-text-color: #cdd6f4 !important;
--navbar-link-color: #89b4fa !important;
--navbar-link-hover-color: #cba6f7 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #cdd6f4 !important;
--input-placeholder-color: #a6adc8 !important;
--input-background-color: #11111b !important;
--input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #11111b !important;
--tab-color: #313244 !important;
--active-color: #cba6f7 !important;
}
.catppuccin-macchiato {
--background-primary: #24273a !important;
--background-lighter: #1e2030 !important;
--navbar-color: #1e2030 !important;
--navbar-height: 60px !important;
--navbar-text-color: #cad3f5 !important;
--navbar-link-color: #8aadf4 !important;
--navbar-link-hover-color: #c6a0f6 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #cad3f5 !important;
--input-placeholder-color: #a5adcb !important;
--input-background-color: #181926 !important;
--input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #181926 !important;
--tab-color: #363a4f !important;
--active-color: #c6a0f6 !important;
}
.catppuccin-frappe {
--background-primary: #303446 !important;
--background-lighter: #292c3c !important;
--navbar-color: #292c3c !important;
--navbar-height: 60px !important;
--navbar-text-color: #c6d0f5 !important;
--navbar-link-color: #8caaee !important;
--navbar-link-hover-color: #ca9ee6 !important;
--navbar-font: "Roboto" !important;
--input-text-color: #c6d0f5 !important;
--input-placeholder-color: #a5adce !important;
--input-background-color: #232634 !important;
--input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #232634 !important;
--tab-color: #414559 !important;
--active-color: #ca9ee6 !important;
}
.catppuccin-latte {
--background-primary: #eff1f5 !important;
--background-lighter: #e6e9ef !important;
--navbar-color: #e6e9ef !important;
--navbar-height: 60px !important;
--navbar-text-color: #4c4f69 !important;
--navbar-link-color: #1e66f5 !important;
--navbar-link-hover-color: #8839ef !important;
--navbar-font: "Roboto" !important;
--input-text-color: #4c4f69 !important;
--input-placeholder-color: #6c6f85 !important;
--input-background-color: #dce0e8 !important;
--input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important;
--input-border-size: 1.3px !important;
--navbar-logo-filter: none !important;
--dropdown-option-hover-color: #dce0e8 !important;
--tab-color: #ccd0da !important;
--active-color: #8839ef !important;
}
}
body { body {
background-color: var(--background-primary) !important; background-color: var(--background-primary) !important;
} }
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}