Adding Colour Themes to Telescope
Tags: opensource, typescript, telescope, senecaosd600
Published: 2022-11-20 15:29:11

I was looking to make a bigger scope of change in [Telescope project](https://github.com/Seneca-CDOT/telescope). There are not many feature requests. I wasn't sure about working on bugs because I couldn't see what is underneath to fix it. Adding additional theme looked interesting to try although I didn't have any knowledge about multiple themes on the webpage. --> [(Issue link)](https://github.com/Seneca-CDOT/telescope/issues/3719)

Telescope already had a toggle button to switch between light and dark mode. The request is to add more themes like GitHub does. I decided to add two more theme as adding more themes will be easier once I figure it out. At the beginning, it seemed it wasn't much work as I found `createTheme()` method from MUI. I could just add additional colour palettes using this method. Soon I realized that MUI currently support only two modes, light and dark, which is constrained in property `type`. Type definition, event handler, colour palette are all bound together. I was not sure how to solve this. I just started to make a UI to do my own experiment. 

For the UI, I tried to use the similar way with original toggle button that does not direct to the user to different page. So I created `ThemeSelector` component that will replace `ThemeToggleButton` component. Then I picked up *MUI Popover*, and added a menu and colour palette pictures to give the user an expectation how it is like to be. 

![Initial theme selector prototype](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eti5609rq8x4tb5qmng.png)*Initial theme selector prototype*


Next question is how to make new binding while any new name is not allowed in MUI colour palette property `type`. I could make the theme change working by adding more colour palette sets and replace `toggleTheme()` method with `changeTheme()` with switch statement. I know there are some bugs but I wanted to make sure that I was in the right direction. So I pushed my PR to show my current work. The response was much better than my expectation. People found the bugs that I didn't notice as I was busy with implementing. I could see how thoroughly reviewed my change. By fixing all the bugs mentioned in the PR and improving UI experience, my `ThemeSelector` was in much better shape. As per request, I removed the radio button and made the whole line as a button.  It looks much better and easier for users to use as well. 

![Updated theme selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41epqq1s0rk05daws5ix.png)


Last part is to override the colour that is applied to selected colour theme button as the colour didn't seem appropriate and active button colour changed too much by each selection. There are some ways to override colours in MUI. I could use

1. `styleOverrides` for specific component in `createTheme()`
2. `makeStyles()` to apply custom class to component
3. global CSS to define attributes

There are more ways to achieve colour override. I don't want to specify a behaviour with CSS. At the same time, colour override didn't go well as I expected. Using `styleOverrides` is the best choice for me as I don't want my `ThemeSelector` too big and cluttered with a bunch of definitions. Unfortunately, I couldn't override with `styleOverrides`. So I used `makeStyles` to override the selected button colour. My change was ready to go. 

Then I found many Typescript errors thanks to Josue. When I changed one error, then another error occurred in other spot. Unfortunately, I couldn't build it in my local which kept me from finding Typescript errors because my Mac can't locate a folder name as it has spaces. I knew programmers should avoid using empty spaces in folder and file naming. But in overall, I gained a good Typescript experience. Also I changed all hard-coded values to `const` variables and contained them in one location so that the value can be imported anywhere. 

Finally my code is approved and merged into `master`. I think the work scope was bigger than any other 4 PRs that I made during *Hacktoberfest*. I could give it a try and complete the work because I gained some confidence from previous contributions.  I feel much more comfortable with reading documentation, setting up different dev environment, understanding code base, how to approach problem solving, making commit history neat, and communicating in GitHub. I will try a bigger scope of work next time based on confidence that I built with *Telescope*.



![Final work image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6wdf0i9nx40x307tiw7.png)