Add dark mode (#300)

docs/.vuepress/components/ContactForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <p class="text-gray-600 mb-8">Wir freuen uns auf Ihre Nachricht. Als Ansprechpartner steht Ihnen <strong>Ulf Gebhardt</strong> für Ihre Fragen gerne zur Verfügung.</p>
+  <p class="text-gray-600 dark:text-gray-300 mb-8">Wir freuen uns auf Ihre Nachricht. Als Ansprechpartner steht Ihnen <strong>Ulf Gebhardt</strong> für Ihre Fragen gerne zur Verfügung.</p>
 
   <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
     <!-- Left side: Portrait - takes 2/5 of space -->
@@ -164,4 +164,4 @@ button {
     background-color: color-mix(in srgb, var(--highlight-color), black 15%);
   }
 }
-</style>
+</style>

docs/.vuepress/components/ContentSection.vue

@@ -19,7 +19,7 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: 'bg-white'
+      default: 'bg-white dark:bg-gray-900'
     },
     id: {
       type: String,
@@ -27,4 +27,4 @@ export default {
     }
   }
 }
-</script>
+</script>

docs/.vuepress/components/ProcessStep.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="col-span-9 pt-0 sm:pt-2">
       <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
-      <p class="text-gray-600">{{ description }}</p>
+      <p class="text-gray-600 dark:text-gray-300">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -22,4 +22,4 @@ defineProps<{
 .highlight-number {
   color: var(--highlight-color);
 }
-</style>
+</style>

docs/.vuepress/components/ProjectCard.vue

@@ -3,7 +3,7 @@
     <div class="border border-gray-300 rounded-lg p-6">
       <img :src="image" :alt="title" class="rounded-lg mb-4 w-full h-auto object-contain">
       <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
-      <p class="text-gray-600 mb-4">{{ description }}</p>
+      <p class="text-gray-600 dark:text-gray-300 mb-4">{{ description }}</p>
       <div class="flex flex-wrap gap-2">
         <span
             v-for="tag in tags"
@@ -32,4 +32,4 @@ defineProps<{
   color: var(--highlight-color);
   background: var(--highlight-color-light);
 }
-</style>
+</style>

docs/.vuepress/components/ServiceCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="p-6 border border-gray-300 rounded-lg">
     <h3 class="text-xl font-semibold mb-4">{{ title }}</h3>
-    <ul class="space-y-2 text-gray-600">
+    <ul class="space-y-2 text-gray-600 dark:text-gray-300">
       <li v-for="item in items" :key="item">{{ item }}</li>
     </ul>
   </div>

docs/.vuepress/components/TeamMember.vue

@@ -17,10 +17,10 @@
       </div>
     </div>
 
-    <h4 class="font-semibold text-gray-900 transition-colors duration-200 group-hover:text-gray-600">
+    <h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">
       {{ name }}
     </h4>
-    <p class="text-sm text-gray-600">{{ role }}</p>
+    <p class="text-sm text-gray-600 dark:text-gray-300">{{ role }}</p>
   </a>
 </template>
 
@@ -37,4 +37,4 @@
   .overlay-bg {
     background-color: var(--highlight-color-light);
   }
-</style>
+</style>

docs/.vuepress/layouts/BlankLayout.vue

@@ -18,6 +18,8 @@ export default {
 @import "tailwindcss/preflight.css" layer(base);
 @import "tailwindcss/utilities.css" layer(utilities);
 
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
 /* Conflicts with vuepress */
 @layer base {
   .vp-sidebar {
@@ -54,4 +56,4 @@ export default {
     padding: 0 1rem;
   }
 }
-</style>
+</style>

docs/.vuepress/styles/index.scss

@@ -17,4 +17,4 @@ h1, h2, h3, h4, h5, h6 {
 
 .font-sourcesans {
   font-family: 'Source Sans 3', sans-serif !important;
-}
+}

docs/index.md

@@ -4,9 +4,9 @@ layout: BlankLayout
 
 <section class="full-width-section h-screen relative">
   <!-- Desktop background image -->
-  <img 
+  <img
-    src="/images/hero-bg-desktop.jpg" 
+    src="/images/hero-bg-desktop.jpg"
-    alt="Softwareentwicklung für eine bessere Welt" 
+    alt="Softwareentwicklung für eine bessere Welt"
     class="w-full h-screen object-cover hidden md:block"
   />
 
@@ -24,12 +24,12 @@ layout: BlankLayout
   </div>
 
   <!-- Mobile gradient -->
-  <div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent" 
+  <div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent"
        style="height: 70vh;">
   </div>
 
   <!-- XS Mobile gradient -->
-  <div class="absolute left-0 right-0 bottom-0 sm:hidden" 
+  <div class="absolute left-0 right-0 bottom-0 sm:hidden"
        style="height: 80vh; background-image: linear-gradient(to top, #22596c 70%, transparent 100%);">
   </div>
 
@@ -41,26 +41,26 @@ layout: BlankLayout
       <!-- Für Mobile: Am unteren Rand fixiert ohne margin -->
       <div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative">
         <div
-          role="heading" 
+          role="heading"
           aria-level="1"
           class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white text-center sm:text-left font-montserrat leading-tight text-shadow"
         >
           Software­entwicklung für eine bessere Welt
         </div>
-        <p 
+        <p
           class="text-xl md:text-2xl text-white text-center sm:text-left font-sourcesans mb-8 max-w-2xl text-shadow-sm"
         >
           Wir sind Softwareentwickler, die deine alternative Vision verstehen und umsetzen. Mit technischer Expertise und persönlicher Betreuung unterstützen wir Projekte, die Positives bewirken.
         </p>
         <div class="flex flex-col sm:flex-row gap-4">
-          <a 
+          <a
-            href="#kontakt" 
+            href="#kontakt"
             class="hero-button hero-button-primary px-6 py-3 bg-[#ececec] !text-black rounded-full font-medium text-center shadow-md no-underline relative overflow-hidden"
           >
             <span class="relative z-10">Projekt starten</span>
           </a>
-          <a 
+          <a
-            href="#leistungen" 
+            href="#leistungen"
             class="hero-button hero-button-secondary px-6 py-3 bg-black/20 !text-white rounded-full font-medium text-center border border-white shadow-md no-underline relative overflow-hidden"
           >
             <span class="relative z-10">Unsere Leistungen</span>
@@ -96,7 +96,7 @@ layout: BlankLayout
   </div>
 </ContentSection>
 
-<ContentSection id="team" title="Team & Werte" backgroundColor="bg-gray-50">
+<ContentSection id="team" title="Team & Werte" backgroundColor="bg-gray-50 dark:bg-gray-800">
   <p>Wir glauben an die Kraft von Technologie für positiven Wandel. Unser Team verbindet technische Expertise mit nachhaltigem Denken und sozialer Verantwortung.</p>
   <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10">
     <TeamMember
@@ -163,7 +163,7 @@ layout: BlankLayout
   </div>
 </ContentSection>
 
-<ContentSection id="prozess" title="Unser Prozess" backgroundColor="bg-gray-50">
+<ContentSection id="prozess" title="Unser Prozess" backgroundColor="bg-gray-50 dark:bg-gray-800">
   <ProcessStep
     number="1"
     title="Kennenlernen & Vision"
@@ -193,7 +193,7 @@ layout: BlankLayout
 <style lang="scss">
   .text-shadow {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-    
+
     &-sm {
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     }
@@ -209,7 +209,7 @@ layout: BlankLayout
 
     &-button {
       transition: transform 0.3s ease, box-shadow 0.3s ease;
-      
+
       &:hover {
         transform: translateY(-3px);
         box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -244,4 +244,4 @@ layout: BlankLayout
     }
   }
 
-</style>
+</style>