Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add highly requested Dark Mode and Logo support #159

Merged
merged 28 commits into from
Jun 1, 2024
Merged

Add highly requested Dark Mode and Logo support #159

merged 28 commits into from
Jun 1, 2024

Conversation

barry-smithjr
Copy link
Contributor

@barry-smithjr barry-smithjr commented Apr 24, 2024 •
edited
Loading

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

@barry-smithjr
Update Bootstrap to 5.3.3
ebfb296
@barry-smithjr
add bs theme to main html element
f0ea044
@barry-smithjr
include color toggle js from Bootstrap
c7cbb75
@barry-smithjr
fix pathing for script src
f3fc6ce
@barry-smithjr
add header, nav with site_title and dark mode switch with fontawesome…
0df0861 
… icons
@barry-smithjr
include just the solid icons, move js loading to head and defer
3065185
@barry-smithjr
structure html and change font awesome to all
94cc2bf
@barry-smithjr
localize fontawesome solid and update footer bg color
099321f
@barry-smithjr
update FA icon for latest version
47906d8
@barry-smithjr
include fontawesome base css
baa97fa
@barry-smithjr
update header
51184d7
@barry-smithjr
move flashpaper JS to flashpaper.js
1598ccd
@barry-smithjr
Revert "move flashpaper JS to flashpaper.js"
dc5e3d8 
This reverts commit 1598ccd.
@barry-smithjr
move click-to-copy code to view_code, fixes issues with dark mode
c54d563
@barry-smithjr
add copy code to view_secret.php
fc449e9
@barry-smithjr
remove hardcoded white textareas and form controls
95d1b7f
@barry-smithjr
set theme preference in localstorage for persistence
877dfc6
@barry-smithjr
set bs-theme to auto reducing any flicker
387adad
@barry-smithjr barry-smithjr mentioned this pull request Apr 24, 2024
Closed
@barry-smithjr barry-smithjr changed the title Add highly requested Dark Mode Add highly requested Dark Mode and Logo support Apr 28, 2024
AndrewPaglusch
AndrewPaglusch requested changes May 25, 2024
View reviewed changes
Copy link
Owner

@AndrewPaglusch AndrewPaglusch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some small changes and questions @barry-smithjr. Thanks!

@barry-smithjr
Address requested changes
8171400 
- Updated docker/entrypoint.sh
- Updated docker/settings.php.TEMPLATE
- Clean up script tags in html/header
- Fixed indentation in html/header
- Removed JS in html/view_code.php and html/view_secret.php
- Renamed constant in js/color-toggle.js
@barry-smithjr
Clean up empty echo
3ce241d
@barry-smithjr
Add new env variables to docker-compose.yml
23aa13f
@barry-smithjr
Remove logo path from entrypoint.sh
713b3f5
@AndrewPaglusch
Copy link
Owner

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

@AndrewPaglusch AndrewPaglusch merged commit 24700df into AndrewPaglusch:master Jun 1, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mattburchett mattburchett mattburchett approved these changes

@AndrewPaglusch AndrewPaglusch AndrewPaglusch approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@barry-smithjr @AndrewPaglusch @mattburchett