Customizing the chat with /css

The /css command allows you to define the CSS rules which control your local view of the chat (8 KB limit). The rules are stored locally and reapplied every time the page loads, so the same look follows you across every room you join. Peers do not see your customizations. To remove them, run /css reset. To inspect the rules currently in effect, run /css with no arguments.

For a ready-made look without writing any rules, the /theme command applies one of several built-in designs in a single step: artemis, galaxy, mountains, or flowers. Run /theme galaxy to apply one, /theme to list them, and /theme reset to remove it. A theme only sets a base look, so any of your own /css rules below still take precedence over it. The theme fonts are served from ch4t.cc itself, so applying a theme never contacts a third-party font service.

(i) Your own message text

/css .msg.me { color: #06639b; font-weight: bold; }

(ii) Your own name tag

/css .me .who { color: crimson; text-transform: uppercase; }

(iii) Every peer's message text

/css .msg.them { color: #333; font-style: italic; }

(iv) Every peer's name tag

/css .them .who { color: darkgreen; font-weight: 700; }

(v) A single peer, styled separately

Each peer you see is also given one of five slot classes, peer1 through peer5, assigned in the order peers join your view. (They are local to your browser, so the same person may be a different slot for someone else.) Target one peer with its slot class: 

/css .peer2 .who { color: orange; }
/css .msg.peer3 { background: #eef; }

(vi) The browser window background

/css body { background: #0e1014; color: #ddd; }

(vii) The chat window background

/css #messages { background: #1a1d24; border-color: #333; }

(viii) The built-in theme fonts

The same eight fonts used by the /theme designs are served directly from ch4t.cc, so using one of them does not reveal your IP address to any third party and needs no @font-face rule of your own: the declarations already ship in the page. Just name the font in a font-family rule. The available families are shown here in their own typefaces:

Apply one to your own messages, with a generic fallback in case the file has not loaded yet: 

/css .msg.me { font-family: 'Orbitron', sans-serif; }

Or give the whole chat window a different face and style one peer's name tag separately: 

/css #messages { font-family: 'Cabin', system-ui, sans-serif; }
/css .peer2 .who { font-family: 'Dancing Script', cursive; }

(ix) Remote fonts

You can load a font from a remote server and apply it to any part of the chat. The most reliable form is @font-face with a direct font-file URL, because it can appear anywhere in the rule block. The remote server must permit cross-origin font loads (most public font CDNs do). Apply a remote font to your own messages: 

/css @font-face { font-family: 'Mine';
    src: url('https://example.com/mine.woff2') format('woff2'); }
.msg.me { font-family: 'Mine', sans-serif; }

And apply a different remote font to one peer (here the second peer slot): 

/css @font-face { font-family: 'Theirs';
    src: url('https://example.com/theirs.woff2') format('woff2'); }
.msg.peer2 { font-family: 'Theirs', serif; }

Alternatively, a hosted stylesheet such as Google Fonts can be pulled in with @import, which must be the very first thing in the command: 

/css @import url('https://fonts.googleapis.com/css2?family=Inter');
.msg.me { font-family: 'Inter', sans-serif; }

Loading a remote font reveals your IP address and a request to that third-party server, so prefer this only with hosts you trust.