Feat(UI): Light / dark mode themes and toggle utility added.

content/images/light-mode-icon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- Defaults to black background but can be styled with CSS -->
+  <rect width="24" height="24" fill="black" style="fill: var(--page-background-colour, black);" />
+  
+  <!-- Sun icon with transparent fill to reveal what's behind the SVG -->
+  <mask id="sun-mask">
+    <!-- The white parts of this mask will be the visible parts -->
+    <rect width="24" height="24" fill="white"/>
+    
+    <!-- Sun circle -->
+    <circle cx="12" cy="12" r="4" fill="black"/>
+    
+    <!-- Sun rays -->
+    <rect x="11" y="4" width="2" height="3" fill="black"/>
+    <rect x="11" y="17" width="2" height="3" fill="black"/>
+    <rect x="4" y="11" width="3" height="2" fill="black"/>
+    <rect x="17" y="11" width="3" height="2" fill="black"/>
+    
+    <!-- Diagonal rays -->
+    <rect x="6.1" y="6.1" width="2" height="3" transform="rotate(-45 7.1 7.6)" fill="black"/>
+    <rect x="15.9" y="15.9" width="2" height="3" transform="rotate(-45 16.9 17.4)" fill="black"/>
+    <rect x="15.9" y="6.1" width="2" height="3" transform="rotate(45 16.9 7.6)" fill="black"/>
+    <rect x="6.1" y="15.9" width="2" height="3" transform="rotate(45 7.1 17.4)" fill="black"/>
+  </mask>
+  
+  <!-- This is the transparent part that reveals what's behind the SVG -->
+  <rect width="24" height="24" fill="transparent" mask="url(#sun-mask)"/>
+</svg>