blinksh / blinksh/themes

Note about how to use these themes on the Chrome Secure Shell extension

Open
#38 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
321
Forks
121
PR merge metrics
No merged PRs in 30d

Description

Since these themes are _mostly_ compatible with the Google Chrome Secure Shell extension, I wanted to document how exactly to import them. I apologize that this issue is unrelated to Blink, but given this is probably the largest single repository of `hterm` themes I think it would be a good idea to include such information.

There's no obvious way to import these themes into the Chrome Secure Shell extension, and I had to figure a couple of things out manually to do it. I wanted to note what I discovered in case anyone else wants to try to use any of these themes on the Chrome Secure Shell extension.

1. Open the JavaScript console in a Secure Shell tab in Chrome (including ChromeOS) by pressing `Ctrl`+`Shift`+`C`, or `command`+`shift`+`C` on a Mac. (You may need to click outside of the Terminal box for this to work. I clicked into the address bar at the top).
2. Then, you need to _type_ `allow pasting` into the console box. (This will _not_ autocomplete, and you have to type it manually on your keyboard. For security reasons the JavaScript console will reject any attempts to paste or drag text in until you type `allow pasting`.)
3. Next, the `t` object has since been renamed to `term_` on the Secure Shell plugin, which means that you every line needs to be changed from `t.prefs_.set(…);` to `term_.prefs_.set(…);`. (I'd imagine the existing code probably still works on the ChromeOS built-in `Ctrl`+`Alt`+`T` terminal or its Linux Terminal application, but I haven't tried it.)
4. Lastly, once you finally paste in a theme you'll notice upon going to the Options page for the Chrome Extension that for the main Base16 colors you could have just copied the list into the `Initial color palette` box. 😄

So, for example, for the [Dracula theme](https://github.com/blinksh/themes/blob/master/themes/Dracula.js), you'd enter `allow pasting` into the JS console and then paste in:
```js
term_.prefs_.set('color-palette-overrides',["#000000", "#ff5555", "#50fa7b", "#f1fa8c", "#bd93f9", "#ff79c6", "#8be9fd", "#bbbbbb", "#555555", "#ff5555", "#50fa7b", "#f1fa8c", "#bd93f9", "#ff79c6", "#8be9fd", "#ffffff"]);
term_.prefs_.set('foreground-color', "#f8f8f2");
term_.prefs_.set('background-color', "#1e1f29");
term_.prefs_.set('cursor-color', 'rgba(187,187,187,0.5)');
```
And you could even just go into the settings and paste the `["#000000", "#ff5555", "#50fa7b", "#f1fa8c", "#bd93f9", "#ff79c6", "#8be9fd", "#bbbbbb", "#555555", "#ff5555", "#50fa7b", "#f1fa8c", "#bd93f9", "#ff79c6", "#8be9fd", "#ffffff"]` into `Initial color palette` as shown below
image

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with themes/Dracula.js and the import steps in this issue, then verify the workflow in a Chrome Secure Shell tab using the JavaScript console and the Options page. Document how to adapt the theme commands for term_ and how to enter the base16 palette; done means a newcomer can apply the Dracula theme successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.