Improve dark mode code colours Fixes #2377

[japneetsingh035]

Issue This PR Addresses

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

Before:

After:

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)

[gitpod-io]

[AmasiaNalbandian]

Is the color supposed to change only for dark mode? I am seeing the same color scheme for the light mode also:

[japneetsingh035]

Yes, I am working on the colour scheme to change on the toggle. However, it would require changing all the previous code for highlight.js. So, I made a draft PR to get some help in development.

[AmasiaNalbandian]

Yes, I am working on the colour scheme to change on the toggle. However, it would require changing all the previous code for highlight.js. So, I made a draft PR to get some help in development.

Can we try something like this?
https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react

Make a conditional in the div for the stylesheet.
What we can also do it make a variable to toggle the state somewhere here, and use this to do the conditional stylesheet.

[AmasiaNalbandian]

This is a better example using the link stylesheets:
https://stackoverflow.com/questions/43971507/if-else-jsx-using-link-in-react

[humphd]

See

telescope/src/web/src/styles/globals.css

Line 5 in 29951b7

@import 'highlight.js/styles/github.css';

We're going to want to have two stylesheets, both from node_modules vs. a cdn, and you will pick the one at runtime to use.

Also, src/api/status* isn't the same code as what you're changing for posts.

[PedroFonsecaDEV]

Hex values, please.

[humphd]

What's the status of this?

[japneetsingh035]

What's the status of this?

Well, we can close this PR and will make a new one, once I am done - still working on enabling the dark mode colour.