// Initialize search box
const data = fetch("xref.json").then((data) => data.json());
window.addEventListener("load", () => {
- const main = document.querySelector("header");
- main.insertAdjacentHTML("beforeend", searchHTML);
- const searchWrapper = document.querySelector(".combobox-list");
+ const slot = document.querySelector("#header-search-slot") ?? document.querySelector("header");
+ if (!slot) return;
+
+ slot.insertAdjacentHTML("beforeend", searchHTML);
+
+ const searchWrapper = document.querySelector("#search-wrapper .combobox-list");
+ if (!searchWrapper) return;
+
data.then((data) => {
registerSearch({ searchWrapper, data, domainMappers });
});
diff --git a/static-web/theme-toggle.js b/static-web/theme-toggle.js
new file mode 100644
index 00000000..aae589e4
--- /dev/null
+++ b/static-web/theme-toggle.js
@@ -0,0 +1,266 @@
+// Theme toggle functionality with localStorage persistence
+(function () {
+ "use strict";
+
+ const STORAGE_KEY = "verso-theme";
+ const THEMES = {
+ system: { label: "System" },
+ light: { label: "Light" },
+ dark: { label: "Dark" },
+ };
+ const ICONS = {
+ system: '
',
+ light: '
',
+ dark: '
',
+ chevron:
+ '
',
+ };
+
+ let toggleButton = null;
+ let toggleMenu = null;
+ let optionButtons = [];
+
+ function getSystemTheme() {
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+ }
+
+ function getStoredTheme() {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ return stored === "dark" || stored === "light" ? stored : null;
+ } catch {
+ return null;
+ }
+ }
+
+ function getSelectedTheme() {
+ return getStoredTheme() ?? "system";
+ }
+
+ function getEffectiveTheme() {
+ return getStoredTheme() ?? getSystemTheme();
+ }
+
+ function setTheme(theme) {
+ if (theme === "system") {
+ document.documentElement.removeAttribute("data-theme");
+ } else {
+ document.documentElement.setAttribute("data-theme", theme);
+ }
+ updateToggleUI();
+ }
+
+ function storeTheme(theme) {
+ try {
+ if (theme === "system") {
+ localStorage.removeItem(STORAGE_KEY);
+ } else {
+ localStorage.setItem(STORAGE_KEY, theme);
+ }
+ } catch {
+ // localStorage might be unavailable
+ }
+ }
+
+ function closeMenu() {
+ if (!toggleButton || !toggleMenu) return;
+ toggleMenu.hidden = true;
+ toggleButton.setAttribute("aria-expanded", "false");
+ }
+
+ function getSelectedOptionIndex() {
+ const selectedTheme = getSelectedTheme();
+ const index = optionButtons.findIndex(
+ (button) => button.getAttribute("data-theme-option") === selectedTheme,
+ );
+ return index === -1 ? 0 : index;
+ }
+
+ function focusOption(index) {
+ const button = optionButtons[index];
+ if (button) {
+ button.focus();
+ }
+ }
+
+ function focusAdjacentOption(delta) {
+ const currentIndex = optionButtons.findIndex((button) => button === document.activeElement);
+ const startIndex = currentIndex === -1 ? getSelectedOptionIndex() : currentIndex;
+ const nextIndex = (startIndex + delta + optionButtons.length) % optionButtons.length;
+ focusOption(nextIndex);
+ }
+
+ function closeMenuAndFocusToggle() {
+ closeMenu();
+ if (toggleButton) {
+ toggleButton.focus();
+ }
+ }
+
+ function openMenu(focusIndex = null) {
+ if (!toggleButton || !toggleMenu) return;
+ toggleMenu.hidden = false;
+ toggleButton.setAttribute("aria-expanded", "true");
+ if (typeof focusIndex === "number") {
+ focusOption(focusIndex);
+ }
+ }
+
+ function applyTheme(theme) {
+ storeTheme(theme);
+ setTheme(theme);
+ closeMenuAndFocusToggle();
+ }
+
+ function updateToggleUI() {
+ const selectedTheme = getSelectedTheme();
+ const effectiveTheme = getEffectiveTheme();
+
+ if (toggleButton) {
+ const icon = toggleButton.querySelector(".theme-toggle-button-icon");
+ const chevron = toggleButton.querySelector(".theme-toggle-button-chevron");
+ if (icon) icon.innerHTML = ICONS[selectedTheme];
+ if (chevron) chevron.innerHTML = ICONS.chevron;
+
+ const label =
+ selectedTheme === "system"
+ ? `Theme: System (currently ${effectiveTheme})`
+ : `Theme: ${THEMES[selectedTheme].label}`;
+ toggleButton.setAttribute("aria-label", label);
+ toggleButton.title = label;
+ }
+
+ optionButtons.forEach((button) => {
+ const optionTheme = button.getAttribute("data-theme-option");
+ if (!optionTheme || !(optionTheme in THEMES)) return;
+
+ const icon = button.querySelector(".theme-toggle-option-icon");
+ if (icon) icon.innerHTML = ICONS[optionTheme];
+
+ button.setAttribute("aria-checked", String(optionTheme === selectedTheme));
+ });
+
+ const systemMeta = document.querySelector(
+ '[data-theme-option="system"] .theme-toggle-option-meta',
+ );
+ if (systemMeta) {
+ systemMeta.textContent = `Follow your OS setting (currently ${effectiveTheme})`;
+ }
+ }
+
+ function initTheme() {
+ const stored = getStoredTheme();
+ if (stored === "dark" || stored === "light") {
+ document.documentElement.setAttribute("data-theme", stored);
+ } else {
+ document.documentElement.removeAttribute("data-theme");
+ }
+ }
+
+ function initToggle() {
+ const widget = document.getElementById("theme-toggle");
+ toggleButton = document.getElementById("theme-toggle-button");
+ toggleMenu = document.getElementById("theme-toggle-menu");
+ optionButtons = Array.from(document.querySelectorAll("[data-theme-option]"));
+
+ if (!toggleButton || !toggleMenu || optionButtons.length === 0) return;
+
+ if (widget) {
+ widget.hidden = false;
+ }
+
+ toggleButton.addEventListener("click", (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ if (toggleMenu.hidden) {
+ openMenu();
+ } else {
+ closeMenu();
+ }
+ });
+
+ toggleButton.addEventListener("keydown", (event) => {
+ if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+ event.preventDefault();
+ openMenu(getSelectedOptionIndex());
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault();
+ openMenu(optionButtons.length - 1);
+ }
+ });
+
+ optionButtons.forEach((button) => {
+ button.addEventListener("click", (event) => {
+ event.stopPropagation();
+ const optionTheme = event.currentTarget.getAttribute("data-theme-option");
+ if (optionTheme === "system" || optionTheme === "light" || optionTheme === "dark") {
+ applyTheme(optionTheme);
+ }
+ });
+
+ button.addEventListener("keydown", (event) => {
+ if (event.key === "ArrowDown") {
+ event.preventDefault();
+ focusAdjacentOption(1);
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault();
+ focusAdjacentOption(-1);
+ } else if (event.key === "Home") {
+ event.preventDefault();
+ focusOption(0);
+ } else if (event.key === "End") {
+ event.preventDefault();
+ focusOption(optionButtons.length - 1);
+ } else if (event.key === "Escape") {
+ event.preventDefault();
+ closeMenuAndFocusToggle();
+ } else if (event.key === "Tab") {
+ closeMenu();
+ }
+ });
+ });
+
+ document.addEventListener("click", (event) => {
+ const widget = document.getElementById("theme-toggle");
+ if (widget && event.target instanceof Node && !widget.contains(event.target)) {
+ closeMenu();
+ }
+ });
+
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape") {
+ closeMenuAndFocusToggle();
+ }
+ });
+
+ updateToggleUI();
+ }
+
+ function watchSystemTheme() {
+ const media = window.matchMedia("(prefers-color-scheme: dark)");
+ const refresh = () => {
+ if (!getStoredTheme()) {
+ document.documentElement.removeAttribute("data-theme");
+ updateToggleUI();
+ }
+ };
+
+ if (typeof media.addEventListener === "function") {
+ media.addEventListener("change", refresh);
+ } else if (typeof media.addListener === "function") {
+ media.addListener(refresh);
+ }
+ }
+
+ initTheme();
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", () => {
+ initToggle();
+ watchSystemTheme();
+ });
+ } else {
+ initToggle();
+ watchSystemTheme();
+ }
+})();
diff --git a/static-web/verso-vars.css b/static-web/verso-vars.css
index f640503d..3586afb4 100644
--- a/static-web/verso-vars.css
+++ b/static-web/verso-vars.css
@@ -1,4 +1,6 @@
:root {
+ color-scheme: light;
+
/** Typography **/
/* The font family used for headers, ToC entries, etc */
--verso-structure-font-family: "Helvetica Neue", "Segoe UI", "Roboto", Arial, sans-serif;
@@ -7,13 +9,59 @@
/* The font family used for code */
--verso-code-font-family: monospace;
+ /** Background colors **/
+ --verso-background-color: #ffffff;
+ --verso-background-color: light-dark(#ffffff, #1e1e1e);
+ /*
+ Secondary background used for elevated UI regions, such as sidebars, controls,
+ and overlays that sit on top of the page background.
+ */
+ --verso-secondary-background-color: #f9fbfd;
+ --verso-secondary-background-color: light-dark(#f9fbfd, #181818);
+ --verso-surface-color: var(--verso-secondary-background-color);
+
/** Text colors **/
- --verso-text-color: black;
+ --verso-text-color: #333333;
+ --verso-text-color: light-dark(#333333, #eeeeee);
+ --verso-text-color-light: #64748b;
+ --verso-text-color-light: light-dark(#64748b, #bbbbbb);
--verso-code-color: black;
+ --verso-code-color: light-dark(black, #eeeeee);
--verso-structure-color: black;
+ --verso-structure-color: light-dark(black, #eeeeee);
+
+ /** Link colors **/
+ --verso-link-color: #386ee0;
+ --verso-link-color: light-dark(#386ee0, #3b94ff);
+ --verso-link-hover-color: #0073e6;
+ --verso-link-hover-color: light-dark(#0073e6, #4d9efc);
+
+ /** Border colors **/
+ --verso-border-color: #e4ebf3;
+ --verso-border-color: light-dark(#e4ebf3, #696969);
+ --verso-border-color-light: #d1d9e2;
+ --verso-border-color-light: light-dark(#d1d9e2, #8a8a8a);
+ --verso-search-box-border-color: #8ea1b3;
+ --verso-search-box-border-color: light-dark(#8ea1b3, #9aa7b6);
+ --verso-search-box-border-active-color: var(--verso-link-color);
/** Selected items (e.g. search results) */
--verso-selected-color: #def;
+ --verso-selected-color: light-dark(#def, #2a4a6a);
+
+ /** Shadow colors **/
+ --verso-shadow-color: rgba(35, 55, 139, 0.1);
+ --verso-shadow-color: light-dark(rgba(35, 55, 139, 0.1), rgba(0, 0, 0, 0.5));
+
+ /** Hover/tooltip colors **/
+ --verso-hover-background-color: #e5e5e5;
+ --verso-hover-background-color: light-dark(#e5e5e5, #3a3a3a);
+ --verso-hover-highlight-color: #eeeeee;
+ --verso-hover-highlight-color: light-dark(#eeeeee, #444444);
+ --verso-error-hover-color: #ffb3b3;
+ --verso-error-hover-color: light-dark(#ffb3b3, #5c2a2a);
+ --verso-info-hover-color: #b3d4ff;
+ --verso-info-hover-color: light-dark(#b3d4ff, #2a3d5c);
/** Message colors **/
/*
@@ -23,11 +71,15 @@
wavy underline or a bar in the margin).
*/
--verso-info-color: black;
+ --verso-info-color: light-dark(black, #eeeeee);
--verso-info-indicator-color: #4777ff;
--verso-warning-color: black;
+ --verso-warning-color: light-dark(black, #eeeeee);
--verso-warning-indicator-color: #e7a71d; /* 2.11 contrast ratio for white, 9.94 for black */
--verso-error-color: #cc0000;
+ --verso-error-color: light-dark(#cc0000, #ff6666);
--verso-error-indicator-color: #ff0000;
+ --verso-error-indicator-color: light-dark(#ff0000, #ff4444);
/** Code Highlighting **/
/*
@@ -52,3 +104,13 @@
--verso-code-var-style: italic;
--verso-code-kw-font-family: var(--verso-code-font-family);
}
+
+@media (prefers-color-scheme: dark) {
+ :root[data-verso-dark-mode]:not([data-theme="light"]) {
+ color-scheme: dark;
+ }
+}
+
+:root[data-verso-dark-mode][data-theme="dark"] {
+ color-scheme: dark;
+}