themes icon indicating copy to clipboard operation
themes copied to clipboard

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

Open b- opened this issue 4 months ago • 0 comments

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, you'd enter allow pasting into the JS console and then paste in:

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

b- avatar Feb 17 '24 20:02 b-