Adding support for themes #2 #263
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a second attempt to implement different themes into codi.link.
I’ve tried to keep things as simple and clear as possible. Unfortunately, Monaco Editor’s syntax highlighting isn’t as complete as VSCode’s. I initially went with monaco-themes since it’s probably the simplest way to implement themes, but a lot of syntax wasn’t being applied correctly. Because of that, I switched to monaco-editor-textmate. It adds a bit more complexity, but works significantly better.
Adding themes
This PR keeps the existing default themes and adds three more: GitHub Dark, One Dark Pro, and Dracula, just to see that there is no conflicts. If everything works well, we can add more.
VSCode .json theme files don’t work directly with Monaco. They need to be transformed using a tool like monaco-vscode-textmate-theme-converter. I did this manually for the new themes. Not exactly fun.
Best method I found: open the theme on vscodethemes using VSCode web, then run Developer: Generate Color Theme From Current Settings to extract the full .json. After that, run it through the converter tool to get a Monaco-compatible version. It is quite tedious, maybe we can come up with a better or more automated flow.
New themes preview
Screen.Recording.2025-04-05.at.17.53.44.mp4