Forums

changing the console colour scheme

not sure why i was looking into this today since i'm meant to be on holiday, but i thought I'd share brief notes on adjusting console colours:

  • open up the fullscreen console frame by adding "/frame/" to the end of your console's url
  • open up the developer tools
  • then change terminal properties via Anywhere.terminal.prefs_

eg

Anywhere.terminal.prefs_.set('background-color', 'wheat')
Anywhere.terminal.prefs_.set('foreground-color', '#533300')

More info in the hterm repo

Maybe saving this into a greasmonkey script would be a way to automatically load such customisations? not sure, i haven't used greasemonkey...

Huh. surprisingly, the setting gets saved, even when you close and re-open your browser, and for new consoles...

Sorry, but what does "open up the developer tools" mean?

It depends on which browser you're using. In the current version of Chrome:

  • Go to the "hamburger" menu at the top right.
  • Select "More tools"
  • Select "Developer tools"

In Firefox

  • Go to the "hamburger" menu at the top right.
  • Click the "Developer" icon
  • Select "Web copnsole"

I found this while looking for a way to change the color theme of the console; in Safari at least (I haven't tested others) setting the foreground in this way isn't working for me.

Specifically:

  • adding /frame/ to the end of the url does take it to full-screen
  • opening the JavaScript console and running Anywhere.terminal.prefs_.set('background-color', 'wheat') does change the background (and re-running that with 'black' puts it back)
  • but running Anywhere.terminal.prefs_.set('foreground-color', '#533300') does NOT change the text (leaving it quite unreadable)

Let me know if there's a new/different way to set the text color, thanks!

Update: apparently setting the foreground color in this way changes some text, but not others (for example, the prompt and some command outputs like ls are unchanged, but Django's manage.py showmigrations output does change)

Right, it will depend on the specific colour that that "foreground" text is. Our console is a fully-featured xterm-compatible thing, so programs can send "please print the following text in this colour" pseudo-characters. The "foreground" is just one specific one of those colours. You can probably set the others, though I don't know the exact names you'd need to know. Anyway, the ticket I upvoted as a result of your previous post is a general "console themes" one, so if and when we do it, we'll probably provide light and dark themes that change all colours at the same time.

I figured out you don't need to add /frame/ to the end of the console URL. You can actually grab id_console:

var term_ = document.getElementById("id_console").contentWindow.Anywhere.terminal;

(The hterm docs use term_ as the name so I do too.)

BTW, you can reset the preferences if needed:

term_.prefs_.resetAll()

And for example here's how to set my custom Solarized theme:

var prefs = {
    'background-color': '002b36',
    'foreground-color': '839496',
    'cursor-color': 'rgba(131, 148, 150, 0.5)',
    'color-palette-overrides': [
        '#073642',  // Black/dark grey
        '#dc322f',  // Red
        '#859900',  // Green
        '#b58900',  // Yellow
        '#268bd2',  // Blue
        '#d33682',  // Magenta
        '#2aa198',  // Cyan
        '#eee8d5',  // White/light grey
        // Vivid/bold
        '#586e75',  // Bright black/grey
        '#cb4b16',  // Bright red/Orange
        '#4e9a06',  // Bright green/Lime (custom)
        '#c4a000',  // Bright yellow (custom)
        '#6c71c4',  // Bright blue/Violet
        '#75507b',  // Bright magenta/Purple (custom)
        '#46b46c',  // Bright cyan/Mint (custom)
        '#fdf6e3',  // Bright white/white
    ]
};

for (var name in prefs) {
    term_.prefs_.set(name, prefs[name])
}

(I used Firefox 65 on Windows 8.)

Edit 2019-04-16: Changed "color-palette-overrides". Blacks and whites now follow the Solarized spec more closely. Clarified comments.

thanks for sharing your coloring scheme!

adding /frame/ to the end of the console URL just "fullscreens" it, but doesn't change the coloring scheme.

@conrad Yeah, I mentioned that cause OP made it seem like you have to use the fullscreen console in order to change its attributes.