gofr-dev · nhxe · Jun 27, 2025 · Jun 28, 2025 · Jul 2, 2025 · Jul 2, 2025
diff --git a/docs/navigation.js b/docs/navigation.js
@@ -234,4 +234,24 @@ export const navigation = [
             }
         ],
     },
-]
+]
+
+(function() {
+  const btn = document.getElementById('theme-toggle-btn');
+  if (!btn) return;
+  const root = document.documentElement;
+  const saved = localStorage.getItem('docs-theme');
+  if (saved) root.setAttribute('data-theme', saved);
+
+  function updateBtn(theme) {
+    btn.textContent = theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
+  }
+  updateBtn(root.getAttribute('data-theme') || 'light');
+
+  btn.onclick = function() {
+    const current = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    root.setAttribute('data-theme', current);
+    localStorage.setItem('docs-theme', current);
+    updateBtn(current);
+  };
+})();
diff --git a/docs/page.md b/docs/page.md
@@ -1,5 +1,11 @@
 # Getting started
 
+<div id="theme-toggle-container" style="text-align:right; margin-bottom:1rem;">
+  <button id="theme-toggle-btn" aria-label="Toggle dark mode" style="padding:0.4rem 1rem; border-radius:6px; border:none; background:#23272f; color:#fff; cursor:pointer;">
+    🌙 Dark Mode
+  </button>
+</div>
+
 GoFr is Opinionated Web Framework written in Go (Golang). It helps in building robust and scalable applications. This framework is designed to offer a user-friendly and familiar abstraction for all the developers. We prioritize simplicity over complexity.
 
 In this section we will walk through what GoFr is, what problems it solves, and how it can help in building your project.
@@ -29,3 +35,5 @@ In this section we will walk through what GoFr is, what problems it solves, and
 - Encourage a more functional way of programming.
 - Avoid code duplication.
 - Log and store data for analysis purposes.
+
+<link rel="stylesheet" href="/docs/public/docs-theme.css" />
diff --git a/docs/public/docs-theme.css b/docs/public/docs-theme.css
@@ -0,0 +1,19 @@
+:root {
+  --docs-bg: #f8fafc;
+  --docs-text: #23272f;
+  --docs-link: #388e3c;
+  --docs-header: #23272f;
+}
+[data-theme="dark"] {
+  --docs-bg: #181a20;
+  --docs-text: #e5e7eb;
+  --docs-link: #4caf50;
+  --docs-header: #e5e7eb;
+}
+body {
+  background: var(--docs-bg);
+  color: var(--docs-text);
+  transition: background 0.2s, color 0.2s;
+}
+a { color: var(--docs-link); }
+h1, h2, h3, h4, h5, h6 { color: var(--docs-header); }
diff --git a/pkg/gofr/static/index.css b/pkg/gofr/static/index.css
@@ -12,5 +12,55 @@ html {
 
 body {
     margin: 0;
-    background: #fafafa;
+    background: #f8fafc;
+    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+    color: #23272f;
 }
+
+.gofr-swagger-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: linear-gradient(90deg, #23272f 0%, #4caf50 100%);
+    padding: 1rem 2rem;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
+}
+
+.gofr-logo {
+    height: 48px;
+    margin-right: 1rem;
+    border-radius: 8px;
+    background: #fff;
+    padding: 2px;
+}
+
+.gofr-title {
+    font-size: 1.7rem;
+    font-weight: 600;
+    color: #fff;
+    flex: 1;
+}
+
+.gofr-docs-link {
+    color: #fff;
+    background: #388e3c;
+    padding: 0.5rem 1.2rem;
+    border-radius: 6px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: background 0.2s;
+}
+.gofr-docs-link:hover {
+    background: #256029;
+}
+
+/* Improve contrast and accessibility for Swagger UI */
+.swagger-ui .topbar { display: none; }
+.swagger-ui .info { background: #e8f5e9; border-radius: 8px; }
+.swagger-ui .scheme-container { background: #f1f8e9; }
+.swagger-ui .opblock { border-radius: 8px; }
+.swagger-ui .opblock-summary { font-size: 1.1rem; }
+.swagger-ui .opblock.opblock-get { border-left: 5px solid #4caf50; }
+.swagger-ui .opblock.opblock-post { border-left: 5px solid #388e3c; }
+.swagger-ui .opblock.opblock-delete { border-left: 5px solid #e53935; }
+.swagger-ui .opblock.opblock-put { border-left: 5px solid #fbc02d; }
diff --git a/pkg/gofr/static/index.html b/pkg/gofr/static/index.html
@@ -3,14 +3,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>Swagger UI</title>
+    <title>GoFr API Docs</title>
     <link rel="stylesheet" type="text/css" href="swagger-ui.css" />
     <link rel="stylesheet" type="text/css" href="index.css" />
     <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
     <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
   </head>
 
   <body>
+    <header class="gofr-swagger-header">
+      <img src="https://github.com/gofr-dev/gofr/assets/44036979/916fe7b1-42fb-4af1-9e0b-4a7a064c243c" alt="GoFr Logo" class="gofr-logo" />
+      <span class="gofr-title">GoFr API Documentation</span>
+      <a href="https://gofr.dev/docs" class="gofr-docs-link" target="_blank">← Back to Docs</a>
+    </header>
     <div id="swagger-ui"></div>
     <script src="swagger-ui-bundle.js" charset="UTF-8"> </script>
     <script src="swagger-ui-standalone-preset.js" charset="UTF-8"> </script>