Porting the theme to Replit

[hankertrix]

This isn't an issue per se, but I'm porting the theme to Replit and just want to ensure that the theme is as close to the original as possible. If there are any incorrect colours, please tell me and I'll change them!

You can view the highlight groups by clicking on the words in the code example and you can change the language using the drop-down at the top right of the theme.

---

Bluloco Light

---

Bluloco Dark

[uloco]

Thanks for doing this :)

What I found so far:

both

• Punctuation, Separator, Brace and Paren group should be like Operators
• not sure about the regular expressions color, maybe you should use the constant (purple) color to stick to the theme
• class members should be brown and methods green (which is correct). don't know if this is possible though with replit, probably not doable in js
• Document Meta should look like Tag names
• Processing Instruction should look like keyword
• I would use the const color for Atomic Keywords

light

looks good

dark

• Variable Definitions should also be like Variable Names (grey). The light blue is only for (function) parameters. but this does not seem to work in replit.
• The green colors for the different function properties are different, they all should be the same: #3FC56B

[uloco]

The rest looks nice!

I edited the comment above several times and added new stuff I found. You could also try using the files from my syntax-highlighting-samples repo to test it.

Is there a repo where this stuff is committed?

[hankertrix]

Awesome, thanks! I have updated the colours as per your request, with some caveats. First, the colour of the Separator and Punctuation groups cannot be changed. Next, I didn't manage to individually set the colour of the Document Meta and the Processing Instruction highlight groups. Both highlight groups are tied together, so I have left the colour the same as the Tag Names. I have made all the other changes to the colour schemes and have used your syntax highlighting samples to test the available languages. The regular expressions now use the constant colour as well.

Replit's syntax highlighting is a complete mess, so I think it's impossible to have the class members be brown in languages like JavaScript and Python since they're considered Variable Names. Hopefully, it'll improve over time, but for now, it's impossible to highlight classes correctly. Methods of a class are also improperly highlighted as Property Definitions (while technically correct it isn't very useful or nice looking).

Unfortunately, there isn't a way to import or export Replit themes, which makes it very difficult to update themes or collaborate on making a theme. However, I have made a repository for the theme here.

[uloco]

The variable color in dark is still light blue instead of foreground, though. Did you update it on replit already?

[uloco]

Also I tried to use the theme in replit and the dark one messes up the button colors so it is barely readable... dunno why this is happening. maybe it is tied to keyword color or something.

EDIT: I think it is the primary color. The problem here is you cannot distinguish between editor foreground and ui foreground. So maybe you have to use a slightly different primary color to make it readable. I tried around a bit but it looks like it's kind of broken....

[uloco]

Ok what I found out is very weird. you have to switch to a dark theme before you create a dark theme, otherwise the primary colors will be too light. you might have to create the theme again :/

So what I mean is you have to switch your current theme to the default dark theme, and then create theme and choose dark theme. if your ui is a light theme when you click "create theme" the background color is buggy.

[hankertrix]

The variable color in dark is still light blue instead of foreground, though. Did you update it on replit already?

Did you mean the light theme? The dark theme variable colours are all #abb2bf. I have changed the Variable Definitions to be the same as the Variable Names on the light theme, which is #383a42. I also updated the repository with the updated colours.

Ok what I found out is very weird. you have to switch to a dark theme before you create a dark theme, otherwise the primary colors will be too light. you might have to create the theme again :/

Wow this is pretty weird. Looks like I have to recreate all of my dark themes. The link to the updated dark theme is here. I have also updated the initial comment with the new link.

After some investigation, it seems that the issue happens when editing the theme with a light theme. When editing a light theme while using a dark theme or vice versa, the colours will get messed up and somehow the messed up colours will carry over to the theme itself. It seems like the solution to the problem would be to only edit the theme while using the same type of theme, recreating the theme would not be necessary. I'll submit a bug report to Replit about this.

[uloco]

Thank you so much for doing all of this!!

[hankertrix]

No worries! Thank you for making such an awesome theme! If there is anything else you want to change, just tell me and I'll try my best to change it.

[uloco]

🙏🏼