AndrewPaglusch / FlashPaper

One-time encrypted password/secret sharing

MIT License

353 stars 57 forks source link

Add highly requested Dark Mode and Logo support #159

Closed barry-smithjr closed 1 month ago

barry-smithjr commented 2 months ago

This PR enables dark mode and logo support

Technical Details

data-bs-theme HTML element is set to "auto"
When page loads, the JS reads the dark/light preference from the browser and sets accordingly on page and localstorage.
Toggle in the header will update the localstorage and change the page theme.
site_logo setting added to add a logo.
display_title setting added to enable/disable showing of site_title next to the logo.

Changes summary:

Removed hardcoded white backgrouds from textareas
Changed footer to use an included color for readability
Added a header that uses the site_title setting to display app name
Added light/dark toggle
Included Font Awesome 6 solid icons for the light dark toggle
Bootstrap upgraded to 5.3.3
Announcement banner moved under header
Moved "click to copy" code to individual pages

Screenshots

flashpaper-dark

flashpaper-dark-announcement

flashpaper-light

flashpaper-light-announcement

AndrewPaglusch commented 1 month ago

Hey @barry-smithjr thanks for making those fixes. I'll re-review this PR this week