Comments (4)
from ui.
Hello @kariemoorman. I would like to work on this.
from ui.
This is my implementation in tauri-ui-boilerplate.
export function ThemeToggle() {
const { setTheme, theme, systemTheme } = useTheme()
const [currentTheme, setCurrentTheme] = useState("")
useEffect(() => {
setCurrentTheme(
theme === "system"
? systemTheme === "light"
? "light"
: "dark"
: theme === "light"
? "light"
: "dark"
)
}, [theme, systemTheme])
const ThemeIcon = Icons[currentTheme === "light" ? "sun" : "moon"]
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<ThemeIcon className="hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100" />
...
https://github.com/agmmnn/tauri-ui-boilerplate/blob/master/src/components/theme-toggle.tsx
from ui.
I found a solution to this. Its due to hydration mismatch for. Refer to this doc https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
from ui.
Related Issues (20)
- [bug]: Breadcrumb resposive example has bugs HOT 2
- [bug]: `bun add` fails when running add components in a monorepo HOT 2
- [bug]: "edit in v0" button is layer above navigation bar in /blocks page HOT 1
- [bug]: Cannot Modify div with style="min-width:100%;display:table" in ScrollArea Component, Causes Overflow HOT 2
- [bug]: Form elements has id and label for attribute as (undefined)
- [bug]: Sheet has no style
- [bug]: text not visible in Light mode HOT 2
- [bug]: shadcn dialog with react hook forms and zod validation close button issue HOT 4
- [bug]: When FormDescription is not used there is an id still applied to aria-describedby causing Arc Toolkit errrors HOT 1
- [feat]: provide information about the integration of icon component HOT 2
- [bug]: Select component not scrolling inside Sheet component. HOT 1
- [bug]: CLI errors when using relative path as util alias
- [feat]: Code Block component HOT 3
- [bug]: CommandItem not updating on asynchronous changes HOT 1
- [bug]: Install behind corporation proxy
- [feat]: Switches with icons HOT 2
- [bug]: charts needs improvements in vue HOT 2
- [bug]: Default styles are not applied when using Remix + Vite. HOT 1
- [feat]: an easy way to override text size for components HOT 1
- new component for loader and to create a sign up block with an image (lift mode) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.