<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"
+/>
<title>Dyslexic Mode Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bo
+otstrap.min.css" rel="stylesheet" />
<style>
/* Load local OpenDyslexic font */
@font-face {
font-family: 'OpenDyslexic';
src: url('fonts/OpenDyslexic.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Dyslexia modes: font and text styling */
html.dyslexia,
html.dyslexia-dark {
font-family: 'OpenDyslexic', sans-serif !important;
letter-spacing: 0.12em;
word-spacing: 0.16em;
line-height: 1.5;
}
/* Extend font to form and UI components */
html.dyslexia input,
html.dyslexia textarea,
html.dyslexia select,
html.dyslexia button,
html.dyslexia .form-control,
html.dyslexia .dropdown-menu,
html.dyslexia .dropdown-toggle,
html.dyslexia-dark input,
html.dyslexia-dark textarea,
html.dyslexia-dark select,
html.dyslexia-dark button,
html.dyslexia-dark .form-control,
html.dyslexia-dark .dropdown-menu,
html.dyslexia-dark .dropdown-toggle {
font-family: 'OpenDyslexic', sans-serif !important;
}
/* Light background for dyslexia mode */
html.dyslexia {
background-color: #ffffff;
color: #212529;
}
/* Dark theme for dyslexia mode */
html.dyslexia-dark {
background-color: #121212;
color: #f1f1f1;
}
html.dyslexia-dark .navbar {
background-color: #1f1f1f !important;
}
html.dyslexia-dark .navbar .nav-link,
html.dyslexia-dark .navbar-brand {
color: #f1f1f1 !important;
}
html.dyslexia-dark .dropdown-menu {
background-color: #2c2c2c;
color: #f1f1f1;
border-color: #444;
}
html.dyslexia-dark .dropdown-item {
color: #f1f1f1;
}
html.dyslexia-dark .dropdown-item:hover {
background-color: #3a3a3a;
color: #ffffff;
}
html.dyslexia-dark .modal-content {
background-color: #2a2a2a;
color: #f1f1f1;
}
html.dyslexia-dark .alert {
background-color: #2c2c2c;
border-color: #444;
color: #f1f1f1;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="col
+lapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">Hom
+e</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
+ data-bs-toggle="dropdown">Menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a>
+</li>
</ul>
</li>
</ul>
<!-- Right aligned: theme dropdown then search -->
<div class="d-flex align-items-center ms-auto">
<div class="dropdown me-3">
<button class="btn btn-outline-secondary dropdown-toggle"
+id="mode-selector" data-bs-toggle="dropdown">
Mode: <span id="current-mode">Auto</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" data-mode="light">Ligh
+t</button></li>
<li><button class="dropdown-item" data-mode="dark">Dark<
+/button></li>
<li><button class="dropdown-item" data-mode="auto">Auto<
+/button></li>
<li><hr class="dropdown-divider" /></li>
<li><button class="dropdown-item" data-mode="dyslexia">D
+yslexic</button></li>
<li><button class="dropdown-item" data-mode="dyslexia-da
+rk">Dyslexic Dark</button></li>
</ul>
</div>
<form class="d-flex ms-3" role="search">
<input class="form-control me-2" type="search" placeholder
+="Search..." />
<button class="btn btn-outline-success" type="submit">Sear
+ch</button>
</form>
</div>
</div>
</div>
</nav>
<main class="container py-5">
<h1>Welcome</h1>
<p>This page supports dyslexic-friendly light and dark modes using
+ the local OpenDyslexic font.</p>
<div class="alert alert-warning" role="alert">
This is a dyslexic-friendly alert box.
</div>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-tar
+get="#exampleModal">
Launch Modal
</button>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelle
+dby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</
+h5>
<button type="button" class="btn-close" data-bs-dismiss="mod
+al" aria-label="Close"></button>
</div>
<div class="modal-body">
This modal also uses the OpenDyslexic font in all supported
+modes.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dism
+iss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</
+button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bo
+otstrap.bundle.min.js"></script>
<script>
(() => {
const current = document.getElementById('current-mode');
const storageKey = 'preferredMode';
const setModeLabel = (mode, sysMode = '') => {
if (mode === 'auto') {
current.textContent = 'Auto (' + sysMode.charAt(0).toUpperCa
+se() + sysMode.slice(1) + ')';
} else if (mode === 'dyslexia-dark') {
current.textContent = 'Dyslexic Dark';
} else {
current.textContent = mode.charAt(0).toUpperCase() + mode.sl
+ice(1);
}
};
const applyMode = (mode, manual = true) => {
const html = document.documentElement;
html.classList.remove('dyslexia', 'dyslexia-dark');
html.removeAttribute('data-bs-theme');
if (mode === 'dyslexia') {
html.classList.add('dyslexia');
setModeLabel('dyslexia');
} else if (mode === 'dyslexia-dark') {
html.classList.add('dyslexia-dark');
setModeLabel('dyslexia-dark');
} else if (mode === 'dark' || mode === 'light') {
html.setAttribute('data-bs-theme', mode);
setModeLabel(mode);
} else if (mode === 'auto') {
const sysMode = window.matchMedia('(prefers-color-scheme: da
+rk)').matches ? 'dark' : 'light';
html.setAttribute('data-bs-theme', sysMode);
setModeLabel('auto', sysMode);
}
if (manual) localStorage.setItem(storageKey, mode);
};
const savedMode = localStorage.getItem(storageKey) || 'auto';
applyMode(savedMode, false);
document.querySelectorAll('[data-mode]').forEach((btn) => {
btn.addEventListener('click', () => {
const mode = btn.getAttribute('data-mode');
applyMode(mode);
});
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListen
+er('change', (e) => {
const saved = localStorage.getItem(storageKey);
if (saved === 'auto') {
const newMode = e.matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-bs-theme', newMo
+de);
setModeLabel('auto', newMode);
}
});
})();
</script>
</body>
</html>