fix: improve dark theme functionality and fix storage provider descriptions

Author: byerlikaya

docs/assets/css/style.css

@@ -31,6 +31,55 @@
     --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
 }
 
+/* Dark Theme Specific Styles */
+[data-theme="dark"] .card {
+    background: var(--dark-bg);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .navbar {
+    background: var(--darker-bg) !important;
+    border-bottom: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .content-wrapper {
+    background: var(--dark-bg);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .provider-card {
+    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .provider-card h6 {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .provider-card small {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .alert {
+    background: var(--dark-bg);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .btn-outline-light {
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .btn-outline-light:hover {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -43,6 +92,11 @@ body {
     color: var(--text-primary);
     background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);
     min-height: 100vh;
+    transition: all 0.3s ease;
+}
+
+body[data-theme="dark"] {
+    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
 }
 
 /* Hero Section */
@@ -205,7 +259,7 @@ body {
     background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-lg);
-    padding: 1rem 0;
+    padding: 1.5rem 0;
     transition: all 0.3s ease;
 }
 
@@ -215,6 +269,9 @@ body {
     color: white !important;
     text-decoration: none;
     transition: all 0.3s ease;
+    padding: 0.5rem 0;
+    display: flex;
+    align-items: center;
 }
 
 .navbar-brand:hover {
@@ -232,11 +289,14 @@ body {
 .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.8) !important;
     font-weight: 500;
-    padding: 0.5rem 1rem !important;
-    margin: 0 0.25rem;
+    padding: 0.75rem 1.25rem !important;
+    margin: 0 0.5rem;
     border-radius: 8px;
     transition: all 0.3s ease;
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
 .navbar-nav .nav-link:hover {
@@ -263,8 +323,8 @@ body {
 
 /* Main Content */
 .main-content {
-    margin-top: 80px;
-    min-height: calc(100vh - 80px);
+    margin-top: 120px;
+    min-height: calc(100vh - 120px);
 }
 
 /* Content Area - Full Width */
@@ -286,8 +346,8 @@ body {
 }
 
 .main-content {
-    margin-top: 80px;
-    min-height: calc(100vh - 80px);
+    margin-top: 120px;
+    min-height: calc(100vh - 120px);
     width: 100%;
     max-width: 100%;
 }

docs/assets/js/script.js

@@ -0,0 +1,95 @@
+// SmartRAG Documentation - Main JavaScript
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Theme Toggle Functionality
+    const themeToggle = document.getElementById('themeToggle');
+    const themeIcon = document.getElementById('themeIcon');
+    const body = document.body;
+    
+    // Check for saved theme preference or default to 'light'
+    const currentTheme = localStorage.getItem('theme') || 'light';
+    
+    // Apply the current theme
+    function applyTheme(theme) {
+        if (theme === 'dark') {
+            body.setAttribute('data-theme', 'dark');
+            themeIcon.className = 'fas fa-moon';
+            localStorage.setItem('theme', 'dark');
+        } else {
+            body.removeAttribute('data-theme');
+            themeIcon.className = 'fas fa-sun';
+            localStorage.setItem('theme', 'light');
+        }
+    }
+    
+    // Initialize theme
+    applyTheme(currentTheme);
+    
+    // Theme toggle click handler
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function() {
+            const currentTheme = localStorage.getItem('theme') || 'light';
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            applyTheme(newTheme);
+        });
+    }
+    
+    // Back to Top Button
+    const backToTopButton = document.getElementById('backToTop');
+    
+    if (backToTopButton) {
+        // Show button when scrolling down
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.add('show');
+            } else {
+                backToTopButton.classList.remove('show');
+            }
+        });
+        
+        // Scroll to top when clicked
+        backToTopButton.addEventListener('click', function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    }
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+    
+    // Add fade-in animation to content
+    const observerOptions = {
+        threshold: 0.1,
+    };
+    
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    // Observe content elements
+    document.querySelectorAll('.content-wrapper, .card, .alert').forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(20px)';
+        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+        observer.observe(el);
+    });
+});

docs/en/index.md

@@ -211,7 +211,7 @@ SmartRAG integrates with leading AI providers and storage solutions to give you
                 <i class="fas fa-cogs fa-3x text-dark"></i>
             </div>
             <h6 class="mb-1">Custom</h6>
-            <small class="text-muted">Extensible Storage</small>
+            <small class="text-muted">Universal API Support</small>
         </div>
     </div>
 </div>

docs/index.md

@@ -243,7 +243,7 @@ var document = await documentService.UploadDocumentAsync(file);
                 <i class="fas fa-cogs"></i>
             </div>
             <h6>Custom</h6>
-            <small>Extensible Storage</small>
+            <small>Any OpenAI-compatible API</small>
         </div>
     </div>
 </div>