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.

Sign up for GitHub

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

Jump to bottom

feature: Adding Light Mode for Code Block in Tracks for the blog #321

Open
Kunal09001 opened this issue Apr 21, 2024 · 2 comments
Open

feature: Adding Light Mode for Code Block in Tracks for the blog #321

Kunal09001 opened this issue Apr 21, 2024 · 2 comments
Labels
enhancement New feature or request

Comments

@Kunal09001
Copy link

Regarding Feature
In all the tracks which have javascript code block, it is always in dark mode even when toggling to light mode.

image

Solution
I was looking into the code in that we would have to add css classes at 'daily-code\packages\ui\app\CodeBlock.module.css' and based on theme we would load the css class in 'packages\ui\src\CodeBlock.tsx' which change colors when any user switches to Light mode or Dark mode.
@Kunal09001 Kunal09001 added the enhancement New feature or request label Apr 21, 2024
@Kunal09001
Copy link
Author

Kunal09001 commented Apr 21, 2024 •
edited

I have tested this locally and this is how it looks like on light mode :
image

Let me know if this is a good or any changes required

@Kunal09001
Copy link
Author

Hello @hkirat,
As mostly, we use VSCode themes so i have switched the themes and did few changes in 'CodeBlock.module.css' to look cleaner.

For Dark Theme it looks like this now : -

image

For light Theme it looks like this now(made it little more cleaner) : -

image

Let me know if any more changes required

Note: Sometimes when switching themes code block theme does not get switched due to local cache, so i had to do Hard Reload (CTRL + Shift + R) which then solves the issue.

Kunal09001 added a commit to Kunal09001/daily-code that referenced this issue Apr 23, 2024
@Kunal09001
Changes for the Issue code100x#321 , Refactored the code for CodeBloc…
fe6af0c 
…k for accepting themes, and fixed an small issue where variable name is removed in SearchDialog which was failing builds
@Kunal09001 Kunal09001 mentioned this issue Apr 23, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Changes for the Issue #321 , Kunal09001/daily-code
1 participant
@Kunal09001