give it a dark background and a black and orange color scheme. also provide a text spell check in ducky script form

about.html

@@ -13,14 +13,13 @@
     <custom-navbar></custom-navbar>
     
     <main class="flex-grow container mx-auto px-4 py-12">
-        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
-            <div class="bg-yellow-400 p-8 text-center">
-                <h1 class="text-4xl font-bold text-gray-900">About Quacky Code Conjurer</h1>
+            <div class="max-w-4xl mx-auto bg-gray-900 rounded-xl shadow-lg overflow-hidden border border-orange-600">
+                <div class="bg-orange-600 p-8 text-center">
+<h1 class="text-4xl font-bold text-gray-900">About Quacky Code Conjurer</h1>
                 <p class="text-xl text-gray-800 mt-2">Magical script generation with a ducky twist!</p>
             </div>
-            
-            <div class="p-8 space-y-8">
-                <div class="flex flex-col md:flex-row gap-8 items-center">
+                <div class="p-8 space-y-8 bg-gray-800">
+<div class="flex flex-col md:flex-row gap-8 items-center">
                     <div class="md:w-1/2">
                         <img src="http://static.photos/yellow/640x360/42" alt="Quacky duck" class="rounded-lg shadow-md w-full floating-duck">
                     </div>

components/theme-toggle.js

@@ -0,0 +1,44 @@
+class ThemeToggle extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        button {
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          color: inherit;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+      </style>
+      <button>
+        <i data-feather="moon"></i>
+        <span>Dark Mode</span>
+      </button>
+    `;
+
+    this.shadowRoot.querySelector('button').addEventListener('click', () => {
+      document.documentElement.classList.toggle('light-mode');
+      this.updateIcon();
+    });
+
+    this.updateIcon();
+  }
+
+  updateIcon() {
+    const icon = this.shadowRoot.querySelector('i');
+    const span = this.shadowRoot.querySelector('span');
+    if (document.documentElement.classList.contains('light-mode')) {
+      icon.setAttribute('data-feather', 'sun');
+      span.textContent = 'Light Mode';
+    } else {
+      icon.setAttribute('data-feather', 'moon');
+      span.textContent = 'Dark Mode';
+    }
+    feather.replace();
+  }
+}
+
+customElements.define('theme-toggle', ThemeToggle);

index.html

@@ -30,10 +30,9 @@
                 <h1 class="text-5xl font-bold text-gray-800 mb-4">Quacky Code Conjurer 🦆</h1>
                 <p class="text-xl text-gray-600">Generate magical duck-themed scripts with a quack!</p>
             </div>
-
             <div class="grid md:grid-cols-2 gap-8">
-                <div class="bg-yellow-50 p-6 rounded-lg border-2 border-yellow-200">
-                    <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
+                <div class="bg-yellow-50 p-6 rounded-lg border-2 border-yellow-200" style="background-color: #1e1e1e !important;">
+<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
                         <i data-feather="code" class="mr-2"></i> Generate Script
                     </h2>
                     <div class="space-y-4">
@@ -60,8 +59,8 @@
                     <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
                         <i data-feather="file-text" class="mr-2"></i> Script Output
                     </h2>
-                    <div class="bg-gray-800 rounded-lg p-4 h-64 overflow-auto">
-                        <pre class="text-green-400 font-mono text-sm"><code id="output-code"># Your generated script will appear here...
+                    <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-auto">
+<pre class="text-green-400 font-mono text-sm"><code id="output-code"># Your generated script will appear here...
 # Example:
 # echo "Quack! Hello World 🦆"</code></pre>
                     </div>

script.js

@@ -1,7 +1,47 @@
+
+// Duck-themed spell checker for Ducky Script
+function duckySpellCheck(text) {
+    const commonMisspellings = {
+        'delay': 'DELAY',
+        'string': 'STRING',
+        'enter': 'ENTER',
+        'windows': 'GUI',
+        'gui': 'GUI',
+        'menu': 'MENU',
+        'shift': 'SHIFT',
+        'alt': 'ALT',
+        'control': 'CTRL',
+        'ctrl': 'CTRL',
+        'arrowup': 'UPARROW',
+        'arrowdown': 'DOWNARROW',
+        'arrowleft': 'LEFTARROW',
+        'arrowright': 'RIGHTARROW',
+        'delete': 'DELETE',
+        'space': 'SPACE'
+    };
+
+    let corrected = text;
+    for (const [wrong, right] of Object.entries(commonMisspellings)) {
+        const regex = new RegExp(`\\b${wrong}\\b`, 'gi');
+        corrected = corrected.replace(regex, right);
+    }
+    return corrected;
+}
+
 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
+    // Ducky Script spell check
+    const duckyTextarea = document.querySelector('textarea');
+    if (duckyTextarea) {
+        duckyTextarea.addEventListener('blur', (e) => {
+            if (document.querySelector('select').value === 'Ducky Script') {
+                e.target.value = duckySpellCheck(e.target.value);
+            }
+        });
+    }
+
     // Example functionality for the code generator
-    const generateBtn = document.querySelector('.bg-yellow-400');
+const generateBtn = document.querySelector('.bg-yellow-400');
     const outputCode = document.getElementById('output-code');
     
     if (generateBtn && outputCode) {

style.css

@@ -1,8 +1,43 @@
 /* Shared styles across all pages */
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: #121212;
+    color: #e0e0e0;
 }
 
+/* Dark theme overrides */
+.bg-white {
+    background-color: #1e1e1e !important;
+    color: #e0e0e0;
+}
+.bg-gray-50 {
+    background-color: #121212 !important;
+}
+.bg-yellow-50 {
+    background-color: #332200 !important;
+    border-color: #ff8c00 !important;
+}
+.bg-blue-50 {
+    background-color: #001a33 !important;
+    border-color: #0066cc !important;
+}
+.text-gray-800 {
+    color: #e0e0e0 !important;
+}
+.text-gray-600 {
+    color: #b0b0b0 !important;
+}
+.bg-yellow-400 {
+    background-color: #ff8c00 !important;
+    color: #121212 !important;
+}
+.bg-blue-500 {
+    background-color: #0066cc !important;
+}
+.bg-gray-200 {
+    background-color: #333333 !important;
+    color: #e0e0e0 !important;
+}
 @keyframes float {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-10px); }