happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: theme selector

This commit is contained in:
Steven 2025-08-18 20:08:53 +08:00
parent fbcdf0fba7
commit e07e9f2e9f
2 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/AuthFooter.tsx
View File

@ -9,14 +9,10 @@ interface Props {
} }
const AuthFooter = observer(({ className }: Props) => { const AuthFooter = observer(({ className }: Props) => {
const handleLocaleSelectChange = (locale: Locale) => {
workspaceStore.state.setPartial({ locale });
};
return ( return (
<div className={cn("mt-4 flex flex-row items-center justify-center w-full gap-2", className)}> <div className={cn("mt-4 flex flex-row items-center justify-center w-full gap-2", className)}>
<LocaleSelect value={workspaceStore.state.locale} onChange={handleLocaleSelectChange} /> <LocaleSelect value={workspaceStore.state.locale} onChange={(locale) => workspaceStore.state.setPartial({ locale })} />
<ThemeSelect /> <ThemeSelect value={workspaceStore.state.theme} onValueChange={(theme) => workspaceStore.state.setPartial({ theme })} />
</div> </div>
); );
}); });

32
web/src/components/ThemeSelect.tsx
View File

@ -1,6 +1,5 @@
import { Moon, Palette, Sun, Wallpaper } from "lucide-react"; import { Moon, Palette, Sun, Wallpaper } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { workspaceStore } from "@/store"; import { workspaceStore } from "@/store";
interface ThemeSelectProps { interface ThemeSelectProps {
@ -27,25 +26,24 @@ const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {})
} }
}; };
const currentThemeOption = themeOptions.find((option) => option.value === currentTheme);
return ( return (
<DropdownMenu> <Select value={currentTheme} onValueChange={handleThemeChange}>
<DropdownMenuTrigger asChild> <SelectTrigger className={className}>
<Button variant="outline" className={`justify-start ${className || ""}`}> <div className="flex items-center gap-2">
{currentThemeOption?.icon} <SelectValue placeholder="Select theme" />
<span className="ml-2">{currentThemeOption?.label}</span> </div>
</Button> </SelectTrigger>
</DropdownMenuTrigger> <SelectContent>
<DropdownMenuContent align="start">
{themeOptions.map((option) => ( {themeOptions.map((option) => (
<DropdownMenuItem key={option.value} onClick={() => handleThemeChange(option.value)}> <SelectItem key={option.value} value={option.value}>
<div className="flex items-center gap-2">
{option.icon} {option.icon}
<span className="ml-2">{option.label}</span> <span>{option.label}</span>
</DropdownMenuItem> </div>
</SelectItem>
))} ))}
</DropdownMenuContent> </SelectContent>
</DropdownMenu> </Select>
); );
}; };