Adding Colour Themes to Telescope

I was looking to make a bigger scope of change in Telescope project. 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)

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

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.

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.