Closes Issue #77. Adds dark theme and modified dependent files.

[abhaseen]

Issue This PR Addresses

Closes #77

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Things that were done:

• Moved content from theme.js from telescope/src/frontend/src/ into TopLayout.js in telescope/src/frontend/plugins/gatsby-plugin-top-layout. This was done in order to be able to use variables to determine the colors based on a light or dark preference.

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

This determines the color scheme being used by the user preference in the browser/device. If a preference cannot be found, it will default to using a light theme.

• Moved content and merged into Material UI hook API style format from telescope-post-content.css in telescope/src/frontend/src/components/Post into Post.jsx in the same folder. This was in order to use the class telescopePostContent which will allows us to utilize the variables for dynamic theming.
• In the MobileHeader.jsx file in the Header component, there was a modification made to certain lines of code in order to ensure proper and uniform color scheming of text across mobile and desktop views for the header and the hamburger menu.

How it looks:

Here are the screenshots of how it looks like:

This is the desktop view for the Dark Mode Scheme

This is the mobile view for the Dark Mode Scheme

This is the mobile view with the Navbar visible (from the hamburger menu)

This is the default light theme for desktop

This is the mobile light theme

This is the mobile light theme with the navbar visible.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[agarcia-caicedo]

Hi, @abhaseen, we actually have a dark theme colour palette chosen, which you can find here. We chose those colours as they best fit the material design style. You can read more about that in this site

[agarcia-caicedo]

The changes to the theme also create a contrast issue here:

as #0589D6 and #333E64 do not meet the minimum contrast standard.

[agarcia-caicedo]

Also is there a way an user can chose to toggle this feature?

[abhaseen]

Hi @agarcia-caicedo! Thank you for the feedback! I just had a few questions/comments:

For the light themes, I was using the current colors in the main branch. The site that you mentioned, uses: #00233a, #e5e5e5, #4f96d8 and #a4d4ff, should I update the light theme colors to these?

For the dark themes, I see you guys chose: #303030, #a4c8e9, #121212 and #4f96d8. I was experimenting with some alternatives but didn't consider the contrast issues. Should I revert to the ones listed here?

There might be some issues regarding certain things like the hyperlinks, active and visited. I currently chose "pink" for dark and "purple" for light. Please let me know if there are better choices.

I was debating as to whether adding the switch but it would impact a bit more code. Should I add a switch? This would likely modify the Header component in the MobileHeader.jsx and DesktopHeader.jsx.

[agarcia-caicedo]

@abhaseen don't worry about the light theme, we decided against that theme, and decided to use the ones we currently have in these docs. Sorry this all a bit all over the place.

You should probably use the suggested colors, as we did test them for contrast. We can always change them, but as a base its a good start.

For hyperlinks, we probably want to reuse the same blue as the scroll button. That means #0589D6 in light mode and #a4c8e9 in dark mode. We haven't had much luck introducing additional hues.

For the switch, I'm ok with opening another issue to implement it. We do need to decide how that would look in terms of design too, since there's different ways to go about it. What do you think @humphd?

[abhaseen]

Hi @agarcia-caicedo ! As requested, I have made the necessary changes.

Things That Were Added in the Latest Commit

• Added separated components to store the lightTheme and the darkTheme, this follows a more modular design and this will make it easier to reference for anyone who will work on it in the future. These are all in a new folder called theme.
• Added a theme mapper to select the appropriate theme based on what was toggled. In same folder as mentioned above.
• Modified MobileHeader and DesktopHeader to include a button that will toggle the ability to go from light to dark or vice versa.
• Modified Post to take the text secondary color rather than the secondary.main.
• Modified SearchBar to use textPrimary and default colors rather than the primary.main and primary.contrastText.
• We're now going to be using a button to toggle rather than taking the default user preference. This way users can switch between the two as they please.

Important changes to color schemes:

The original color in the "Light Theme" that was being used for the post titles based on the scheme you had linked me to was using:
#0589D6 this color was not contrasting well by the standards of the google chrome dev tool suggestions. So I changed it to: #35b4ff which Text Secondary. This was suggested by the Chrome Dev Too:

Above is the original

Above is what it has been changed to - see the right hand side where the Google Chrome Dev Tool suggestion is

Now, for the links in the light theme, there was also a contrast issue. The original color that was being used was also #0589D6. As suggested by Google Chrome Dev Tool, I changed to #034e7a. See images below:

Above is the original

Above is the modified version

And here are the link colors for visited websites:
Pink (#FFC0CB) for the Dark Theme (as seen below):

Purple (#800080) for the Light Theme (as seen below):

Also here's what the button looks like:

Above is the Dark Theme

Above is the Light Theme

As for the button method, there is a drawback: it does not persist with the session, it will reset to light theme by default upon refresh.

[humphd]

This needs a rebase for conflicts in src/frontend/src/components/SearchBar/SearchBar.jsx

[manekenpix]

As @humphd, this needs a rebase, and please don't merge master into your branch:

[agarcia-caicedo]

Accidentally approved, rebase needs to happen, but I do like the changes

rebase needed

[agarcia-caicedo]

The search page has some issues:
Both the placeholder text and the text in the search field are dark in dark mode:

The about page:
The text is light in light mode

Dark mode is mostly fine, except the links are the same as the ones for light mode

[tonyvugithub]

@humphd : Do we have a final agreement to what approach we should do? because this will affect my #1386 theming set up for Next and I am going to start on it shortly.

[humphd]

I don't know enough about theming to answer this, except to say that I'd like to do what's going to work for our stack: Next.js, TypeScript, and Material-UI. Whatever those three want, that's what we need to do.

[tonyvugithub]

@abhaseen : I might have to ask you to switch your theme.js file to its previous state and if make any changes, please refer to the MUI theming structure that I have included in one of the comments. The sooner you can resolve this, the sooner we can port theming to NextJS

[abhaseen]

Hi @tonyvugithub ! Sorry I haven't been replying, I just wanted to let everyone know I'm still working on this, but I won't be able to push any meaningful updates for the next couple of weeks (due to exams, I kind of want to give this my undivided attention). Just a brief question: for the customs themes that I implemented, would you want me to follow the scheme similar to what you have posted? I had seen you do some work in PR #1386 , so I just wanted to know if I should work with those files that have been set up. Please let me know, thanks!

[tonyvugithub]

@abhaseen : hi, it would be easier for porting if your theme can follow the same structure that I have in my issue. Later on we can come back to this and adjust. During the posting process, it is better to stick to the default option as much as possible. And if you can adjust your issue the same as my PR then it is even better. I really appreciate your cooperation. Thank you and good luck with your exams.

[yuanLeeMidori]

@abhaseen Hi! Thank you for the great work 👍 Telescope team is handling the open PRs for the upcoming release. In that case, we need to know if you're still working on this PR. We're happy to see you continue the work; but if you don't want to keep working on it, we would like to be informed and will be assigning this PR to other team members.
Thank you! The work you have done is impressive.

[abhaseen]

@yuanLeeMidori , yes, I am still working on it, sorry I've been a bit behind on releases because I've been occupied with other projects, but I do plan on doing one more push soon.

[yuanLeeMidori]

@abhaseen no worries, we just need to know if you're still working on it. Please reach out on Slack if you need any help :)

[tonyvugithub]

@abhaseen : Thanks for your interest to continue. We decided to push this to 1.6 release and skip it for 1.5 release since the files have changed and we want to finished the migration to Next first before making any changes to the styling or components. We keep you posted on the progress. Thanks again

[abhaseen]

Hi. So after working on this for a while and while I was doing the rebase, I realized that there are too many frustrating manual edits to make since the last updates. My suggestion going forward for anyone who wants to take this up would be to create a new PR. The themeing and colors should be used for reference. But the code is a bit too all over the place in comparison to the current state of the code as of Update v.1.5. I think it would be best if I hand this off to someone who is more familiar with the Next.JS coding that's been done since the last several updates. Sorry I could not see this through. I wish you all the best of luck in moving this forward.

[tonyvugithub]

Closed in favour of #1637