Add dark mode support based on system preferences

Co-authored-by: DRSDavidSoft <[email protected]>

Author: Copilot

css/main.css

@@ -232,3 +232,99 @@ ul ol {
     padding: 0 0 0 30px;
     list-style: none;
 }
+
+/* -------------- Dark Mode -------------- */
+
+@media (prefers-color-scheme: dark) {
+    html, button, input, select, textarea {
+        color: #e0e0e0;
+    }
+    
+    body {
+        background-color: #1a1a1a;
+    }
+    
+    body > div.container, body > div.container-fluid {
+        background-color: #2a2a2a;
+        -webkit-box-shadow: 0 0 8px 3px #000;
+        -moz-box-shadow: 0 0 8px 3px #000;
+        box-shadow: 0 0 8px 3px #000;
+    }
+    
+    a {
+        color: #5dade2;
+    }
+    
+    h2 {
+        color: #d0d0d0;
+    }
+    
+    h2:before, h2:after {
+        background-color: #444;
+    }
+    
+    h3 {
+        background-color: #333;
+        color: #e0e0e0;
+    }
+    
+    h4 {
+        color: #d0d0d0;
+    }
+    
+    #pitch {
+        color: #e0e0e0;
+        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
+    }
+    
+    .btn {
+        border: 1px solid #444;
+        background-color: #555;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-default {
+        border: 1px solid #444;
+        background-color: #4a4a4a;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-default:hover {
+        border: 1px solid #555;
+        background-color: #555;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-default:active {
+        border: 1px solid #666;
+        background-color: #606060;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-primary {
+        border: 1px solid #2980b9;
+        background-color: #2980b9;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-primary:hover {
+        border: 1px solid #3498db;
+        background-color: #3498db;
+        color: #e0e0e0;
+    }
+    
+    .btn.btn-primary:active {
+        border: 1px solid #1E90FF !important;
+        background-color: #1E90FF !important;
+        color: #e0e0e0 !important;
+    }
+    
+    code {
+        color: #e0e0e0;
+        background-color: #3a3a3a;
+    }
+    
+    footer {
+        color: #b0b0b0;
+    }
+}