ahmedqaram
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
remove defaultTheme="system" enableSystem from
<Providers attribute="class" defaultTheme="system" enableSystem>
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
thanx and for u to know what the last soluation i came up is :
let src
switch (resolvedTheme) {
case 'light':
src = '/images/logo/logo-2.webp'
break
case 'dark':
src = '/images/logo/logo.webp'
break
default:
src = theme === 'light'? '/images/logo/logo-2.webp' : '/images/logo/logo.webp'
break
}
return (
<Image src={src} alt='logo' width = {40} height={30} /> )
<Image src={src} alt='logo' width = {40} height={30} /> )
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
thanx mate really apperciate that help
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
i'm using an open source project in generall so i just tweak it up and just use what i need from deleting the rest
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
give me ur twitter user i need to follow u
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
Yes, because prefers-color-scheme is based on the user's OS color scheme. i didn't get it right
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
and in first rendring it can never tell if i'm in dark or light
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
also this approach same as
srcSet={theme === 'dark'? dark : light}
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
where i can read about that
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
yeah that what i think about in first time
prefers-color-scheme
not working
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
you mean i should do this
<Image
src="/images/logo/logo.webp"
alt='logo'
width = {40}
height={30}
className=" image-b "
/>
<Image src="/images/logo/logo-2.webp" alt='logo' width = {40} height={30} className="image-a" /> yeah i did but i change it for something to test
<Image src="/images/logo/logo-2.webp" alt='logo' width = {40} height={30} className="image-a" /> yeah i did but i change it for something to test
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
i'm using next/theme
export function ThemeToggle() {
const { setTheme, theme } = useTheme()
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Icons.sun
className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
aria-hidden="true"
/>
<Icons.moon
className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
aria-hidden="true"
/>
<span className="sr-only">Toggle theme</span>
</Button>
)
}
and wrap my html with
<Providers attribute="class" defaultTheme="system" enableSystem>
here is provider component
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
import { TooltipProvider } from "@/components/ui/tooltip"
export function Providers({ children, ...props }: ThemeProviderProps) {
return (
<NextThemesProvider {...props}>
<TooltipProvider>{children}</TooltipProvider>
</NextThemesProvider>
)
}
and here is my tailwind config for that specific part
darkMode: ["class", '[data-mode="dark"]'],
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
it dosen't work either
in global.css :
.image-b {
display: none;
}
@media (prefers-color-scheme: dark) {
.image-a {
display: none;
}
.image-b {
display: inline;
}
}
in my component :
<>
<Image
src="/images/logo/logo.webp"
alt='logo'
width = {40}
height={30}
className=" image-b "
/>
<Image src="/images/logo/logo.webp" alt='logo' width = {40} height={30} className="image-a" /> </>
<Image src="/images/logo/logo.webp" alt='logo' width = {40} height={30} className="image-a" /> </>
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
"use two next/image elements and switch them with CSS."
i see this approach do u have an example to do so
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
the resulting html
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
but it's not working corectly in first mount for a component and that's wrong i believe i'ts not ment to working like so
if i need it to work then i should trigger toggle mode and hence will be working fine i guess in first mound of site it can't know what is theme or what but it's take much time and no one help me for bad to solve it
42 replies
TTCTheo's Typesafe Cult
•Created by ahmedqaram on 8/23/2023 in #questions
switch image based on light and dark mode doesn't work well ?
nothing and i confirm that toggling working corectly by debuging if theme is light or dark
on the other hand i was suspicious about (prefers-color-scheme ) but i make it working by adding this lines
export function Logos() {
const { setTheme, theme } = useTheme()
const common = { alt: 'logo' }
const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/images/logo/logos.webp' })
const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/images/logo/logos-2.webp' })
return (
<picture>
<source
srcSet={theme === 'dark'? dark : light} />
<img {...rest} width={0} height={0} sizes="100vw" style={{ width: "100%", height: "auto" }} /> </picture> ) }
<img {...rest} width={0} height={0} sizes="100vw" style={{ width: "100%", height: "auto" }} /> </picture> ) }
42 replies