Fix: Dark & Light mode

Fix: homepage having only light header and rest page in dark mode, now all adapts to one theme either light or dark
astrolicious · May 14, 2024 · d8363c1 · d8363c1
1 parent f887314
commit d8363c1
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 16 deletions.
diff --git a/www/web/src/components/FeatureCard.astro b/www/web/src/components/FeatureCard.astro
@@ -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'>
+    <div class='flex items-center justify-center gap-2 pb-6 '>
       <Icon
         name={icon}
-        class='h-8 w-8 stroke-black stroke-[0.1px] text-white'
+        class='h-8 w-8 stroke-black stroke-[0.1px] text-[--purple-900] dark:text-white'
       />
       <p>{feature}</p>
     </div>

diff --git a/www/web/src/components/Footer.astro b/www/web/src/components/Footer.astro
@@ -3,9 +3,7 @@ import { Icon } from 'astro-icon/components'
 import { DISCORD_URL, GITHUB_URL } from '../constants'
 ---
 
-<footer
-  class='h-footer mx-auto flex items-center justify-around gap-4 border-t border-white'
->
+<footer class='h-footer mx-auto flex items-center justify-around gap-4 border-t border-black dark:border-white ' >
   <p class='font-bold'>
     {new Date().getFullYear()} - Astro StudioCMS
   </p>

diff --git a/www/web/src/components/Marquee.astro b/www/web/src/components/Marquee.astro
@@ -3,9 +3,7 @@ import { marqueeKeywords } from '../constants'
 import { Icon } from 'astro-icon/components'
 ---
 
-<div
-  class='relative flex w-full overflow-x-hidden bg-transparent py-8 text-white'
->
+<div class='relative flex w-full overflow-x-hidden bg-transparent py-8  text-[--purple-900] dark:text-white' >
   <div class='animate-marquee infinite whitespace-nowrap'>
     {
       marqueeKeywords.map((keyword) => (

diff --git a/www/web/src/layouts/BaseLayout.astro b/www/web/src/layouts/BaseLayout.astro
@@ -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'
   lang='en'
 >
   <Head />

diff --git a/www/web/src/styles/global.css b/www/web/src/styles/global.css
@@ -7,11 +7,12 @@
     --purple-900: #05040b;
     --blob-dark: #9287ee;
     --blob-light: #201b4b;
+    --slate-100: #f1f5f9;
   }
 
   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];
+    font-family: "zenkaku";
   }
 
   h1,
@@ -20,7 +21,7 @@
   h4,
   h5,
   h6 {
-    font-family: 'BalooChettan';
+    font-family: "BalooChettan";
   }
 
   p,
@@ -39,7 +40,7 @@
   @property --border-angle {
     inherits: false;
     initial-value: 0deg;
-    syntax: '<angle>';
+    syntax: "<angle>";
   }
 
   /* Blob Stuff from Hero */
@@ -59,13 +60,13 @@
     0%,
     100% {
       d: path(
-        'M220,385.8273055342337C248.39615825889206,381.167183129318,280.9599765571336,397.76351752808483,304.9841490714021,381.92376753960633C329.24623092097823,365.92715785537933,323.9907548452582,326.9037429300551,342.8736616926638,304.81356488511307C364.79889773768565,279.16431650265565,413.27769525145663,277.0638361938195,422.3914549749332,244.5747718502953C431.0593472191653,213.675152221288,406.8388488739389,180.42788444113404,384.12615707699865,157.7551589650878C363.35163255849193,137.01719027716027,323.0456362559054,147.66390277512335,303.4320453629619,125.82468881134382C279.81903484703105,99.53222702802378,297.392190658305,46.425277274294714,267.3820071648304,27.763640182635548C240.94433397118118,11.323545346326224,207.99858236041462,41.33457823571158,177.48368271752383,47.50452004300171C145.54362405346268,53.96262102268501,110.36904512532422,47.776882305937036,82.76384119077991,65.09239937761795C54.03037061639758,83.11562794854541,24.75814671221351,111.13946507706144,22.123214798039925,144.9552340787633C19.375292243452307,180.22108434254352,54.21004912917232,206.29428537014098,69.26729166299219,238.30226438274195C79.64459528062585,260.3618490413907,90.58154888209391,281.26906395370946,97.27556164074818,304.71056345505576C107.48320771599852,340.4563170127475,87.98379889361324,391.94817506742413,118.99632822173862,412.44641793058116C148.47065579023234,431.92796096548943,185.1355575040422,391.5489446422081,220,385.8273055342337'
+        "M220,385.8273055342337C248.39615825889206,381.167183129318,280.9599765571336,397.76351752808483,304.9841490714021,381.92376753960633C329.24623092097823,365.92715785537933,323.9907548452582,326.9037429300551,342.8736616926638,304.81356488511307C364.79889773768565,279.16431650265565,413.27769525145663,277.0638361938195,422.3914549749332,244.5747718502953C431.0593472191653,213.675152221288,406.8388488739389,180.42788444113404,384.12615707699865,157.7551589650878C363.35163255849193,137.01719027716027,323.0456362559054,147.66390277512335,303.4320453629619,125.82468881134382C279.81903484703105,99.53222702802378,297.392190658305,46.425277274294714,267.3820071648304,27.763640182635548C240.94433397118118,11.323545346326224,207.99858236041462,41.33457823571158,177.48368271752383,47.50452004300171C145.54362405346268,53.96262102268501,110.36904512532422,47.776882305937036,82.76384119077991,65.09239937761795C54.03037061639758,83.11562794854541,24.75814671221351,111.13946507706144,22.123214798039925,144.9552340787633C19.375292243452307,180.22108434254352,54.21004912917232,206.29428537014098,69.26729166299219,238.30226438274195C79.64459528062585,260.3618490413907,90.58154888209391,281.26906395370946,97.27556164074818,304.71056345505576C107.48320771599852,340.4563170127475,87.98379889361324,391.94817506742413,118.99632822173862,412.44641793058116C148.47065579023234,431.92796096548943,185.1355575040422,391.5489446422081,220,385.8273055342337"
       );
     }
 
     50% {
       d: path(
-        'M220,338.49912874474137C248.53667679100684,347.35312728923105,270.9921000897459,374.9242731944491,300.8583507950429,374.06271570445523C332.340079573782,373.1545562071379,364.19576181333656,357.5751305246687,384.78871459003443,333.7454369364718C405.74173877821903,309.49907695280257,411.6529638659701,275.4979471579871,413.6730204701067,243.51616224212586C415.6349390625706,212.4548254864525,410.24583674836725,180.94892387590494,396.1938138852672,153.17850041734542C382.76956741765184,126.64872512095738,361.2250807577387,104.64650758305251,335.693670079825,89.40884243067964C312.1440350051041,75.35394126379691,282.3498281974558,80.42631983227328,256.95279259191966,70.07662701487561C226.24922245631964,57.56443763039423,202.63112410301528,11.570676078698494,171.29986146970907,22.41577100993948C138.4815074017223,33.775612121993575,146.720038059508,86.44798945497844,127.0231650173659,115.05084851110419C113.05143390790873,135.3399296682435,80.04135961446278,140.68957397155495,73.49791636206247,164.43908838340295C66.87190727242846,188.48827660087136,87.52380790408297,211.1930798377238,93.8887417124125,235.3126790879335C99.35788589966076,256.03772824169096,96.06270758117269,279.50517741190816,108.4743630770462,296.9805889497898C120.85217248119821,314.4083457342843,141.75506694338674,323.4559099475903,161.78798653646587,330.91372496019517C180.3968506104617,337.8413954484506,201.03530852299298,332.615004536311,220,338.49912874474137'
+        "M220,338.49912874474137C248.53667679100684,347.35312728923105,270.9921000897459,374.9242731944491,300.8583507950429,374.06271570445523C332.340079573782,373.1545562071379,364.19576181333656,357.5751305246687,384.78871459003443,333.7454369364718C405.74173877821903,309.49907695280257,411.6529638659701,275.4979471579871,413.6730204701067,243.51616224212586C415.6349390625706,212.4548254864525,410.24583674836725,180.94892387590494,396.1938138852672,153.17850041734542C382.76956741765184,126.64872512095738,361.2250807577387,104.64650758305251,335.693670079825,89.40884243067964C312.1440350051041,75.35394126379691,282.3498281974558,80.42631983227328,256.95279259191966,70.07662701487561C226.24922245631964,57.56443763039423,202.63112410301528,11.570676078698494,171.29986146970907,22.41577100993948C138.4815074017223,33.775612121993575,146.720038059508,86.44798945497844,127.0231650173659,115.05084851110419C113.05143390790873,135.3399296682435,80.04135961446278,140.68957397155495,73.49791636206247,164.43908838340295C66.87190727242846,188.48827660087136,87.52380790408297,211.1930798377238,93.8887417124125,235.3126790879335C99.35788589966076,256.03772824169096,96.06270758117269,279.50517741190816,108.4743630770462,296.9805889497898C120.85217248119821,314.4083457342843,141.75506694338674,323.4559099475903,161.78798653646587,330.91372496019517C180.3968506104617,337.8413954484506,201.03530852299298,332.615004536311,220,338.49912874474137"
       );
     }
   }

diff --git a/www/web/tailwind.config.mjs b/www/web/tailwind.config.mjs
@@ -29,4 +29,5 @@ export default {
     },
   },
   plugins: [require('tailwind-scrollbar')],
+  darkMode: "class"
 }