Add a dyslexia-friendly theme

Author: aaronshekey

docs/_includes/head.html

@@ -21,6 +21,9 @@
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
 
+    <!-- Fonts -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css">
+
     <!-- CSS -->
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
     <link rel="stylesheet" type="text/css" href="{{ "/assets/css/stacks-documentation.min.css" | relative_url }}?{{page.date | date: '%s%N'}}">

docs/_includes/header.html

@@ -87,13 +87,22 @@
                 </div>
                 <div class="flex--item">
                     <div class="d-flex ai-center jc-space-between gs8">
-                        <label class="flex--item s-label fs-body1 fw-normal js-highcontrast-btn" for="toggle-theme-highcontrast">High contrast mode</label>
+                        <label class="flex--item s-label fs-body1 fw-normal" for="toggle-theme-highcontrast">High contrast mode</label>
                         <div class="flex--item s-toggle-switch">
                             <input id="toggle-theme-highcontrast" type="checkbox">
                             <div class="s-toggle-switch--indicator"></div>
                         </div>
                     </div>
                 </div>
+                <div class="flex--item">
+                    <div class="d-flex ai-center jc-space-between gs8">
+                        <label class="flex--item s-label fs-body1 fw-normal" for="toggle-theme-dyslexic">Dyslexic-friendly fonts</label>
+                        <div class="flex--item s-toggle-switch">
+                            <input id="toggle-theme-dyslexic" type="checkbox">
+                            <div class="s-toggle-switch--indicator"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

docs/_includes/layouts/home.html

@@ -196,6 +196,15 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="flex--item">
+                            <div class="d-flex ai-center jc-space-between gs8">
+                                <label class="flex--item s-label fs-body1 fw-normal" for="toggle-theme-dyslexic">Dyslexic-friendly fonts</label>
+                                <div class="flex--item s-toggle-switch">
+                                    <input id="toggle-theme-dyslexic" type="checkbox">
+                                    <div class="s-toggle-switch--indicator"></div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

docs/_includes/theme.html

@@ -30,5 +30,13 @@
         } else {
             document.body.classList.remove("theme-highcontrast");
         }
+
+        var dyslexic = localStorage.getItem("dyslexicTheme");
+
+        if (dyslexic === "true") {
+            document.body.classList.add("theme-dyslexic");
+        } else {
+            document.body.classList.remove("theme-dyslexic");
+        }
     }());
 </script>

docs/assets/js/feature.theming.js

@@ -2,15 +2,18 @@ $(document).ready(function () {
     var themeDarkToggleSwitch = $("#toggle-theme-dark");
     var themeCustomToggleSwitch = $("#toggle-theme-custom");
     var themeHighcontrastToggleSwitch = $("#toggle-theme-highcontrast");
+    var themeDyslexicToggleSwitch = $("#toggle-theme-dyslexic");
     var body = $("body");
     var browserPrefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
     var isCustom = body.hasClass("theme-custom");
+    var isDyslexic = body.hasClass("theme-dyslexic");
     var isDark = body.hasClass("theme-dark") || browserPrefersDark && body.hasClass("theme-system");
     var isHighcontrast = body.hasClass("theme-highcontrast");
 
     themeCustomToggleSwitch.prop("checked", isCustom);
     themeDarkToggleSwitch.prop("checked", isDark);
     themeHighcontrastToggleSwitch.prop("checked", isHighcontrast);
+    themeDyslexicToggleSwitch.prop("checked", isDyslexic);
 
     themeDarkToggleSwitch.change(function (e) {
         e.preventDefault();
@@ -48,6 +51,20 @@ $(document).ready(function () {
         return false;
     });
 
+    themeDyslexicToggleSwitch.change(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        var isDyslexic = body.hasClass("theme-dyslexic");
+
+        $(this).prop("checked", !isDyslexic);
+        body.toggleClass("theme-dyslexic", !isDyslexic);
+
+        localStorage.setItem("dyslexicTheme", !isDyslexic);
+
+        return false;
+    });
+
     themeHighcontrastToggleSwitch.change(function (e) {
         e.preventDefault();
         e.stopPropagation();

lib/css/exports/_stacks-constants-type.less

@@ -33,6 +33,11 @@ body {
     --theme-body-font-family: var(--ff-sans);
 }
 
+body.theme-dyslexic {
+    --ff-sans: "Comic Sans MS";
+    --ff-mono: Comic Mono;
+}
+
 //  ============================================================================
 //  $   FONT SIZES (fs-)
 //      Base font-size is 13px.