[Enhancement] Refactor editor themes#6229
Conversation
|
I also plan to update the docs with the available variables and acceptable values once this has gotten the go-ahead on the implementation |
729562e to
4105426
Compare
nathanlesage
left a comment
There was a problem hiding this comment.
Sooooo, sorry again for the delay! But now I've finally taken a look at it.
First, I really appreciate the cleanliness of the themes now, this looks great and more comprehensible. Also, I appreciate that the app now distinguishes between CodeMirror builtins and Zettlr-specific elements in the variables. Lastly, even though you've moved around a lot of code, it looks definitely more organized now. I tested this out locally, and it feels mostly similar, with some improvements and changes you made that feel like they are well-placed.
That said, I do have a few small comments. First, I am a little bit concerned by the main-override.ts file, specifically its size. This can also be due to the diff, but I wonder if it might make it easier if we split out the two theme variable definition blocks into their own utility files and just merge them in there? (Feel free to disagree if you've already tried that!) Lastly, a few more comments on the logic will help so that other contributors (read: primarily I) can adopt that new system correctly. For what it's worth, I think that your theme variable documentation that you plan can simply by a copy-and-paste of the interfaces you declared into the documentation, so this way we have the documentation exactly where we need it (inside the code), but also in the official documentation so that modders can quickly find it.
Oh, and, somehow the cursor blink animation feels slower now, that one you would need to take a look at. Other than that, I think it's a great effort!
| * * Remove the steps(1)-function to remove the harsh transitions. | ||
| * * Make the transition more smooth with a 15% opacity transition period. | ||
| */ | ||
| @keyframes cm-blink { |
There was a problem hiding this comment.
Something in these animations is off now. The cursor animation feels much slower than before. Can you take a look?
| }, | ||
| }) | ||
|
|
||
| /* Code Theme |
There was a problem hiding this comment.
Just a thought: Maybe separate the main theme and the code theme into their own respective files, and just merge them in here? That could help with keeping it a bit more easy to follow?
There was a problem hiding this comment.
That makes sense to me
4105426 to
85dd987
Compare
|
Latest commit goes a little further with reorganizing the folder structure. I split I also moved the individual themes into a Added some comments to the top of I still need to address the cursor animation, and I'll get to that today or tomorrow. |
|
Latest commit fixes the cursor animation. @nathanlesage This is good to go on my end if you want to look it over |
|
Hello hello! Looks good, I tested it and everything seems good to go! I'm just wondering because having a folder |
|
Feel free to change that as you see fit! I felt that they had to go into some sub folder, but I couldn't think of anything good enough. |
|
That's why I didn't suggest any alternative, because styles also feels somewhat off. I mean, in the end it's just names, and we'll be fine to find the themes! I felt I shouldn't bother anyone with that nitpick :) |
Description
This PR refactors the codemirror theme code to be more centralized, structured, and customizable.
It is not intended to change any styling beyond those needed for organization/simplicity
Changes
While this PR is quite large, it is essentially reproducing a lot of boiler plate and reorganizing where things are located.
The main change is the implementation of CSS variables to apply various styles to editor components. By using variables, theme implementation becomes much simpler because themes only have to update the variable values rather than target individual elements. Elements styling also remains synchronized and consistent across themes. Finally, it simplifies custom themeing, as users can target the variables rather than craft unique selectors per element.
The geometry styling for the editor was moved to
editor.cssoutside of themain-override.tsfile. I did this so thatmain-overrideand the other themes only handle visual styling (color, font, size, etc).The code styling was moved into the theme code from the
render-coderenderer. This integrates code styling into the main themes, again for centralization and organization.The syntax tag highlighting code was refactored into
customTagHighlightandtagHighlight. This deduplicates a lot of tags, and better organizes the code.Additional information
My goal was to change the themes as little as possible, if at all. I believe there are one or two elements that had a color changed, but otherwise, I think I was successful in leaving everything as is!
Tested on: