dracula / sublime

🧛🏻‍♂️ Dark theme for Sublime Text
https://draculatheme.com/sublime
MIT License
94 stars 26 forks source link

Converted theme to `.sublime-color-theme`, fixed syntax highlighting (inline with VS Code) #31

Open neonn opened 1 year ago

neonn commented 1 year ago

If you're fixing a UI issue, make sure you take two screenshots. One that shows the actual bug and another that shows how you fixed it.

Not sure I can demonstrate the above, because it covers a wide range of styles across the old theme, new theme, and VS Code. I also do not use Mac OS, so the new vs. old screenshots won't be the same as the Mac OS screenshots in the project root. However, if you would like me to screenshot "old Sublime Text", "new Sublime Text", and "current VS Code", I can do so.

In short, this pull request converts the theme from a TextMate theme to a .sublime-color-theme, which is the JSON-based syntax for Sublime Text.

This fixes languages with existing support, such as PHP, which this theme is currently broken for (see #28 and #27, both of which should be fixed by this pull request).

In addition, this brings the theme up to parity with the current functionality of Visual Studio Code (e.g. PHP accessor colouring), but without the colour-cycling ability of VS Code (due to difficulty implementing it in Sublime Text).

Specific language support (e.g. Ruby-specific fixes from the original TextMate theme) have also been updated to use a namespace-based approach to each "name" block. For example, for a Ruby-specific colour change, it now uses [Ruby].

Please let me know if any assistance is needed. I can remove comments inside of the JSON, but I feel it is useful to understand why some features (such as C#'s getters and setters) aren't able to be styled properly.

jrappen commented 1 year ago

Your list of globals is incomplete, compare:

https://www.sublimetext.com/docs/color_schemes.html

background
foreground
invisibles
caret
block_caret
block_caret_border
block_caret_underline
block_caret_corner_radius
line_highlight

misspelling
fold_marker
minimap_border
accent

popup_css
phantom_css
sheet_css

gutter
gutter_foreground
gutter_foreground_highlight

line_diff_width
line_diff_added
line_diff_modified
line_diff_deleted

selection
selection_foreground
selection_border
selection_border_width
inactive_selection
inactive_selection_border
inactive_selection_foreground
selection_corner_style
selection_corner_radius

highlight
find_highlight
find_highlight_foreground

scroll_highlight
scroll_selected_highlight

rulers

guide
active_guide
stack_guide

brackets_options
brackets_foreground
bracket_contents_options
bracket_contents_foreground

tags_options
tags_foreground

shadow
shadow_width

See:

https://www.sublimetext.com/docs/minihtml.html

for the phantom, popup and sheet css.

You might also want to define the *-ish variables in "globals":

https://www.sublimetext.com/docs/minihtml.html#predefined-variables


Some random recent color schemes as a reference:

neonn commented 1 year ago

@jrappen Ah, thanks! Sorry for missing these. I'll cross-compare with VS Code to see whether there's any differences with globals etc. and port them across.

jrappen commented 1 year ago

I'd focus on what looks good when applying the dracula color palette to the Sublime Text theme.

A simple port might not have the desired effects.


Also friendly reminder, all the global settings have string values. Even if the implied value is an integer (i.e. line_diff_width, selection_border_width, selection_corner_radius, shadow_width).

jrappen commented 1 year ago

All those comments about what you're not doing (?) and empty objects are distracting, not sure why they're included.

neonn commented 1 year ago

All those comments about what you're not doing (?) and empty objects are distracting, not sure why they're included.

It's so that, for each language, there's a note/reason why. It's about keeping track of which styles have been reviewed, as well as noting any compatibility issues. For example, Kotlin isn't supported by default in Sublime Text, and the same goes with VS Code. Again, with the empty objects, it's about separation. To you, a distraction - to me, a distinction between languages being supported in the colour theme file.

neonn commented 1 year ago

@jrappen Are additional globals needed? At the moment, seems like most of the styles are comparable to VS Code's implementation, and I'm not sure what I would set them to, if I am to include them.

Just in general, while I call this a "port", what I mean to say, is that I want to bring the "correct colours" ("correct", just because VS Code's theme is more up-to-date than Sublime Text's) from VS Code to Sublime Text. For example, the JSON syntax is vastly different between the currently-release Dracula theme for Sublime Text and VS Code's:


Old - Sublime Text

Old - Sublime Text


VS Code

VS Code


New - Sublime Text

New - Sublime Text

jrappen commented 1 year ago

Are additional ...

Just read the docs linked above?

neonn commented 1 year ago

Just read the docs linked above?

I think I have read the docs above. They don't explain why the globals are needed, when the current values/defaults look to be OK for this theme? I was asking, in your opinion, whether the Dracula theme would need the globals set to a value, or whether it's better to leave them.