Primer: Zulip Dark Mode CSS Hacks

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.

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.