sij/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2025-05-02 17:07:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refresh theme without reloading page

Browse source
This commit is contained in:
timothycarambat 2024-11-19 20:38:07 -08:00
parent af16332c41
commit 363f51ab51
2 changed files with 32 additions and 24 deletions

39
frontend/src/LogoContext.jsx
View file

@ -5,6 +5,7 @@ import DefaultLoginLogoLight from "./media/illustrations/login-logo.svg";
import DefaultLoginLogoDark from "./media/illustrations/login-logo-light.svg";
import System from "./models/system";
export const REFETCH_LOGO_EVENT = "refetch-logo";
export const LogoContext = createContext();
export function LogoProvider({ children }) {
@ -16,32 +17,36 @@ export function LogoProvider({ children }) {
? DefaultLoginLogoDark
: DefaultLoginLogoLight;
useEffect(() => {
async function fetchInstanceLogo() {
try {
const { isCustomLogo, logoURL } = await System.fetchLogo();
if (logoURL) {
setLogo(logoURL);
setLoginLogo(isCustomLogo ? logoURL : DefaultLoginLogo);
setIsCustomLogo(isCustomLogo);
} else {
localStorage.getItem("theme") !== "default"
? setLogo(AnythingLLMDark)
: setLogo(AnythingLLM);
setLoginLogo(DefaultLoginLogo);
setIsCustomLogo(false);
}
} catch (err) {
async function fetchInstanceLogo() {
try {
const { isCustomLogo, logoURL } = await System.fetchLogo();
if (logoURL) {
setLogo(logoURL);
setLoginLogo(isCustomLogo ? logoURL : DefaultLoginLogo);
setIsCustomLogo(isCustomLogo);
} else {
localStorage.getItem("theme") !== "default"
? setLogo(AnythingLLMDark)
: setLogo(AnythingLLM);
setLoginLogo(DefaultLoginLogo);
setIsCustomLogo(false);
console.error("Failed to fetch logo:", err);
}
} catch (err) {
localStorage.getItem("theme") !== "default"
? setLogo(AnythingLLMDark)
: setLogo(AnythingLLM);
setLoginLogo(DefaultLoginLogo);
setIsCustomLogo(false);
console.error("Failed to fetch logo:", err);
}
}
useEffect(() => {
fetchInstanceLogo();
window.addEventListener(REFETCH_LOGO_EVENT, fetchInstanceLogo);
return () => {
window.removeEventListener(REFETCH_LOGO_EVENT, fetchInstanceLogo);
};
}, []);
return (

17
frontend/src/hooks/useTheme.js
View file

@ -1,3 +1,4 @@
import { REFETCH_LOGO_EVENT } from "@/LogoContext";
import { useState, useEffect } from "react";
const availableThemes = {
@ -26,6 +27,7 @@ export function useTheme() {
document.documentElement.setAttribute("data-theme", theme);
document.body.classList.toggle("light", theme === "light");
localStorage.setItem("theme", theme);
window.dispatchEvent(new Event(REFETCH_LOGO_EVENT));
}, [theme]);
// In development, attach keybind combinations to toggle theme
@ -34,20 +36,21 @@ export function useTheme() {
function toggleOnKeybind(e) {
if (e.metaKey && e.key === ".") {
e.preventDefault();
const newTheme = theme === "light" ? "default" : "light";
console.log("toggling theme to ", newTheme);
setTheme(newTheme);
setTheme((prev) => (prev === "light" ? "default" : "light"));
}
}
document.addEventListener("keydown", toggleOnKeybind);
return () => document.removeEventListener("keydown", toggleOnKeybind);
}, []);
// Refresh on theme change
const setTheme = (newTheme) => {
/**
* Sets the theme of the application and runs any
* other necessary side effects
* @param {string} newTheme The new theme to set
*/
function setTheme(newTheme) {
_setTheme(newTheme);
window.location.reload();
};
}
return { theme, setTheme, availableThemes };
}