Added theme change button

static/main/css/layout.css

@@ -69,6 +69,18 @@ em {
     margin-inline-end: 0.75rem;
 }
 
+.color-mode-toggle {
+    color: var(--color-header-text);
+    border: 2px solid currentColor;
+    margin: auto;
+    padding: 4px;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 5px;
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
 @media (max-width: 35em) {
     .primary-navigation {
         --gap: 3rem;
@@ -104,6 +116,12 @@ em {
     [data-color-mode="light"] {
         --color-header-text: var(--color-fg-default);
     }
+
+    .color-mode-toggle {
+        margin: 0 1rem 0 auto;
+        width: 3rem;
+        height: 3rem;
+    }
 }
 
 @media (min-width: 35em) {
@@ -114,12 +132,7 @@ em {
         background-color: var(--color-header-bg-default);
     }
 
-    .primary-navigation a:hover {
+    .primary-navigation *:hover {
         color: var(--color-header-text-hover);
     }
 }
-
-#color-mode-toggle {
-    width: 2rem;
-    height: 2rem;
-}

templates/layout.html

@@ -47,7 +47,11 @@
                     <a href="{% url 'projects' %}" class="bold">Projects</a>
                     <button id="color-mode-toggle"
                             class="color-mode-toggle"
-                            aria-label="toggle dark mode "></button>
+                            aria-label="toggle dark mode ">
+                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
+                            <path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)"/>
+                        </svg>
+                    </button>
                 </div>
             </nav>
         </header>