fix: Improve colors in dark mode

Author: DannyvdSluijs

_media/app.css

@@ -1,25 +1,25 @@
 @extends('hyde::layouts.app')
 
 @section('content')
-    <div class="bg-gradient-to-b from-gray-50 to-white py-20">
+    <div class="bg-gradient-to-b from-slate-400 to-slate-50 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-400 py-20">
         <div class="max-w-5xl mx-auto text-center px-4">
             <!-- Logos -->
             <div class="flex items-center justify-center gap-6 mb-6">
                 <img src="media/json-schema-logo-blue.svg" alt="JSON Schema Logo" class="h-60 w-60 object-contain">
-                <span class="text-5xl font-bold text-gray-500">+</span>
+                <span class="text-5xl font-bold text-gray-500 dark:text-gray-100">+</span>
                 <img src="media/php-logo.svg" alt="PHP Logo" class="h-60 w-60 object-contain">
             </div>
 
             <!-- Title & Description -->
-            <h1 class="text-5xl font-bold text-gray-800">JSON Schema for PHP</h1>
-            <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
+            <h1 class="text-5xl font-bold text-stone-800 dark:text-stone-200">JSON Schema for PHP</h1>
+            <p class="mt-4 text-lg text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
                 Validate, interpret, and work with JSON Schemas in PHP — fully compatible with the specifications.
             </p>
 
             <!-- CTA -->
             <div class="mt-8">
                 <a href="{{ url('getting-started') }}"
-                   class="inline-block px-8 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow hover:bg-blue-700">
+                   class="inline-block px-8 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow hover:bg-blue-700 dark:bg-sky-400 dark:hover:bg-sky-500">
                     Get Started →
                 </a>
             </div>
@@ -28,32 +28,32 @@ class="inline-block px-8 py-3 bg-blue-600 text-white text-lg font-semibold round
 
     <!-- Features -->
     <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 py-16 px-4">
-        <div class="p-6 bg-white rounded-2xl shadow">
-            <h2 class="text-xl font-semibold text-gray-800 mb-2">Standards Compliant</h2>
-            <p class="text-gray-600">
-                Implements the official <a href="https://json-schema.org/specification" class="text-blue-600">JSON Schema specification</a>
+        <div class="p-6 bg-white rounded-2xl shadow dark:bg-slate-700">
+            <h2 class="text-xl font-semibold text-gray-800 dark:text-slate-200 mb-2 ">Standards Compliant</h2>
+            <p class="text-gray-600 dark:text-slate-200">
+                Implements the official <a href="https://json-schema.org/specification" class="text-blue-600 hover:text-blue-700 dark:text-sky-400 hover:underline dark:hover:text-sky-300">JSON Schema specification</a>
                 (Draft 3 and 4), ensuring predictable and reliable validation.
             </p>
         </div>
-        <div class="p-6 bg-white rounded-2xl shadow">
-            <h2 class="text-xl font-semibold text-gray-800 mb-2">Developer Friendly</h2>
-            <p class="text-gray-600">
+        <div class="p-6 bg-white dark:bg-slate-700 rounded-2xl shadow">
+            <h2 class="text-xl font-semibold text-gray-800 dark:text-slate-200 mb-2">Developer Friendly</h2>
+            <p class="text-gray-600 dark:text-slate-200">
                 Simple, expressive API designed for modern PHP projects. Integrates easily into frameworks like Laravel, Symfony, and more.
             </p>
         </div>
-        <div class="p-6 bg-white rounded-2xl shadow">
-            <h2 class="text-xl font-semibold text-gray-800 mb-2">Extensible</h2>
-            <p class="text-gray-600">
+        <div class="p-6 bg-white dark:bg-slate-700 rounded-2xl shadow">
+            <h2 class="text-xl font-semibold text-gray-800 dark:text-slate-200 mb-2">Extensible</h2>
+            <p class="text-gray-600 dark:text-slate-200">
                 Built with extensibility in mind — customize validation rules, add formats, or adapt to domain-specific requirements.
             </p>
         </div>
     </div>
 
     <!-- Example -->
-    <div class="bg-gray-50 py-16">
+    <div class="py-16">
         <div class="max-w-4xl mx-auto px-4">
-            <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Example</h2>
-            <pre class="bg-white rounded-lg shadow p-4 overflow-x-auto text-sm">
+            <h2 class="text-3xl font-bold mb-6 text-center">Example</h2>
+            <pre class="rounded-lg shadow p-4 overflow-x-auto text-sm">
 <code class="language-php">
 
 $schema = json_decode(file_get_contents('person.schema.json'));

_pages/index.blade.php

@@ -20,7 +20,7 @@
 <style>[x-cloak] {display: none!important}</style>
 
 
-    <link rel="stylesheet" href="media/app.css?v=c738313fddac0baf43cddf51e0a534ac">
+    <link rel="stylesheet" href="media/app.css?v=e00767a839006e2bdc599299f16662c7">
 
 
 
@@ -36,8 +36,8 @@
 
 
 </head>
-<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-900 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
-    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none dark:bg-gray-800">
+<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-800 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
+    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none bg-slate-400 dark:bg-slate-400">
     <div class="flex flex-grow items-center flex-shrink-0 text-gray-700 dark:text-gray-200">
         <a href="index.html" class="font-bold px-4" aria-label="Home page">
     JSON Schema for PHP
@@ -89,21 +89,21 @@
                     </ul>
     </div>
 </nav>
-    <section>
-        
+    <section class="">
+        <div class="bg-gradient-to-b from-slate-400 to-slate-50 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-400">
     <main id="content" class="mx-auto max-w-7xl py-16 px-8">
         <article class="mx-auto prose dark:prose-invert">
             <h1>Advanced topics</h1>
+<p>This page needs to be written, want to help out? Checkout GitHub repo!</p>
 
         </article>
     </main>
-
+</div>
     </section>
 
-    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-100 dark:bg-gray-800">
-        <div class="prose dark:prose-invert text-center mx-auto">
-            <p>Site proudly built with <a href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
-
+    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-50 dark:bg-gray-800">
+        <div class="prose dark:prose-invert text-center mx-auto ">
+            <p>Site proudly built with <a class="text-blue-600 hover:text-blue-700 dark:text-sky-400 hover:underline dark:hover:text-sky-300" href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
         </div>
         <a href="#app" aria-label="Go to top of page" class="float-right">
             <button title="Scroll to top">

_site/advanced-topics.html

@@ -20,7 +20,7 @@
 <style>[x-cloak] {display: none!important}</style>
 
 
-    <link rel="stylesheet" href="media/app.css?v=c738313fddac0baf43cddf51e0a534ac">
+    <link rel="stylesheet" href="media/app.css?v=e222ad6e8bd562546693ea06e83b1771">
 
 
 
@@ -36,8 +36,8 @@
 
 
 </head>
-<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-900 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
-    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none dark:bg-gray-800">
+<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-800 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
+    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none bg-slate-400 dark:bg-slate-400">
     <div class="flex flex-grow items-center flex-shrink-0 text-gray-700 dark:text-gray-200">
         <a href="index.html" class="font-bold px-4" aria-label="Home page">
     JSON Schema for PHP
@@ -89,22 +89,21 @@
                     </ul>
     </div>
 </nav>
-    <section>
-        
+    <section class="">
+        <div class="bg-gradient-to-b from-slate-400 to-slate-50 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-400">
     <main id="content" class="mx-auto max-w-7xl py-16 px-8">
         <article class="mx-auto prose dark:prose-invert">
             <h1>Community guide</h1>
 <p>This page needs to be written, want to help out? Checkout GitHub repo!</p>
 
         </article>
     </main>
-
+</div>
     </section>
 
-    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-100 dark:bg-gray-800">
-        <div class="prose dark:prose-invert text-center mx-auto">
-            <p>Site proudly built with <a href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
-
+    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-50 dark:bg-gray-800">
+        <div class="prose dark:prose-invert text-center mx-auto ">
+            <p>Site proudly built with <a class="text-blue-600 hover:text-blue-700 dark:text-sky-400 hover:underline dark:hover:text-sky-300" href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
         </div>
         <a href="#app" aria-label="Go to top of page" class="float-right">
             <button title="Scroll to top">

_site/community-guide.html

@@ -20,7 +20,7 @@
 <style>[x-cloak] {display: none!important}</style>
 
 
-    <link rel="stylesheet" href="media/app.css?v=c738313fddac0baf43cddf51e0a534ac">
+    <link rel="stylesheet" href="media/app.css?v=e00767a839006e2bdc599299f16662c7">
 
 
 
@@ -36,8 +36,8 @@
 
 
 </head>
-<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-900 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
-    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none dark:bg-gray-800">
+<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-800 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
+    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none bg-slate-400 dark:bg-slate-400">
     <div class="flex flex-grow items-center flex-shrink-0 text-gray-700 dark:text-gray-200">
         <a href="index.html" class="font-bold px-4" aria-label="Home page">
     JSON Schema for PHP
@@ -89,22 +89,21 @@
                     </ul>
     </div>
 </nav>
-    <section>
-        
+    <section class="">
+        <div class="bg-gradient-to-b from-slate-400 to-slate-50 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-400">
     <main id="content" class="mx-auto max-w-7xl py-16 px-8">
         <article class="mx-auto prose dark:prose-invert">
             <h1>Configuration</h1>
-<p>@todo</p>
+<p>This page needs to be written, want to help out? Checkout GitHub repo!</p>
 
         </article>
     </main>
-
+</div>
     </section>
 
-    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-100 dark:bg-gray-800">
-        <div class="prose dark:prose-invert text-center mx-auto">
-            <p>Site proudly built with <a href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
-
+    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-50 dark:bg-gray-800">
+        <div class="prose dark:prose-invert text-center mx-auto ">
+            <p>Site proudly built with <a class="text-blue-600 hover:text-blue-700 dark:text-sky-400 hover:underline dark:hover:text-sky-300" href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
         </div>
         <a href="#app" aria-label="Go to top of page" class="float-right">
             <button title="Scroll to top">

_site/configuration.html

@@ -20,7 +20,7 @@
 <style>[x-cloak] {display: none!important}</style>
 
 
-    <link rel="stylesheet" href="media/app.css?v=c738313fddac0baf43cddf51e0a534ac">
+    <link rel="stylesheet" href="media/app.css?v=e222ad6e8bd562546693ea06e83b1771">
 
 
 
@@ -36,8 +36,8 @@
 
 
 </head>
-<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-900 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
-    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none dark:bg-gray-800">
+<body id="app" class="flex flex-col min-h-screen overflow-x-hidden bg-slate-50 text-gray-800 dark:bg-gray-800 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
+    <a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a>    <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none bg-slate-400 dark:bg-slate-400">
     <div class="flex flex-grow items-center flex-shrink-0 text-gray-700 dark:text-gray-200">
         <a href="index.html" class="font-bold px-4" aria-label="Home page">
     JSON Schema for PHP
@@ -89,8 +89,8 @@
                     </ul>
     </div>
 </nav>
-    <section>
-        
+    <section class="">
+        <div class="bg-gradient-to-b from-slate-400 to-slate-50 dark:bg-gradient-to-t dark:from-slate-800 dark:to-slate-400">
     <main id="content" class="mx-auto max-w-7xl py-16 px-8">
         <article class="mx-auto prose dark:prose-invert">
             <h1>Contributors</h1>
@@ -105,13 +105,12 @@ <h1>Contributors</h1>
 
         </article>
     </main>
-
+</div>
     </section>
 
-    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-100 dark:bg-gray-800">
-        <div class="prose dark:prose-invert text-center mx-auto">
-            <p>Site proudly built with <a href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
-
+    <footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-50 dark:bg-gray-800">
+        <div class="prose dark:prose-invert text-center mx-auto ">
+            <p>Site proudly built with <a class="text-blue-600 hover:text-blue-700 dark:text-sky-400 hover:underline dark:hover:text-sky-300" href="https://github.com/hydephp/hyde">HydePHP</a> 🎩</p>
         </div>
         <a href="#app" aria-label="Go to top of page" class="float-right">
             <button title="Scroll to top">