Fix: Dark & Light mode #82
Conversation
|
@anmol-fzr Hey! Thank you so much for this PR! 💪 I'm just looking at it on the preview and it doesn't seem to change based on what preference you've set in the browser. I'm on latest Chrome on Windows. Also changing in the But when I remove the |
www/web/tailwind.config.mjs
Outdated
| @@ -29,4 +29,5 @@ export default { | |||
| }, | |||
| }, | |||
| plugins: [require('tailwind-scrollbar')], | |||
| darkMode: "class" | |||
There was a problem hiding this comment.
| darkMode: "class" | |
| darkMode: "selector" |
The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
src: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
Adammatthiesen
added
bug
| @@ -13,11 +13,11 @@ const { icon, description, feature } = Astro.props | |||
| <div | |||
| class='animate-border rounded-lg border border-transparent [background:linear-gradient(45deg,#172033,theme(colors.slate.800)_50%,#172033)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.600/.48)_80%,_theme(colors.indigo.500)_86%,_theme(colors.indigo.300)_90%,_theme(colors.indigo.500)_94%,_theme(colors.slate.600/.48))_border-box]' | |||
| > | |||
| <div class='h-full place-self-center rounded-lg bg-[--purple-900] p-10'> | |||
| <div class='flex items-center justify-center gap-2 pb-6'> | |||
| <div class='h-full place-self-center rounded-lg bg-[--slate-100] dark:bg-[--purple-900] p-10'> | |||
There was a problem hiding this comment.
--slate-100 is not a defined variable in globals.css it should be updated to bg-slate-100
www/web/src/layouts/BaseLayout.astro
Outdated
| @@ -6,7 +6,7 @@ import Footer from '../components/Footer.astro' | |||
| --- | |||
|
|
|||
| <html | |||
| class='scrollbar scrollbar-thumb-white scrollbar-track-[#1a172e] h-32 overflow-y-scroll' | |||
| class='scrollbar scrollbar-thumb-white scrollbar-track-[#1a172e] h-32 overflow-y-scroll dark' | |||
There was a problem hiding this comment.
dark in itself is just a variant for tailwind, best to remove this as its not doing anything
www/web/src/styles/global.css
Outdated
| } | ||
|
|
||
| body { | ||
| @apply bg-[--purple-900] text-white dark:bg-[--purple-900] dark:text-slate-100; | ||
| font-family: 'zenkaku'; | ||
| @apply bg-[--slate-100] text-[--purple-900] dark:bg-[--purple-900] dark:text-[--slate-100]; |
There was a problem hiding this comment.
similar suggestion bg-slate-100 text-[--purple-900] dark:bg-[--purple-900] dark:text-slate-100;
|
The preview deployment is in progress. 🟡 Last updated at: 2024-05-16 15:39:45 CET |
Fix: homepage having only light header and rest page in dark mode, now all adapts to one theme either light or dark
Description