Customizing Zulip CSS Dark Mode

There’s yet another uproar about Discord, the popular gamer voice chat service that has has grown into a community platform rivaling Slack and Teams. However, there’s been concern that the people-friendly vibe is turning corporate, which has put a lot of Discord users on edge. The first concern came when the company appointed a new CEO associated with predatory management. The latest hoopla with age verification has eroded user trust further, with many concerned that Discord will be destroyed by investment-driven leadership (e.g. ex-Activision leadership) that favors profit over people.

I’m concerned too, and have started looking at open source alternatives. One of them is Zulip, which was mentioned to me by my friend Shannon. We’re trying out the free Zulip cloud version to evaluate it for personal projects, and after some initial confusion on my part I’ve decided I like it a lot! The only problem is that the user interface, while competently and attractively designed, hurts my eyes because of my sensitivity to contrast and visual noise.

Customizing

Zulip doesn’t support theming but if you use the Desktop App you can upload a custom CSS file. Unfortunately, there is little documentation on customizing the CSS, and the Zulip app itself recently had a UI overhaul which makes examples like Marek Kulik’s Discord-style theme obsolete. So today I’m sharing the result of making Sri’s Dark Mode Zulip CSS. You can also grab it as a gist.

base color editing

There are three color parameters you can define, as shown in this excerpt:

:root {
  /* set these base colors */
  --color-sri-dark: hsl(225deg 4% 20%);   /* a dark gray-blue */
  --color-sri-lite: hsl(0deg 0% 83%);     /* a light gray */
  --color-sri-dmbg: hsl(250deg 40% 40%);  /* a dark purple */

  ...

The various shades are generated from this using the new-ish oklch() CSS function which finally implements a perceptual color model for the web! I’ve structured the CSS file to derive all the shades based on the three base colors, which means that you can change the background color --color-sri-dark from dark gray to something else to suit your whims.

visual changes

• made text contrast in dark mode less jarring
• hide element borders to reduce visual clutter
• custom DM message header color --color-sri-dmbg
• made inline emoji slightly larger
• made bold text slightly stronger by increasing contrast

bonus light mode support

While this custom CSS is designed for Dark Mode use, there is also a rudimentary Light Mode defined but it just flips the background color with the foreground color like this:

  /* light-dark theme */
  --sri-bg: light-dark(
    var(--color-sri-lite),  /* light mode: light gray background */
    var(--color-sri-dark)   /* dark mode: dark gray-blue background */
  );
  --sri-fg: light-dark(
    var(--color-sri-dark),  /* light mode: dark text on light bg */
    var(--color-sri-lite)   /* dark mode: light text on dark bg */
  );

Note: This is not visually optimal because our vision reacts differently to color and contrast with bright backgrounds, but it is there to just keep the custom CSS from breaking if you don’t first set DARK MODE in your Zulip User Preferences. I did modify the --sri-dm value (not shown) to lighten and desaturate the color a bit though.

Instructions for Installation

These are documented in the CSS file itself.