This is a demo of a light/dark background toggle mecanism for websites built with SQLpage.
This example demonstrates:
- how to give the same header, footer, and style to all your pages using the
dynamiccomponent and therun_sqlfunction. - how to use the
themeproperty of theshellcomponent. - how to store and reuse persistent user-specific preferences using cookies.
The SQL backend to this is SQLite, so the installation is easy:
-
Clone SQLpage''s repository:
git clone https://github.com/lovasoa/SQLpage.git -
cd to
SQLpage/examples/light-dark-toggleand runsqlpagein the cloned directory -
Open a browser window to
http://localhost:5005
The initial background theme is light. To switch to dark mode, click on the '' ☀ '' symbol on the right of the top menu bar. Click on the same symbol to switch back to light mode.
I have included some dummy pages under a mock ''Categories'' menu to show that the ''light'' or ''dark'' setting is kept between pages. This is done by setting and reading a cookie called ''lightdarkstatus''.' AS contents_md;