Settings Component — Astro

Settings Component

A comprehensive settings panel for theme switching, font size, font pair (sans + mono), and accessibility options.

Add this component

The command below includes <strong>Settings</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Settings

bash bash Copy code

pnpm dlx rizzo-css add Settings

bash bash Copy code

npx rizzo-css add Settings

bash bash Copy code

bunx rizzo-css add Settings

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
• Font (font pair) - Same UI as Theme: trigger button, dropdown menu with options, and preview panel (sample text in the selected sans + mono). Six pairs: Geist, Inter + JetBrains Mono, IBM Plex Sans + Mono, Source Sans 3 + Source Code Pro, DM Sans + DM Mono, Outfit + JetBrains Mono. Sets --font-family and --font-family-mono on html. Persists in localStorage as fontPair (geist, inter-jetbrains, ibm-plex, source, dm, outfit-jetbrains)
• Sound - “Play sound on click” checkbox. When enabled, a short click sound (Web Audio API) plays on links, buttons, and other interactive elements. Off by default for accessibility. Persists in localStorage as soundEffects
• 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 both system prefers-reduced-motion and the Settings “Reduce motion” toggle (no delay when either is active). Same behavior in Astro, Svelte, and React.
• 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%)
• fontPair - Font pair id (geist, inter-jetbrains, ibm-plex, source, dm, outfit-jetbrains); applies both --font-family and --font-family-mono on load
• soundEffects - true or false; when true, click sound plays on interactive elements (default: off)
• 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

Include Settings once in your layout (e.g. with Navbar). Scripts run after DOM ready so the panel and theme switcher work when imported.

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

<!-- Include once in layout. Default closed. -->
<Settings open={false} />

<!-- Navbar gear calls window.openSettings(); window.closeSettings(); -->

<!-- Rizzo CSS + js/main.js. Full panel: scaffold/vanilla or /docs/vanilla/components/settings -->
<button type="button" class="btn btn-outline" onclick="window.openSettings()">Open settings</button>
<div id="settings-overlay" data-settings aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="settings-title">
  <div class="settings">
    <h2 id="settings-title" class="settings__title">Settings</h2>
    <!-- Theme switcher, font switcher, toggles: copy from packages/rizzo-css/scaffold/vanilla/components/settings.html -->
  </div>
</div>

<script>
  import { Settings } from '$lib/rizzo';
</script>

<Settings open={false} />

<!-- window.openSettings(); window.closeSettings(); -->

<script setup>
import { ref } from 'vue';
import Settings from '@/components/rizzo/Settings.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button @click="open = true">Settings</Button>
  <Settings v-model:open="open" title="Settings">
    <p>Theme, font, options.</p>
  </Settings>
</template>

import { useState } from 'react';
import { Settings, Button } from './components/react';

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Settings</Button>
<Settings open={open} onOpenChange={setOpen} title="Settings">
  <p>Theme, font, options.</p>
</Settings>

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();

Other frameworks: Vanilla · Svelte · Vue · React