fix: Fix theme toggle icons and add macOS install instructions (#447)

- Replace broken css.gg link with inline SVG moon/sun icons (fixes #434, #435)
- Add macOS (Homebrew) installation section to CONTRIBUTING.md

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: MauriceOS

CONTRIBUTING.md

@@ -19,6 +19,17 @@ sudo apt-get install php-curl
 sudo apt-get install composer
 ```
 
+#### macOS
+
+Using [Homebrew](https://brew.sh):
+
+```bash
+brew install php
+brew install composer
+```
+
+PHP on macOS typically includes the curl extension. If you need to enable it, ensure `php.ini` has `extension=curl` uncommented (run `php --ini` to find your config file).
+
 #### Windows
 
 Install PHP from [XAMPP](https://www.apachefriends.org/index.html) or [php.net](https://windows.php.net/download)

src/demo/css/toggle-dark.css

@@ -15,6 +15,35 @@ a.darkmode {
   transition: 0.2s ease-in box-shadow;
 }
 
+a.darkmode .icon-moon,
+a.darkmode .icon-sun {
+  position: absolute;
+  width: 1.25em;
+  height: 1.25em;
+}
+
+a.darkmode .icon-moon svg,
+a.darkmode .icon-sun svg {
+  width: 100%;
+  height: 100%;
+}
+
+a.darkmode .icon-moon {
+  display: block;
+}
+
+a.darkmode .icon-sun {
+  display: none;
+}
+
+[data-theme="dark"] a.darkmode .icon-moon {
+  display: none;
+}
+
+[data-theme="dark"] a.darkmode .icon-sun {
+  display: block;
+}
+
 a.darkmode:hover {
   box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
 }

src/demo/index.php

@@ -19,7 +19,6 @@ function gtag() {
     <title>Readme Typing SVG - Demo Site</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
-    <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
     <link rel="stylesheet" href="./css/style.css">
     <link rel="stylesheet" href="./css/loader.css">
     <link rel="stylesheet" href="./css/toggle-dark.css">
@@ -184,8 +183,25 @@ function gtag() {
         </div>
     </div>
 
-    <a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode">
-        <i class="<?= isset($_COOKIE["darkmode"]) && $_COOKIE["darkmode"] == "on" ? "gg-sun" : "gg-moon" ?>"></i>
+    <a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode" aria-label="Toggle dark mode">
+        <span class="icon-moon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+        </span>
+        <span class="icon-sun" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+        </span>
     </a>
 </body>
 

src/demo/js/toggle-dark.js

@@ -13,13 +13,11 @@ function toggleTheme() {
 }
 
 function darkmode() {
-  document.querySelector(".darkmode i").className = "gg-sun";
   setCookie("darkmode", "on", 9999);
   document.body.setAttribute("data-theme", "dark");
 }
 
 function lightmode() {
-  document.querySelector(".darkmode i").className = "gg-moon";
   setCookie("darkmode", "off", 9999);
   document.body.removeAttribute("data-theme");
 }