Possible light/dark mode for the page :) #38
Conversation
…ing the dark mode
…gleTheme component in page/index
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
web/src/layouts/Layout.astro
Outdated
| <div | ||
| class='absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]' | ||
| class='absolute inset-0 -z-10 h-full w-full bg-white dark:bg-zinc-950 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]' |
There was a problem hiding this comment.
@ivanosquis10 I would recommend a bg-zinc-900 as almost full black might not be best for dark mode.
There was a problem hiding this comment.
We should change it here..
| </button> | ||
| <div | ||
| id="themes-menu" | ||
| class="absolute opacity-0 scale-80 top-8 right-0 text-sm p-1 min-w-[8rem] rounded-md border border-gray-100 bg-white/90 dark:bg-zinc-900/70 dark:border-gray-500/20 shadow-[0_3px_10px_rgb(0,0,0,0.2)] backdrop-blur-md z-50" |
There was a problem hiding this comment.
@ivanosquis10 I would recommend a bg-zinc-900 as almost full black might not be best for dark mode.
There was a problem hiding this comment.
@ivanosquis10 I would recommend a
bg-zinc-900as almost full black might not be best for dark mode.
you say in the layout?
web/src/layouts/Layout.astro
Outdated
| <style is:global></style> | ||
| <style is:global> | ||
| :root { | ||
| color-scheme: light; |
There was a problem hiding this comment.
@ivanosquis10 we should add color-scheme: light dark;
web/src/layouts/Layout.astro
Outdated
| } | ||
|
|
||
| body { | ||
| color:rgba(0, 0, 0, 0.9) |
There was a problem hiding this comment.
@ivanosquis10 instead of full black something like background: #212121;
nice, thanks for the help :) |
…d the color of the body to a less strong black
Hi Midu, friends dev. I don't know if you like the idea but I still present it. I based it on the dark mode of another midu's project. Feel free to improve the code later if necessary 💯
portfolio dev: https://github.com/midudev/porfolio.dev/blob/main/src/components/ThemeToggle.astro
light:
dark:
