updated system theme: #102
Conversation
|
can you check once |
There was a problem hiding this comment.
System theme selection is not solved by this PR. At least it doesnt work on macos
I think window.matchMedia("(prefers-color-scheme: dark)").matches is not working for Tauri app.
My be this is what the following plugin try to solve: https://github.com/wyhaya/tauri-plugin-theme
| @@ -40,6 +40,7 @@ | |||
| "date-fns": "^3.6.0", | |||
| "lodash": "^4.17.21", | |||
| "lucide-react": "^0.436.0", | |||
| "next-themes": "^0.3.0", | |||
There was a problem hiding this comment.
We dont need next-themes (I think this is for Nextjs app)
| </div> | ||
| </div> | ||
| <span className="block w-full p-2 text-center font-normal">Dark</span> | ||
| </FormLabel> | ||
| </FormItem> | ||
|
|
||
| <FormItem> |
There was a problem hiding this comment.
better use a half/half visualisation. something like this:
<FormItem> <FormLabel className="[&:has([data-state=checked])>div]:border-primary"> <FormControl> <RadioGroupItem value="system" className="sr-only" /> </FormControl> <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent"> <div className="flex rounded-sm"> <div className="w-1/2 space-y-2 rounded-l-sm bg-[#ecedef] p-2"> <div className="space-y-2 rounded-md bg-white p-2 shadow-sm"> <div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" /> <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> </div> <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"> <div className="h-4 w-4 rounded-full bg-[#ecedef]" /> <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> </div> </div> <div className="w-1/2 space-y-2 rounded-r-sm bg-slate-950 p-2"> <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm"> <div className="h-2 w-[20px] rounded-lg bg-slate-400" /> <div className="h-2 w-[30px] rounded-lg bg-slate-400" /> </div> <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"> <div className="h-4 w-4 rounded-full bg-slate-400" /> <div className="h-2 w-[100px] rounded-lg bg-slate-400" /> </div> </div> </div> </div> <span className="block w-full p-2 text-center font-normal">System</span> </FormLabel> </FormItem>
| // Define the types for themes | ||
| type Theme = "light" | "dark" | "system"; | ||
|
|
||
| export default function useTheme() { |
There was a problem hiding this comment.
this file should be removed as it's not used. Similar logic is already in settings-provider.
No description provided.