Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Improve the text contrast in the Code Editor in the light mode #3627

Closed
anna-geller opened this issue Apr 26, 2024 · 19 comments · Fixed by #7438
Closed

[UI] Improve the text contrast in the Code Editor in the light mode #3627

anna-geller opened this issue Apr 26, 2024 · 19 comments · Fixed by #7438
Assignees
Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors

Comments

@anna-geller
Copy link
Member

anna-geller commented Apr 26, 2024

We got the requirement to use light mode in educational content. For now, the biggest blocker to use it more is that the contrast is not good enough.

I browsed Monaco themes https://github.com/brijeshb42/monaco-themes/, and all have the same light mode with green + blue text with very low contrast.

Context

Compare our UI version:

image

And the default's IntelliJ GitHub theme (much better contrast due to black + blue text):

image

@anna-geller anna-geller added enhancement New feature or request area/frontend Needs frontend code changes labels Apr 26, 2024
@anna-geller anna-geller modified the milestones: v0.17.0, v0.18.0 Apr 26, 2024
@MilosPaunovic MilosPaunovic self-assigned this May 28, 2024
@github-project-automation github-project-automation bot moved this to Backlog in Issues Jun 10, 2024
@anna-geller anna-geller removed this from the v0.18.0 milestone Jul 23, 2024
@anna-geller anna-geller added the good first issue Great issue for new contributors label Oct 10, 2024
@MilosPaunovic MilosPaunovic removed their assignment Oct 16, 2024
@syedfardeenjeelani
Copy link

@anna-geller i would like to work on this issue

@MilosPaunovic
Copy link
Member

Go for it @syedfardeenjeelani! 🚀

@syedfardeenjeelani
Copy link

@MilosPaunovic thank you

@syedfardeenjeelani
Copy link

@MilosPaunovic hey i was trying to setup the repo locally but i am facing this issue can you please guide me
image

@MilosPaunovic
Copy link
Member

@syedfardeenjeelani Check out this tread on Slack for the way to resolve it.

That was nuxtjs/mdc package that is giving the conflict downgrading it to 0.8.3 will solve the problem.

Steps:
Delete the package-lock.json file and node_modules folder.
Pull the latest changes
Do Npm i
Open the package-lock.json file,change the @nuxtjs/mdc version to 0.8.3
Again do Npm install, it will resolve your problem.

Let me know if this does it for you.

@syedfardeenjeelani
Copy link

@MilosPaunovic thank you i will try it and let you know

@MilosPaunovic
Copy link
Member

Hi @syedfardeenjeelani, is there any progress on this?

@PadyA0
Copy link

PadyA0 commented Jan 27, 2025

Hi, I would like to work on the issue

@MilosPaunovic
Copy link
Member

Absolutely, go for it @PadyA0! 🚀

@MilosPaunovic MilosPaunovic moved this from Backlog to In progress in Issues Jan 27, 2025
@MilosPaunovic
Copy link
Member

Is there any progress on this @PadyA0?

@PadyA0
Copy link

PadyA0 commented Feb 1, 2025

Hi I am working on the issue and should update the progress next week.

@PadyA0
Copy link

PadyA0 commented Feb 5, 2025

@MilosPaunovic Hello, just to confirm, the UI folder has all the code for the code editor part? I was looking at different files to locate the part with the text contrast.

@MilosPaunovic
Copy link
Member

Yup, everything is definetlly in UI, folder.

@PadyA0
Copy link

PadyA0 commented Feb 7, 2025

@MilosPaunovic I cannot access the file to the code. Is it possible for me to have the location/name of the file, please?

@MilosPaunovic
Copy link
Member

How have you tried searching them so far @PadyA0?

@Piyush-r-bhaskar
Copy link
Contributor

Hey @MilosPaunovic & @anna-geller

In case at any point of time it's up for grab. Please assign.

& How do you like this contrast ? or let me know if any other palette in mind.

Image

@anna-geller
Copy link
Member Author

That looks wonderful @Piyush-r-bhaskar 🤩 I'd love to see a PR from you adding this theme.

@Piyush-r-bhaskar
Copy link
Contributor

Perfect! Thanks. then 'll raise one by EoD.

@anna-geller anna-geller moved this from In progress to In review in Issues Feb 18, 2025
@github-project-automation github-project-automation bot moved this from In review to Done in Issues Feb 19, 2025
@MilosPaunovic
Copy link
Member

Implementation of this was perfect @Piyush-r-bhaskar, simple, yet, exactly what we were looking for to achieve. Fantastic work! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants