Add theme switcher component with dark and light mode support

Extracted theme toggle functionality into a new `app-theme` component to improve modularity and reusability. Integrated theme settings with a service using cookies for persistence and introduced the `THEME_MODE` enum. Updated header component to utilize the new theme switcher and removed inline implementation.

frontend/src/app/header/header.component.html

@@ -126,12 +126,7 @@
             </ul>
           </li>
         </ul>
-        <div class="switch-div" style="z-index: 1;">
-          <label class="switch">
-            <input type="checkbox" onchange="toggleTheme()" id="slider">
-            <span class="slider round"></span>
-          </label>
-        </div>
+        <app-theme></app-theme>
       </div>
     </nav>
 

frontend/src/app/header/header.component.scss

@@ -251,86 +251,6 @@ nav img {
   display: none;
 }
 
-/* darkmode switch start */
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 25px;
-}
-
-.switch-div{
-  position: absolute;
-  right: 40px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 37px;
-  width: 37px;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  box-shadow: 0 0 15px #2020203d;
-  background: var(--switch) url('https://i.ibb.co/7JfqXxB/sunny.png');
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-input:checked + .slider {
-  background-color: var(--link-color);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--link-color);
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(24px);
-  -ms-transform: translateX(24px);
-  transform: translateX(24px);
-  background: var(--switch) url('https://i.ibb.co/FxzBYR9/night.png');
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-
-/* darkmode switch end */
-
 @-moz-document url-prefix() {
   .dropdown2{
     top: 12px;