Doc edits for Windows users and Light/Dark Mode toggle

[dopecello]

Note:

Commits on August 8th were already in master branch on my repo

I reduced the amount of commits by doing git diff master..<feature-branches> | git apply - and then applying the changes.

Doc Changes

• All the August 8th commits are edits to the pb/README.md doc and illustrate a Windows set up with Docker. I made some slight edits to uncapitalized letters, misspellings, and some extra clarifications..

• Overall, I used the ./README.md file to illustrate a clear set up process in the following order: With Docker, With pocketbase binary, and with Go Tools installed.

Frontend Changes

• Removed the --background-color-dark SCSS variable from the main app.scss file. This allowed for the water.css CDN to take more control.

• Added a <ThemeToggle /> component as a button to toggle the light and dark theme of the site. Seeing how the website generally stems from a CDN water.css, I checked the website and the terse documentation and came up with a solution where the CDN renders a light and dark through interaction with this component.

  • The component stores a light or dark mode value into local storage
  • app.html upon loading reads local storage and determines which CDN link to render. This way changes are dynamic and persistent.
  • the component null-checks the element and type-assets the media attribute on the HTMLelement.
  • Added an icon through another CDN called feather-icons instead of just having the word "Toggle" written in the button

Conclusion

Light mode and dark mode is fully controlled by the CDN now and this paves the way to clean up a lot of the CSS. Now we can measure which elements to override on both modes

[jkdoshi]

Thank you for the PR. Bear with me while I integrate it.