White Theme

Author: PrashantUnity

TextHub/Layout/UINavBar.razor

@@ -17,10 +17,10 @@
                         </button>
                         @if (_isToolsDropdownOpen)
                         {
-                            <div class="absolute top-full mt-2 w-48 bg-background border rounded-md shadow-lg py-1">
-                                <a href="/uppercase" class="block px-4 py-2 text-sm hover:bg-muted">Uppercase</a>
-                                <a href="/lowercase" class="block px-4 py-2 text-sm hover:bg-muted">Lowercase</a>
-                                <a href="/word-counter" class="block px-4 py-2 text-sm hover:bg-muted">Word Counter</a>
+                            <div class="absolute top-full mt-2 w-48 dropdown-menu rounded-md py-1">
+                                <a href="/uppercase" class="block px-4 py-2 text-sm dropdown-item">Uppercase</a>
+                                <a href="/lowercase" class="block px-4 py-2 text-sm dropdown-item">Lowercase</a>
+                                <a href="/word-counter" class="block px-4 py-2 text-sm dropdown-item">Word Counter</a>
                             </div>
                         }
                     </div>
@@ -68,7 +68,7 @@
 {
     private bool _isMobileMenuOpen;
     private bool _isToolsDropdownOpen;
-    private bool _isDarkMode = true; // Start with dark mode
+    private bool _isDarkMode = false; // Start with light mode
 
     private void ToggleMobileMenu()
     {

TextHub/wwwroot/app.css

@@ -1,35 +1,35 @@
 :root {
     /* Light theme (default) */
     --background: 0 0% 100%;
-    --background-gradient: linear-gradient(135deg, hsl(0 0% 100%), hsl(0 0% 96%));
-    --foreground: 222.2 5% 10%;
+    --background-gradient: linear-gradient(135deg, hsl(0 0% 100%), hsl(0 0% 98%));
+    --foreground: 222.2 5% 8%;
     --primary: 122 39% 49%;
     --primary-hover: 122 39% 42%;
     --primary-foreground: 0 0% 100%;
-    --primary-glow: 122 39% 49% / .3;
+    --primary-glow: 122 39% 49% / .2;
     --secondary: 207 90% 54%;
     --secondary-hover: 207 90% 46%;
     --secondary-foreground: 0 0% 100%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 5% 10%;
-    --card-shadow: 0 4px 6px -1px hsl(0 0% 0% / .1);
-    --card-hover-shadow: 0 10px 15px -3px hsl(0 0% 0% / .1);
+    --card-foreground: 222.2 5% 8%;
+    --card-shadow: 0 2px 4px -1px hsl(0 0% 0% / .08), 0 4px 6px -1px hsl(0 0% 0% / .06);
+    --card-hover-shadow: 0 4px 6px -1px hsl(0 0% 0% / .1), 0 10px 15px -3px hsl(0 0% 0% / .08);
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 5% 10%;
-    --muted: 210 20% 96%;
-    --muted-foreground: 215 16% 47%;
-    --accent: 210 20% 96%;
-    --accent-foreground: 222.2 5% 10%;
+    --popover-foreground: 222.2 5% 8%;
+    --muted: 210 20% 94%;
+    --muted-foreground: 215 16% 45%;
+    --accent: 210 20% 94%;
+    --accent-foreground: 222.2 5% 8%;
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
-    --border: 214 20% 91%;
-    --input: 214 20% 91%;
+    --border: 214 20% 88%;
+    --input: 214 20% 88%;
     --ring: 122 39% 49%;
     --radius: .75rem;
     --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
     --transition-base: .3s cubic-bezier(.4, 0, .2, 1);
     --transition-slow: .5s cubic-bezier(.4, 0, .2, 1);
-    --tool-gradient: linear-gradient(135deg, hsl(122 39% 95%), hsl(207 90% 95%));
+    --tool-gradient: linear-gradient(135deg, hsl(122 39% 97%), hsl(207 90% 97%));
     --text-gradient: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
 }
 
@@ -389,6 +389,7 @@ body {
 /* Navigation specific styles */
 .nav-link {
     font-weight: 500;
+    color: hsl(var(--foreground));
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
@@ -546,6 +547,14 @@ html {
 .btn-primary {
     position: relative;
     overflow: hidden;
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border: 1px solid hsl(var(--primary));
+}
+
+.btn-primary:hover {
+    background-color: hsl(var(--primary-hover));
+    border-color: hsl(var(--primary-hover));
 }
 
 .btn-primary::before {
@@ -563,6 +572,17 @@ html {
     left: 100%;
 }
 
+.btn-secondary {
+    background-color: transparent;
+    color: hsl(var(--foreground));
+    border: 1px solid hsl(var(--border));
+}
+
+.btn-secondary:hover {
+    background-color: hsl(var(--muted));
+    border-color: hsl(var(--primary));
+}
+
 /* Card hover effects */
 .tool-card {
     position: relative;
@@ -745,6 +765,7 @@ html {
     border-radius: var(--radius);
     border-width: 1px;
     border-color: hsl(var(--border));
+    background-color: hsl(var(--card));
     background-image: var(--tool-gradient);
     padding: 1.5rem;
     --tw-shadow: var(--card-shadow);
@@ -773,6 +794,22 @@ html {
     @apply flex-shrink-0 p-3 bg-primary/10 rounded-xl border border-primary/20 group-hover:bg-primary/20 group-hover:border-primary/40 transition-all duration-300;
 }
 
+/* Dropdown menu styling */
+.dropdown-menu {
+    background-color: hsl(var(--popover));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--card-hover-shadow);
+}
+
+.dropdown-item {
+    color: hsl(var(--popover-foreground));
+    transition: background-color 0.15s ease;
+}
+
+.dropdown-item:hover {
+    background-color: hsl(var(--muted));
+}
+
 /* Better text hierarchy */
 .section-title {
     @apply text-3xl md:text-4xl font-bold text-foreground;

TextHub/wwwroot/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
 
 <head>
     <meta charset="utf-8" />