Dark Mode

About Me

Photos of Me:

References & Links

• How to Make Dark Mode for Websites using HTML CSS & JavaScript ?
• How to add dark mode to a website with automatic switching (CSS-only + JavaScript)
• A Complete Guide to Dark Mode on the Web
• Dark Mode With One Line Of Code
• Dark Mode Extension with Chrome
• Designing for dark mode: 7 tips to help you do it well

---

Dark Mode UI

September 22, 2021

• Dark Mode

Dark mode has become incredibly popular in the last year, and all popular apps nowadays offer a toggle to turn it on. The link below will show you a short tutorial and look at how to add support for dark mode in your website in different ways: first with just CSS and lastly with a toggle built with JavaScript. (Montales, 2020)

LP1 PAT3 Scoring Guide

September 23, 2021

• Describe how this was innovative and went beyond your current skill level.

My skill sets are beyond HTML and CSS. I know some JavaScript and PHP, but I am a beginner for those two skill sets. Even though I have had some classes on these two subjects, I still get lost in writing that code. I have to look up information to understand JavaScript and PHP better. I decided to go with Dark Mode because it is the easiest to add to your website. Although you have, it does take some time to get the colors just right. You can add Dark Mode to CSS, but you have to go a little further to add pictures. I have used Dark Mode in the past, but when I was on a team, another team member added the Dark Mode, so I never got a chance to learn more about Dark Mode. I went above and beyond studying more about Dark Mode since it is a popular theme across websites. It seems like a widespread discussion among my classmates as well. I went on my skills and changed colors, adding JavaScript, adding a Dark Mode CSS file, and changing how my site will look in Dark Mode.

• State the browser to be used to view your project. Describe the testing done. Describe how you incorporated web standards and design standards learned in your course of study into this project.

I used Google Chrome, Internet Explorer, Microsoft Edge, and Firefox ( use all these browsers to inspect my codes). The testing I did was to ensure that my code was running in dark mode. I then ran the W3C CSSS Validation Service to ensure that my code was valid and had no errors. I do get warnings, but I think that is because I am using bootstrap. I tested several browsers that I have installed to ensure that my website works throughout different browsers. The only issue is that it doesn’t work with Internet Explorer. I also right-clicked on every browser and inspected the errors that I may have encountered. With Google Chrome, I had no issues, but as I got further into my other browser, I had problems with my bootstrap, but no problems using the Dark Mode. I follow the design standards of code by making sure I have a Responsive Design to my website, have straightforward navigation and my site has Accessibility.

• Reflection

The difficulty I had was trying to find a suitable Dark Mode to use. Now every website is going to be different when using Dark Mode. One site might be built just for that Dark Mode, while you can add just a dark mode switch to your website. I was playing around with different dark mode tutorials, and it just seemed to be complicated. Sometimes they don’t have enough information, or is it just for the website they built. I had to play around with a few different dark mode websites, and it was hard to implement them on my website. While I am using an older bootstrap (because I don’t want to change the design yet), I find it difficult while using bootstrap to add dark mode. I know very little about adding colors to a dark mode other than black and white, but I notice you can change a few colors to match the dark and light mode. That being said, I had to compromise my design. With the latest technology, you can add a browser extension to your browser of choice, but the sometimes dark mode doesn’t work on every website or even an e-book. The skills I did gain were learning how to change my codes to make sure my dark mode was running with my website. I also knew a little about JavaScript and adding the code but changing the code for my website. Using Dark Mode, you run into problems, and it might be better to use an extension on your web browser. I have listed my resource below in this scoring guide that helped me learn about Dark Mode.

Contact Me

Sabrina

Email Address:
contact@larsonwebdesign.com