Đang tải bảng tin…
Always Twisted0 Hot0 bình luận11 phút đọc
Modes and Themes That Stick - Building a Persistent Toggle Solution
A layered approach to building a persistent theme and mode toggle for websites. The pattern separates 'mode' (light/dark) from 'theme' (accent color) using separate data attributes, then implements three progressive enhancement layers: semantic HTML with radio inputs, a tiny blocking inline script to prevent flash of wrong theme on load, and a deferred script for interactivity and OS preference tracking. Key decisions covered include using localStorage over cookies or IndexedDB, storing user intent ('system') rather than resolved values, avoiding mixing data-mode CSS selectors with prefers-color-scheme media queries, and accessibility requirements for keyboard and screen reader users. The author also shares that they ultimately removed this feature from their own site, concluding that system preference alone is often sufficient.
Nguồn: https://www.alwaystwisted.com/articles/modes-and-themes-that-stick-building-a-persistent-toggle-solution.html. 8sync News chỉ tóm tắt và dẫn link; bản quyền nội dung thuộc tác giả và nguồn gốc.
Đề xuất cho bạn
Kitty says hi.31 Hot24 phútAI
ProMe, a TTRPG Companion App
ProMe là ứng dụng hỗ trợ (companion app) cho trò chơi nhập vai solo The Protector's Memories, được xây dựng bằng Next.js dưới dạng PWA với tính năng offline nhờ Serwist và lưu trữ cục bộ (local-first) đồng bộ lên Netlify DB (Neon). Ứng dụng tích hợp nhiều công nghệ như bản đồ lục giác CSS, hệ thống nhật ký Markdown nâng cao, âm thanh cross-fading bằng Howler.js, cùng cơ chế đồng bộ hai chiều giữa local và cloud kèm xử lý xung đột.
Lập trình viên cần đọc bài này để khám phá cách xây dựng một ứng dụng PWA toàn diện với Next.js, từ thiết kế giao diện độc đáo đến giải quyết vấn đề đồng bộ hóa dữ liệu và xung đột trong hệ thống local-first, giúp hiểu rõ cách tối ưu hóa hiệu suất và trải nghiệm người dùng trong ứng dụng game.
