Finishing Up Release 0.4
Tags: opensource
Published: 2021-12-10 22:20:32

## Intro

Hello! This is my last blog post for OSD600 and this week, I worked on two pull requests for my last assignment. If you've read my previous [blog post](https://dev.to/lyu4321/open-source-part-13-finding-issues-43gn), I've been working on two issues for Seneca's IPC144 course website [repository](https://github.com/Seneca-ICTOER/IPC144). The first issue, which I blogged about [last week](https://dev.to/lyu4321/converting-raster-images-to-svgs-26ap), involves finding a way to convert raster images to SVGs. The second issue, which I worked on this week, involves updating the website style to work for both light and dark modes. This blog post will summarize the pull requests I created for both issues. 

## Issue 1
[PR](https://github.com/Seneca-ICTOER/IPC144/pull/147)

This [issue](https://github.com/Seneca-ICTOER/IPC144/issues/120) was about experimenting with [SVGCode](https://svgco.de/) to see if it could be used to convert raster images to SVGs. I blogged about this process in my last [post](https://dev.to/lyu4321/converting-raster-images-to-svgs-26ap). I created a pull request which demoed the results of my research by including several SVGs that I created using SVGCode, Adobe Illustrator and Inkscape. Overall, I think that Inkscape produced the most consistent results for coloured and black and white images compared to other tools I tried, which I mentioned in my PR. 

## Issue 2
[PR](https://github.com/Seneca-ICTOER/IPC144/pull/145)

For this [issue](https://github.com/Seneca-ICTOER/IPC144/issues/112), I had to come up with a strategy for styling that would work in both light and dark modes. For example, some table cells in dark mode originally had white text on a yellow background, which is very hard to see:

![Original Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0vjri3pgea830xrq92m.png)

I went through the pages of the site and other than highlighting and image backgrounds, I didn't notice any major issues that appeared due to using a specific mode.

For the highlighting issue, I decided to stick with the yellow background in light mode and for dark mode, I decided to use a different colour since the yellow seemed too bright on a dark background:

Light Mode
![New Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5shcf2m2gt5l7vb3928w.png)

Dark Mode 
![New Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jr3ig8kl4zaql41k18h.png)

I did this by creating a class called highlight and applying different styles depending on the [mode](https://docusaurus.io/docs/styling-layout#dark-mode):
```css
.highlight {
  background-color: rgb(255, 255, 224) !important;
}

html[data-theme='dark'] .highlight {
  background-color: rgb(72, 77, 91) !important;
}
```

In addition I added a white background to all images for both modes, since some images looked a bit weird on a black background:

Before 

![Image Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg8zhq70mp6by3ttoql6.png)

After

![Image After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kras5hf63gghuyfhc5j.png)

I did this by adding a white background when the site is in dark mode:
```css
html[data-theme='dark'] p img {
  background-color: rgb(255, 255, 255);
}
```

## Conclusion

As of this blog post (Dec 10), I haven't received any reviews on my pull requests from the maintainers. For the SVG issue, I don't expect my changes to get merged as the issue was just to experiment with [SVGCode](https://svgco.de/) to see if this tool could be used in the project and the SVGs I included in the pull request were just samples of what I came up with based on my research. 

When starting off this assignment, my goal was to work on open-ended front-end issues that allowed me to be more creative. For my PRs, I was able to experiment with a variety of image editing tools, some which I've used before, such as Inkscape, and others which were new to me, such as SVGCode and Adobe Illustrator. I think this will be useful when I work on future projects involving different image formats. I was also able to experiment with different styles for light and dark modes. Overall, I think this was a great end to a wonderful course and I hope to continue contributing to the open source community even after completing OSD600. Thanks for reading!