Update index.html

index.html

@@ -8,17 +8,35 @@
     <meta name="author" content="Jonas Andresen">
     <title>Jonas Andresen</title>
 
-    <!-- Favicon links -->
-    <link rel="icon" href="favicon/favicon.ico" type="image/x-icon">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-    <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
-    <link rel="manifest" href="favicon/site.webmanifest">
+    <!-- Default Favicon (Light Mode) -->
+    <link rel="icon" href="favicon/favicon_black.ico" type="image/x-icon">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32_black.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16_black.png">
+
+    <!-- Dark Mode Favicon -->
+    <link rel="icon" href="favicon/favicon_white.ico" type="image/x-icon" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32_white.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16_white.png" media="(prefers-color-scheme: dark)">
+
+    <!-- Apple Touch Icons -->
+    <link rel="apple-touch-icon" href="favicon/apple-touch-icon_black.png">
+    <link rel="apple-touch-icon" href="favicon/apple-touch-icon_white.png" media="(prefers-color-scheme: dark)">
+
+    <!-- Android Chrome Icons -->
+    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192_black.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512_black.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192_white.png" media="(prefers-color-scheme: dark)">
+    <link rel="icon" type="image/png" sizes="512x512" href="favicon/android-chrome-512x512_white.png" media="(prefers-color-scheme: dark)">
+
+    <!-- Web Manifest -->
+    <link rel="manifest" href="favicon/site_black.webmanifest">
+    <link rel="manifest" href="favicon/site_white.webmanifest" media="(prefers-color-scheme: dark)">
 
     <!-- Icon libraries -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons@v4/iconsfont/simple-icons.min.css">
 
+    <!-- Custom Styles -->
     <style>
         body {
             font-family: Helvetica, Arial, sans-serif;