Inspiration
Every day having to read through countless PDFs while all of my other applications run in dark mode, so there was always so much contrast when I had to read PDFs because they often only come in one background color: really bright white.
What it does
DarkPDF takes in a PDF file and goes through a process that turns that PDF into an SVG. Once an SVG, we can take in and modify the paths of the drawing mechanism of the DOM. This is how we produce changes in the actual SVG and when rerendered we get a 'dark mode' PDF.
How I built it
I wrapped a create-react-app app inside an Electron.js app so I can write in JSX/React but still be writing an app for the desktop. I had to build upon a library called react-pdf in order to convert the files from PDF into SVG and then being able to have some access to the SVG DOM. I spent a lot of time making sure that the colors of the dark mode were of high contrast, I wanted to make sure that the UI/UX was easy, quick, and beautiful so I spent time designing the front-end.
Challenges I ran into
Building upon react-pdf was hard because I had to understand a code base in a very short period of time, but I ended up getting it all figured out without too much of a rush. The hardest part of building this was styling the SVG's without having 'access' to the file (it was not an object that could be manipulated). One sort of mental challenge I went through in this hackathon was that I was scared to go at it alone as my teammates left me early on because of school issues.
Accomplishments that I'm proud of
I think I've made something that I can work on on the weekends and can actually be a very cool open-source project! I can see the idea being expanded and the app being so much better with the help of open-source. I think I got the UI done pretty well, it really is what I imagined in my head to be. Again, going at it alone was nervewracking but I also made good friends in the process of having to reach out to people for help.
What I learned
I learned how to write an Electron app, manipulate the SVG DOM, and how to work with type conversions.
What's next for DarkPDF
Open-source, make sure that people can download it from the website (ship), and hopefully see some pull requests soon to make DarkPDF better.
Log in or sign up for Devpost to join the conversation.