Offcanvas V05

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A floating settings panel for a note-taking app that slides in from the right. The theme picker switches the whole demo between light, dark and system themes, the text size control resizes the note, and the switches show or hide the word count, dim paragraphs in focus mode and widen the page. Every change is announced in a status line and can be reset to defaults.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 534 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Light, dark and system themes driven by custom properties
• Accessible switches built on buttons with role=switch and aria-checked
• Segmented text size control on native radios
• Status line announces each change, with reset to defaults
• Native dialog modal with Esc, backdrop click, focus return and scroll lock