fix phosphor icons CSP issue

css/index.css

@@ -97,7 +97,11 @@ header {
     transform: scale(1.1);
     transition: transform 0.3s;
     cursor: pointer;
-    color: #0475FD;
+}
+
+#themeimg {
+    width: 25px;
+    height: 25px;
 }
 
 #langbtn {

index.html

@@ -31,12 +31,11 @@
     <link rel="stylesheet" href="./css/index.css">
 
 
-    <script src="https://unpkg.com/phosphor-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
     <script src="js/index.js"></script>
 
     
-    <!-- Thanks to https://realfavicongenerator.net/ -->
+    <!-- Generated with https://realfavicongenerator.net/ -->
     <link rel="apple-touch-icon" sizes="180x180" href="./resources/favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./resources/favicons/favicon-16x16.png">
@@ -51,7 +50,7 @@
     <header>
         <div id="options">
             <div id="themebtn" onclick="theme.change()" title="Switch to dark theme">
-                <i class="ph-moon icon"></i>
+                <img id="themeimg" src="./resources/images/moon.svg">
             </div>
             <!--div id="langbtn" title="Wechsle zu Deutsch" onclick="switchLang();">
                 <i class="ph-translate icon"></i>

js/index.js

@@ -26,18 +26,16 @@ const theme = Object.freeze({
             setCookie("theme_pref", newtheme, 7);
         if(newtheme == "dark")
         {
-            if(document.getElementsByClassName("ph-moon")[0])
+            if(document.querySelector("#themeimg"))
             {
-                document.getElementsByClassName("ph-moon")[0].classList.add("ph-sun");
-                document.getElementsByClassName("ph-moon")[0].classList.remove("ph-moon");
+                document.querySelector("#themeimg").src = "./resources/images/sun.svg";
             }
         }
         else
         {
-            if(document.getElementsByClassName("ph-sun")[0])
+            if(document.querySelector("#themeimg"))
             {
-                document.getElementsByClassName("ph-sun")[0].classList.add("ph-moon");
-                document.getElementsByClassName("ph-sun")[0].classList.remove("ph-sun");
+                document.querySelector("#themeimg").src = "./resources/images/moon.svg";
             }
         }
         document.body.dataset.theme = newtheme;

resources/images/moon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="192"
+     height="192"
+     fill="#000000"
+     viewBox="0 0 256 256"
+     style="--darkreader-inline-fill: #000000;"
+     data-darkreader-inline-fill="">
+<rect width="256"
+      height="256"
+      fill="none" />
+<path d="M216.7,152.6A91.9,91.9,0,0,1,103.4,39.3h0A92,92,0,1,0,216.7,152.6Z"
+      fill="none"
+      stroke="#000000"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #ffffff;"
+      data-darkreader-inline-stroke="" />
+</svg>

resources/images/sun.svg

@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="192"
+     height="192"
+     fill="#ffffff"
+     viewBox="0 0 256 256"
+     style="--darkreader-inline-fill: #ffffff;"
+     data-darkreader-inline-fill="">
+<rect width="256"
+      height="256"
+      fill="none" />
+<circle cx="128"
+        cy="128"
+        r="60"
+        fill="none"
+        stroke="#ffffff"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+        style="--darkreader-inline-stroke: #ffffff;"
+        data-darkreader-inline-stroke="" />
+<line x1="128"
+      y1="36"
+      x2="128"
+      y2="16"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="62.9"
+      y1="62.9"
+      x2="48.8"
+      y2="48.8"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="36"
+      y1="128"
+      x2="16"
+      y2="128"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="62.9"
+      y1="193.1"
+      x2="48.8"
+      y2="207.2"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="128"
+      y1="220"
+      x2="128"
+      y2="240"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="193.1"
+      y1="193.1"
+      x2="207.2"
+      y2="207.2"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="220"
+      y1="128"
+      x2="240"
+      y2="128"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+<line x1="193.1"
+      y1="62.9"
+      x2="207.2"
+      y2="48.8"
+      fill="none"
+      stroke="#ffffff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="16"
+      style="--darkreader-inline-stroke: #c4b6a1;"
+      data-darkreader-inline-stroke="" />
+</svg>