Customize ChromeOS Crosh Terminal with Custom Fonts and Solarized Dark Theme

chromeos-crosh-custom-setup.md

Customize Chromebook Chrosh Shell Environment

Requirement: Chromebook, Common Sense, Commandline Ablity, 1 hour of time

Dear developers with a spare Chromebook lets inject a little personalization into your Crosh shell with custom fonts, the solarized theme, and extra secure shell options.

Also, keep in mind that the terms Chrosh, Chrosh Window, and Secure Shell all refer to various versions and extentions built around the ChromeOS terminal. Settings that affect the ChromeOS terminal are global.

Custom Fonts

If ChromeOS was a normal Linux distribution, adding fonts would be as easy as dropping a font file into the .fonts folder and changing a terminal setting. Sadly, we need to do a bit of work - some of it rather scary - to get custom fonts working with ChromeOS.

Mounting Root Filesystem as Read-Write

Chromebook must be in developer mode and have rootfs verification turned off so that the root read only file system can be remounted as read-write. Once this is done, extra fonts can be added to ChromeOS's font folder.

WARNING: Follow instructions very carefully. Failure to follow these instructions can result in a non-booting Chromebook. If you screw up you will need to restore your Chromebook to stock. You have been warned.

1. Fire up the Crosh shell with ctrl+alt+t

2. sudo /usr/share/vboot/bin/make_dev_ssd.sh --remove_rootfs_verification

3. The above command will fail and tell you to run with --partitions N flag at the end where N can be any number. Run the command again with the new flag.

4. sudo crossystem dev_boot_signed_only=0

5. The above command turns the verification check off. Because of step 2, the Chromebook will fail to boot if the verificaiton check is on.

6. sudo mount -o remount,rw /

7. Reboot your Chromebook. The root file system is now mounted as read-write.

Congrats. The dangerous part of the setup is done.

Font Folder Location and Font Install

Fonts in .ttf format can be installed to the folder /usr/share/fonts/croscore/

Installing either the normal or powerline patched versions of your favorite monospaced fonts to the aforementioned folder is required for proper configuration of the font family settings in Secure Shell a bit latter.

https://github.com/Lokaltog/powerline-fonts

I prefer the powerline patched version of Ubuntu Mono. Other mono space fonts - including Adobe's Source Code Pro - are great fonts for Crosh usage too!

Add Required Chrome Extentions

To further customize our Crosh window, install both Secure Shell and the Crosh Window extentions from the Chrome Web Store.

• Secure Shell
• Crosh Window

Sett Up Chrosh's Font-Family and Font-Size

ChromeOS apps menu > right click on the Secure Shell icon > select options

Change the terminal settings as you see fit. Pay special attention to:

font-family

Keep in mind ChromeOS will only load the first avaliable font that you specified in the font-family field. If you wan to use a custom font make sure you added it as the first entry. For example, if using Ubuntu Mono add "Ubuntu Mono", in front of the current font stack to properly add Ubuntu Mono

font-size

Since Ubuntu Mono is slighly smaller than the default font, you may want to bump the size up from 15 to a modestly larger 16 or 17.

Solarized Color Theme

It's almost criminal how easy it is to install solarized for Crosh.

• Download a solarized prefs.js file. Two good options are:

  • giraj/solarized-crosh
  • johnbender/prefs.js

I'm including the code for the prefs.js file I used for convenience.

// Disable bold 
term_.prefs_.set('enable-bold', false) 

// Use this for Solarized Dark 
term_.prefs_.set('background-color', "#002b36");
term_.prefs_.set('foreground-color', "#839496");

// Solarized Colors
term_.prefs_.set('color-palette-overrides', [
  '#073642', 
  '#dc322f', 
  '#859900', 
  '#b58900', 
  '#268bd2', 
  '#d33682', 
  '#2aa198', 
  '#eee8d5', 
  '#002b36', 
  '#cb4b16', 
  '#586e75', 
  '#657b83', 
  '#839496', 
  '#6c71c4', 
  '#93a1a1', 
  '#fdf6e3'
]);

• Open the Chrome Javascript Console ctrl+shift+j
• Paste the contents of your solarized prefs.js file into the console
• Hit enter

Further Customizations

Loading a Crosh Window based Ubuntu 14.04 Chroot is the best way to make use of the customizations.

• dnschneid/crouton with sudo sh -e ~/Downloads/crouton -r trusty -t cli-extra

For powerline patched font use in vim:

• add bling/vim-airline to vim
• edit your .vimrc to include let g:airline_powerline_fonts = 1

For powerline patched font use in tmux:

• Install ZSH shell, oh-my-zsh, and set the zsh-theme to agnoster

Fin

Thanks for reading!

Is there a way to apply prefs.js from the command line itself? It'd be really nice to be able to apply different color schemes without having to copy/paste the preferences into the dev console every time.

None of steps below require all of the rootfs disabling: you can apply them on a stock Chromebook and they survive reboot.
Yeah... and if you do paste those lines in, it changes the default terminal profile of the Terminal.app as well as for crosh!
So while the crosh terminal has no gui-settings, it can use same settings profile(s) you create in the gui-settings for the Terminal app (even if you never used Terminal for a Linux container, nor even for ssh).

Seems to be better to create new profile(s) and apply the JavaScript tweaks only once you have changed the Profile to something other than default with term_.prefs_.setProfile If you already clobbered your default like I did, I think the gui offered to let me un-clobber a tweaked profile: if you select the original theme, then a reset button appears:

I could not figure out how to invoke a new profile from ctrl-shift-p, but I can in JavaScript console change the profile on the fly, which takes effect immediatley, with term_.prefs_.setProfile as shown below, That is, on my chromebook-plus ver 122 with dev mode, I Just create additional profile(s) with the Terminal settings gui, such as "solar-dark" you see in screen shot below. Then, in crosh window, you can invoke any such profile, like solar-dark, using the java console (shift-control-j) with:

term_.prefs_.setProfile('solar-dark')

// return to default profile
term_.prefs_.setProfile('default')
// or if you use empty string '' it also goes back to default.
term_.prefs_.setProfile('')

The stock "Solarized Dark" profile is too washed out with dim colors. But if you paste in the prefs in the example, they seem to get incorporated into the solar-dark profile.

As a bonus, once you've put these in the java console, you can use up-arrow to recall previous JavaScript commands you entered in the java console. And the command history is still there even if you exit the crosh window and start another (shift-control-t). Or even after a full restart (or maybe even power off then power on... tho I did not try that yet ;-)

That is, you can setup profiles with settings gui (Ctrl-Shift-P at crosh prompt). In screenshot I added a profile called solar-dark and chose "Solarized Dark" theme for that profile.