background labelling improvements

Author: quantumbagel

index.html

@@ -117,7 +117,7 @@ <h1 class="text-2xl font-bold font-mono tracking-tight text-accent-2">Julian Red
                     Theme/<ion-icon id="theme-toggle-icon" name="moon-outline" class="text-base inline-block align-middle pointer-events-none ml-0.5"></ion-icon>
                 </button>
                 <button id="particle-toggle" class="text-zinc-500 hover:text-accent transition-colors cursor-pointer" aria-label="Background: On">
-                    Background/On
+                    Background/●
                 </button>
             </div>
         </header>

particles.js

@@ -656,9 +656,9 @@
             if (!toggleButton) {
                 return;
             }
-            const label = enabled ? "On" : "Off";
-            toggleButton.textContent = `Background/${label}`;
-            toggleButton.setAttribute("aria-label", `Background: ${label}`);
+            const dot = enabled ? "●" : "○";
+            toggleButton.textContent = `Background/${dot}`;
+            toggleButton.setAttribute("aria-label", `Background: ${enabled ? "On" : "Off"}`);
         };
 
         const initializeParticlesWhenReady = async () => {

templates/index.html

@@ -117,7 +117,7 @@ <h1 class="text-2xl font-bold font-mono tracking-tight text-accent-2">{user.name
                     Theme/<ion-icon id="theme-toggle-icon" name="moon-outline" class="text-base inline-block align-middle pointer-events-none ml-0.5"></ion-icon>
                 </button>
                 <button id="particle-toggle" class="text-zinc-500 hover:text-accent transition-colors cursor-pointer" aria-label="Background: On">
-                    Background/On
+                    Background/●
                 </button>
             </div>
         </header>