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 -->

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,

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>

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"

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>
 

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 {

docs/index.md

@@ -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"