Settings Component — Astro

Settings Component

A comprehensive settings panel for theme switching, font size adjustment, and accessibility options.

Features

• Theme Switcher - Integrated ThemeSwitcher component with theme icons (persists in localStorage as theme)
• Font Size Slider - Adjustable from 75% to 150% with filled track indicator (uses CSS gradient with --slider-progress variable). Persists in localStorage as fontSizeScale
• Reduce Motion Toggle - Applies .reduced-motion class to document root. Persists in localStorage as reducedMotion
• High Contrast Toggle - Applies .high-contrast class to document root. Persists in localStorage as highContrast
• Scrollbar Style - Radio button group with three options: Thin (default, 0.5rem/8px), Thick (1.5rem/24px), and Hidden. Applies classes to html element (.scrollbar-thick or .scrollbar-hidden). Persists in localStorage as scrollbarStyle (values: thin, thick, hidden)
• Opening and Closing Animations - Smooth slide-in from right with overlay fade (respects prefers-reduced-motion)
• Focus Trapping - Tab cycles within panel when open
• Focus Management - Returns focus to trigger element on close
• Slide-in panel with overlay
• All settings persist in localStorage - All preferences are automatically saved and restored on page load
• Full keyboard navigation (Escape to close)
• Accessible ARIA attributes
• Slider track visibility optimized for all themes
• Mobile Responsive - Full width on mobile devices, optimized layout

Settings Persistence

All settings options automatically persist to localStorage and are restored when the page loads:

• theme - Selected theme name (e.g., github-dark-classic, github-light)
• fontSizeScale - Font size multiplier (e.g., 1.0 for 100%, 1.25 for 125%)
• reducedMotion - Boolean string (true or false)
• highContrast - Boolean string (true or false)
• scrollbarStyle - Scrollbar style preference (thin, thick, or hidden)

Live example

Open Settings via the gear icon in the navbar or the button below (same as navbar).

Usage

---
import Settings from '../../components/Settings.astro';
---

<!-- Include once in layout (e.g. with Navbar). Default closed. -->
<Settings open={false} />

<!-- Open/close from JS (e.g. navbar gear button): -->
<!-- window.openSettings(); window.closeSettings(); -->

Props

• open (boolean, optional) - Whether settings panel is open by default (default: false)

Opening Settings

The Settings component registers window.openSettings() and window.closeSettings(). The Navbar gear button calls openSettings().

// Open the settings panel (e.g. from a button or navbar)
window.openSettings();

// Close the settings panel
window.closeSettings();

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above; scaffold includes openSettings().