[Blog] [Ajay]: Change theme to dark

Author: Ajay kumar

TestArena/Layout/HeaderComponent.razor

@@ -0,0 +1,24 @@
+@using TestArena.Layout
+
+<header class="bg-dark text-white p-3 d-flex align-items-center">
+    <div class="container-fluid">
+        <div class="container-fluid">
+            <div class="row align-items-center">
+                <!-- Logo on the left -->
+                <div class="col-12 col-md-4 d-flex justify-content-md-start justify-content-center">
+                    <h3 class="m-0">Dev Arena</h3>
+                </div>
+
+                <!-- Search bar in the center -->
+                <div class="col-12 col-md-4 d-flex justify-content-md-center justify-content-center mt-2 mt-md-0">
+                    <input type="text" class="form-control w-75" placeholder="Search...">
+                </div>
+
+                <!-- Settings button on the right -->
+                <div class="col-12 col-md-4 d-flex justify-content-md-end justify-content-center mt-2 mt-md-0">
+                    <button class="btn btn-light">Settings</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

TestArena/Layout/MainLayout.razor

@@ -7,29 +7,7 @@
     </div> *@
 
     <main>
-        <header class="bg-primary text-white p-3 d-flex align-items-center">
-            <div class="container-fluid">
-                <div class="container-fluid">
-                    <div class="row align-items-center">
-                        <!-- Logo on the left -->
-                        <div class="col-12 col-md-4 d-flex justify-content-md-start justify-content-center">
-                            <h3 class="m-0">Dev Arena</h3>
-                        </div>
-
-                        <!-- Search bar in the center -->
-                        <div class="col-12 col-md-4 d-flex justify-content-md-center justify-content-center mt-2 mt-md-0">
-                            <input type="text" class="form-control w-75" placeholder="Search...">
-                        </div>
-
-                        <!-- Settings button on the right -->
-                        <div class="col-12 col-md-4 d-flex justify-content-md-end justify-content-center mt-2 mt-md-0">
-                            <button class="btn btn-light">Settings</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-        </header>
+        <HeaderComponent />
 
         <article class="content px-4">
             @Body