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.

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

Improve the default appearance and readability of the tty #35

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

callumgare
Copy link
Contributor

This is what gotty currently looks like:
Screen Shot 2022-05-18 at 20 51 29

As compared to ttyd:
Screen Shot 2022-05-18 at 20 52 40

Aesthetics are complicated and there is a good helping of subjectivity to them but I personally think ttyd looks far more pleasing as well as more readable. Both use xterm.js but the reason ttyd looks different is that it uses the theme options to style xterm. Currently gotty just uses the default theme settings of xterm.js which I think are a bit clunky looking.

Since “good artists borrow, great artists steal” I've taken the values which ttyd use for styling xterm and added them to gotty. With that change gotty now looks like:
Screen Shot 2022-05-18 at 20 51 53

There's no reason why we have to use these values exactly tho if anyone thinks there's a better combination.

@callumgare callumgare changed the title Improve the appearance and readability of the tty Improve the default appearance and readability of the tty May 18, 2022
@crgimenes
Copy link

I don't like the new style but I like the idea.

Would it be too complicated to make termOptions be loaded from a config file?

That way we could have more modern default options at the same time people with different tastes could easily change to whatever they prefer.

@callumgare
Copy link
Contributor Author

That would be possible but complicated. Since all the js is compiled at build time and the config is needed client-side I think the easiest way to go about it would be adding a command line arg to specify the path to a config file and then having the go server serve that file so that then the client is loaded the browser can fetch that config file when initialising xterm.

That would required more work than I have bandwidth for though I'm afraid. If someone else wants to implement that then great. In the mean time though I think it's still worthwhile picking nicer defaults. What do you not like about the ttyd colour scheme? Trying to get sense of what style would better suit your sensibilities.

@crgimenes
Copy link

@callumgare I think the color scheme is beautiful, but I simply need more contrast, so I tend to prefer the all-black background.

Anyway, nothing prevents me from simply compiling my version, and it's easier now that you've shown where to change the colors. :-)

Once your PR has been merged I'll play with the idea of putting this in parameters.

@callumgare
Copy link
Contributor Author

callumgare commented May 18, 2022

@crgimenes Mmm, you're right it is a relatively low contrast amount and I suspect you're not the only one who would find it too low contrast. I've bumped it up slightly to be inline with the default dark theme in vs code. Hopefully that's a better balance however if you prefer a pure black background it'll likely still be too low contrast for your tastes so you might still want to go the compiling your own route.

The changes in this MR now looks like:
Screen Shot 2022-05-18 at 23 45 02

And the previous look for comparison:
Screen Shot 2022-05-18 at 20 51 53

@crgimenes
Copy link

@callumgare Excellent, much better.
But I'm still compiling because your PR inspired me to change the font to my favorite font. IBM 3270
Maybe I'm just getting old haha

@sorenisanerd
Copy link
Owner

I'm actually pondering adding something to the UI so you can change fonts, colors, etc., but a set of pre-defined themes would be cool. For the default style, I think using the default dark mode from VSCode sounds great. I'm not cocky enough to think I can do better than them. :)

Would you like to contribute a higher contrast style, @crgimenes ?

@crgimenes
Copy link

hello @sorenisanerd ,

Sorry for the delay in responding.

I'd love to help, I'll take a look.
This PR has been here for a while, any reason it hasn't been merged? (just curious)

@sorenisanerd
Copy link
Owner

@crgimenes Well, we'd be replacing one person's preferences with another person's preferences. I'd much rather find a way to let people customize as they desire as well as provide a set of decent themes that users can choose from.

@callumgare
Copy link
Contributor Author

@sorenisanerd what colour scheme is your preference? Even if you add customisability you’ll always have a default theme (unless you were to do something crazy like randomising the default theme) so it is advantageous to have a default theme that works for the most number of people. If you prefer the current theme then fair enough but if you prefer this one or don’t have a preference then I would suggest using this one which based off VS Code is most likely to have the broadest appeal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants