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
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.mddoc 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.mdfile 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-darkSCSS variable from the mainapp.scssfile. This allowed for thewater.cssCDN 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 CDNwater.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.app.htmlupon loading reads local storage and determines which CDN link to render. This way changes are dynamic and persistent.feather-iconsinstead of just having the word "Toggle" written in the buttonConclusion
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