Update docs.html

docs.html

@@ -315,34 +315,39 @@
     }
 
     #pfp {
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 105px;
-      height: 105px;
-      object-fit: cover;
-      border-radius: 5%;
-      border: 3px solid #00bcd4;
-      box-shadow: 
-        0 0 20px rgba(0, 188, 212, 0.8), 
-        0 0 40px rgba(0, 188, 212, 0.4);
-      background: #1a1a2e;
-      z-index: 4;
-    }
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 105px;
+  height: 105px;
+  object-fit: cover;
+  border-radius: 5%;
+  border: 3px solid var(--theme-primary); /* use theme color */
+  box-shadow: 
+    0 0 20px rgba(var(--theme-primary-rgb), 0.8), /* use theme RGB for shadow */
+    0 0 40px rgba(var(--theme-primary-rgb), 0.4);
+  background: var(--theme-bg-secondary);
+  z-index: 4;
+}
 
     .profile-glow {
-      position: absolute;
-      bottom: -30px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      background: radial-gradient(circle, rgba(0, 188, 212, 0.4) 0%, rgba(0, 188, 212, 0.2) 50%, transparent 70%);
-      z-index: 3;
-      animation: profileGlow 3s ease-in-out infinite alternate;
-    }
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle, 
+    rgba(var(--theme-primary-rgb), 0.4) 0%, 
+    rgba(var(--theme-primary-rgb), 0.2) 50%, 
+    transparent 70%
+  );
+  z-index: 3;
+  animation: profileGlow 3s ease-in-out infinite alternate;
+}
 
     @keyframes profileGlow {
       0% { transform: translateX(-50%) scale(1); opacity: 0.6; }