klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 13:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve handling of dark mode theme in order to avoid jitter when loading new page

Browse Source
This commit is contained in:
sabaimran
2025-02-06 16:17:58 -08:00
parent 2e01a95cf1
commit 43e032e25a
12 changed files with 166 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/web/app/components/appSidebar/appSidebar.tsx
View File

@@ -22,7 +22,7 @@ import { useEffect, useState } from "react";
import AllConversations from "../allConversations/allConversations";
import FooterMenu from "../navMenu/navMenu";
import { useSidebar } from "@/components/ui/sidebar";
import { useIsMobileWidth } from "@/app/common/utils";
import { useIsDarkMode, useIsMobileWidth } from "@/app/common/utils";
import { UserPlusIcon } from "lucide-react";
import { useAuthenticatedData, UserProfile } from "@/app/common/auth";
import LoginPrompt from "../loginPrompt/loginPrompt";

38
src/interface/web/app/components/navMenu/navMenu.tsx
View File

@@ -13,7 +13,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Moon, Sun, UserCircle, Question, ArrowRight, Code, BuildingOffice } from "@phosphor-icons/react";
import { useIsMobileWidth } from "@/app/common/utils";
import { useIsDarkMode, useIsMobileWidth } from "@/app/common/utils";
import LoginPrompt from "../loginPrompt/loginPrompt";
import { Button } from "@/components/ui/button";
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
@@ -49,44 +49,10 @@ export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) {
error: authenticationError,
isLoading: authenticationLoading,
} = useAuthenticatedData();
const [darkMode, setDarkMode] = useState(false);
const [initialLoadDone, setInitialLoadDone] = useState(false);
const [darkMode, setDarkMode] = useIsDarkMode();
const [showLoginPrompt, setShowLoginPrompt] = useState(false);
const isMobileWidth = useIsMobileWidth();
useEffect(() => {
if (localStorage.getItem("theme") === "dark") {
document.documentElement.classList.add("dark");
setDarkMode(true);
} else if (localStorage.getItem("theme") === "light") {
document.documentElement.classList.remove("dark");
setDarkMode(false);
} else {
const mq = window.matchMedia("(prefers-color-scheme: dark)");
if (mq.matches) {
document.documentElement.classList.add("dark");
setDarkMode(true);
}
}
setInitialLoadDone(true);
}, []);
useEffect(() => {
if (!initialLoadDone) return;
toggleDarkMode(darkMode);
}, [darkMode, initialLoadDone]);
function toggleDarkMode(darkMode: boolean) {
if (darkMode) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
localStorage.setItem("theme", darkMode ? "dark" : "light");
}
const menuItems = [
{
title: "Help",

8
src/interface/web/app/components/providers/themeProvider.tsx Normal file
View File

@@ -0,0 +1,8 @@
'use client'
import { useIsDarkMode } from '@/app/common/utils'
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [darkMode, setDarkMode] = useIsDarkMode();
return <>{children}</>;
}