dark background

4 files changed, 24 insertions, 16 deletions

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 694a198..fd99458 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -37,14 +37,14 @@ const {
     tagline={tagline}
     classes={{
       container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
-      title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
-      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
+      title: `text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`,
+      subtitle: `max-w-3xl mx-auto sm:text-center text-xl ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'}`,
     }}
   />
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
-        {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
+        {content && <div class={`mb-12 text-lg ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'dark:text-slate-400'}`} set:html={content} />}
 
         {
           callToAction && (
@@ -61,10 +61,10 @@ const {
           classes={{
             container: `gap-y-4 md:gap-y-8`,
             panel: 'max-w-none',
-            title: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
-            description: 'text-muted dark:text-slate-400 ml-2 rtl:ml-0 rtl:mr-2',
+            title: `text-lg font-medium leading-6 ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : 'dark:text-white'} ml-2 rtl:ml-0 rtl:mr-2`,
+            description: `${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'} ml-2 rtl:ml-0 rtl:mr-2`,
             icon: 'flex h-7 w-7 items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-gray-50 p-1',
-            action: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
+            action: `text-lg font-medium leading-6 ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : 'dark:text-white'} ml-2 rtl:ml-0 rtl:mr-2`,
           }}
         />
       </div>
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
index 55501ff..3008984 100644
--- a/src/components/widgets/Footer.astro
+++ b/src/components/widgets/Footer.astro
@@ -24,10 +24,10 @@ export interface Props {
 const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
 ---
 
-<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
-  <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
+<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose bg-black text-white']}>
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div
-    class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300 intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
+    class="relative max-w-7xl mx-auto px-4 sm:px-6 text-white intersect-once intersect-quarter intercept-no-queue motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
   >
     <div class="md:flex md:items-center md:justify-between py-6 md:py-8">
       {
@@ -36,7 +36,7 @@ const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
             {socialLinks.map(({ ariaLabel, href, text, icon }) => (
               <li>
                 <a
-                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                  class="text-gray-300 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
                   aria-label={ariaLabel}
                   href={href}
                 >
@@ -51,7 +51,7 @@ const { socialLinks = [], footNote = '', theme = 'light' } = Astro.props;
         )
       }
 
-      <div class="text-sm mr-4 dark:text-muted">
+      <div class="text-sm mr-4 text-gray-300">
         <Fragment set:html={footNote} />
       </div>
     </div>
diff --git a/src/components/widgets/Portfolio.astro b/src/components/widgets/Portfolio.astro
index d4016a7..9aaeee0 100644
--- a/src/components/widgets/Portfolio.astro
+++ b/src/components/widgets/Portfolio.astro
@@ -21,7 +21,15 @@ const {
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
-  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+  <Headline 
+    title={title} 
+    subtitle={subtitle} 
+    tagline={tagline}
+    classes={{
+      title: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : '',
+      subtitle: typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400',
+    }}
+  />
 
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 7a84282..23cd72a 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -39,8 +39,8 @@ function makeEmailsClickable(text: string | undefined): string {
         tagline={tagline}
         classes={{
           container: 'text-center md:text-left rtl:md:text-right mb-4 md:mb-8',
-          title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
-          subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
+          title: `mb-4 text-3xl lg:text-4xl font-bold font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`,
+          subtitle: `mb-8 text-xl ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-slate-400'}`,
           // ...((classes?.headline as {}) ?? {}),
         }}
       />
@@ -69,9 +69,9 @@ function makeEmailsClickable(text: string | undefined): string {
                     </span>
                   </div>
                   <div class="pl-4 rtl:pl-0 rtl:pr-4">
-                    <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
+                    <h3 class={`mb-4 text-xl font-semibold font-heading ${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-white' : ''}`} set:html={title2} />
                     <p
-                      class="text-muted dark:text-gray-400"
+                      class={`${typeof classes?.container === 'string' && classes.container.includes('text-white') ? 'text-gray-300' : 'text-muted dark:text-gray-400'}`}
                       set:html={description ? makeEmailsClickable(description) : ''}
                     />
                   </div>