implement saving settings & implement theme chooser

donate/index.html

@@ -19,6 +19,7 @@
     <meta property="og:url" content="https://synth.download/">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="/alt-popup.js"></script>
+    <script src="/settings.js"></script>
     <script async src="https://js.stripe.com/v3/buy-button.js"></script>
 </head>
 
@@ -58,12 +59,28 @@
         <ul>
             <li>
                 <p>Accessibility Settings</p>
-                <p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
+            </li>
+            <li>
+                <span aria-hidden="true" class="seperator"></span>
+                <p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
+                
+                <span>
+                    <input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
+                    <label for="theme-auto">System (Auto)</label><br>
+                </span>
+                <span>
+                    <input type="radio" id="theme-light" name="theme-setting" value="light" />
+                    <label for="theme-light">Light</label><br>
+                </span>
+                <span>
+                    <input type="radio" id="theme-dark" name="theme-setting" value="dark" />
+                    <label for="theme-dark">Dark</label><br>
+                </span>
             </li>
             <li>
                 <span aria-hidden="true" class="seperator"></span>
                 <p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
-                    
+
                 <span>
                     <input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
                     <label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
@@ -112,8 +129,7 @@
             <li>
                 <span aria-hidden="true" class="seperator"></span>
                 <p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
-                <p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
-                <p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
+                <p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
             </li>
         </ul>
     </details>