Making the web a better place

• What you need to know? Some basic CSS
• What you need to have? A Github account
• What we gonna do? A dark theme for ladybug.dev

Hi there, have you ever entered a website and thought that you could improve the design? Maybe you saw a link called "fix our website" but you had no courage to try it? Or maybe you just wish that great site had a dark theme?

Here you will learn how to begin being a part of the web development.
We will take a look at this amazing podcast website and we're gonna build a dark theme for it. The code you will see here is the one current working at the site and all links to the real thing will be available for you check every step.

Our to do list:

1. Find the website code (github repository)
2. Find the file to edit
3. Write some CSS
4. Test our changes
5. Fork the repository (create a copy to edit)
6. Create a branch (optional)
7. Make a Commit (save our work in git)
8. Make a Pull Request (upload our work)

So let's begin, the first thing we need is the website code. Since most websites today use a lot of back-end services we can't do like in the 90's and just "right click" and "view source". That will show us just the HTML and we won't have a nice way to send it, can you imagine uploading a zip file in an email for every change in the site, it just won't work on the long run.

✅ 1. Find the website code

Thankfully the site we are going to work on has a public repository and you can find it on the footer clicking the "fix our site" link. Before starting to work, you should send a DM or create a issue in Github to notify the site owner of your intentions and make sure it will be well received.

✅ 2. Find the file to edit

Now let's find where in the rep we should make our changes. There are lot's of files in the repository and we just want to change the styles. To find the file we need, let's make a search in the Github repository for "extension:css". The results show us a few style-sheets but only one of them (src/pages/pages.css) is not under the components folder. So this gotta be the one we need in order to change all the website's pages.

✅ 3. Write some CSS

Since we don't want to impose the dark theme to every user, we are going to use the CSS media query "prefers-color-scheme: dark". This will apply our new styles only for users that have selected dark mode in their system options.

Let's do some coding shall we? Nothing complicated, just a dark background and white text color:

@media (prefers-color-scheme: dark) {
  html body {
    background-color: #12171c; 
    color: #fff;
  }
}

✅ 4. Test our changes

If you wanna test it out, you have a few options. The most basic is to use devtools (F12), but I won't go in details about it because I love devtools so much that this article would become a book. If you wanna learn about it there are lots of great resources and I strongly recommend you doing it.

But for those who want a faster solution I suggest the Stylus extension. It will inject custom CSS to any website, so if the webmaster don't accept your changes you can still have them on your computer.

After testing you will already see some nice results, but there are a few details to fix. The links are too dark and we don't want poor contrast, it's uncomfortable to read and against all accessibility rules. To fix them we will use a new color for the font and the bottom border. Also let's give them a highlight color for when the link is focused:

  ul a, p a, a.highlight {
    color: #f05657;
    border-bottom: 2px solid #f05657;
  }
  ul a:hover, p a:hover, a.highlight:hover {
    color: #f25ea2;
    border-bottom: 2px solid #f25ea2;
  }

Finally we have some images that have transparent background that are also losing contrast, we can fix that by adding a white background with some opacity (alpha channel) using rgba:

  ul img, p img {
    background: rgba(255,255,255,0.3);
  }

✅ 5. Fork the repository

✅ 6. Create a branch

Nice, it's looking great! We are ready to send our code to the Github repository. First let's fork the repository (with the "Fork" button). Next let's create a branch for our changes, this is not required but it makes things in the long run. To create a branch just click the drop-down menu that says "Branch: master" and type the new branch name and then click in "Create branch".

Let's open pages.css and click the pen icon (next to the garbage icon) to edit the file. On the bottom of the code let's paste all our CSS snippet:

@media (prefers-color-scheme: dark) {
  html body {
    background-color: #12171c; 
    color: #fff;
  }
  ul a, p a, a.highlight {
    color: #f05657;
    border-bottom: 2px solid #f05657;
  }
  ul a:hover, p a:hover, a.highlight:hover {
    color: #f25ea2;
    border-bottom: 2px solid #f25ea2;
  }
  ul img, p img {
    background: rgba(255,255,255,0.3);
  }
}

✅ 7. Make a Commit

Now let's save our changes by clicking "Commit changes", the green button on the bottom. You can add a title and some brief explanation to remind yourself of what you changed. Now our changes are saved in our fork repository, we can check if it's all good and fix any silly mistakes before making our "Pull request" or just PR. That's just fancy git term for "Send code to original repository".

You can check the "git-diff" of each commit to get a list of all files that were changed and be extra sure that your code is just as you intended.

✅ 8. Make a Pull Request

You will find the "Pull request" button right under the green "Clone or download" button in the fork repository first page. You can add a title and some explanation to your pull request to facilitate the analysis of your request. It's also good to have a nice description if you ever need to undo some old change.

All your commits will be listed in the PR link and it's great to discuss further improvements or just to understand how the code was developed.

Conclusion

That's all ✨, you've done your part. Now you just gotta wait for the repository owner to merge your request and the whole world will be able to enjoy you contribution, ain't that great?

Remember, you can change anything in the site, not only the style. So what you are waiting for? Go out there and make the web a better place for everyone!!!

And don't forget to share the knowledge ❤ 🦄 🌈