Came Case Tetsting

Author: PrashantUnity

TextHub/Components/Layout/UINavBar.razor

@@ -68,7 +68,17 @@
 {
     private bool _isMobileMenuOpen;
     private bool _isToolsDropdownOpen;
-    private bool _isDarkMode = false; // Start with light mode
+    private bool _isDarkMode = false; // Will be initialized from localStorage
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Initialize theme from localStorage or system preference
+            _isDarkMode = await JsRuntime.InvokeAsync<bool>("getTheme");
+            StateHasChanged();
+        }
+    }
 
     private void ToggleMobileMenu()
     {

TextHub/Features/TextCase/CamelCase.razor

@@ -1,4 +1,4 @@
-@page "/camel-case"
+@page "/TextHub/camel-case"
 @using TextHub.Services.Converters
 @using TextHub.Components.Forms
 @inject TextCaseConverterService ConverterService
@@ -9,7 +9,7 @@
     Description="Convert to camelCase for coding"
     ConvertButtonText="Convert to camelCase"
     UseCaseDescription="Perfect for variable names, function names, and coding"
-    Route="/camel-case"
+    Route="/TextHub/camel-case"
     ConvertFunction="@(input => ConverterService.ConvertToCamelCase(input))">
 
     <IconSvg>

TextHub/Services/Data/ToolDataService.cs

@@ -23,7 +23,7 @@ public List<Tool> GetTextCaseTools()
             new Tool("Lowercase Converter", "Transform text to lowercase with one click", "/lowercase", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-letter-text w-5 h-5 sm:w-6 sm:h-6 text-primary\"><path d=\"M15 12h6\"></path><path d=\"M15 6h6\"></path><path d=\"m3 13 3.553-7.724a.5.5 0 0 1 .894 0L11 13\"></path><path d=\"M3 18h18\"></path><path d=\"M4 11h6\"></path></svg>"),
             new Tool("Title Case", "Capitalize First Letter Of Each Word", "/title-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-case-sensitive w-5 h-5 sm:w-6 sm:h-6 text-primary\"><path d=\"m3 15 4-8 4 8\"></path><path d=\"M4 13h6\"></path><circle cx=\"18\" cy=\"12\" r=\"3\"></circle><path d=\"M21 9v6\"></path></svg>"),
             new Tool("Sentence Case", "Capitalize first letter of sentences", "/sentence-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-case-sensitive w-5 h-5 sm:w-6 sm:h-6 text-primary\"><path d=\"m3 15 4-8 4 8\"></path><path d=\"M4 13h6\"></path><circle cx=\"18\" cy=\"12\" r=\"3\"></circle><path d=\"M21 9v6\"></path></svg>"),
-            new Tool("camelCase", "Convert to camelCase for coding", "/camel-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code w-5 h-5 sm:w-6 sm:h-6 text-primary\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>"),
+            new Tool("camelCase", "Convert to camelCase for coding", "/TextHub/camel-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code w-5 h-5 sm:w-6 sm:h-6 text-primary\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>"),
             new Tool("PascalCase", "Convert to PascalCase for classes", "/pascal-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code w-5 h-5 sm:w-6 sm:h-6 text-primary\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>"),
             new Tool("snake_case", "Convert to snake_case format", "/snake-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code w-5 h-5 sm:w-6 sm:h-6 text-primary\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>"),
             new Tool("kebab-case", "Convert to kebab-case for URLs", "/kebab-case", "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-code w-5 h-5 sm:w-6 sm:h-6 text-primary\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>")

TextHub/wwwroot/index.html

@@ -137,14 +137,35 @@
 
     <script src="_framework/blazor.webassembly.js"></script>
     <script>
+        // Initialize theme on page load to prevent flash
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDarkMode = savedTheme === 'dark' || (savedTheme === null && prefersDark);
+            
+            if (isDarkMode) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        })();
+
         window.toggleTheme = (isDarkMode) => {
             const html = document.documentElement;
             if (isDarkMode) {
                 html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
             } else {
                 html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
             }
         };
+
+        window.getTheme = () => {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            return savedTheme === 'dark' || (savedTheme === null && prefersDark);
+        };
     </script>
 <!--    <script>navigator.serviceWorker.register('service-worker.js');</script>-->
 </body>