Zulip Desktop App Custom CSS

zulip-dark-sri.css

/*/

  Sri's Dark Mode Zulip Desktop Custom CSS
  Makes default dark mode theme hurt Sri's eyes less!
  blog post: https://dsriseah.com/journal/2026/0226/
  -
  Inspired by github.com/botder/zulip-discord-css
  Tested on Zulip Desktop Mac v5.12.3
  License: MIT

  ** THESE OVERRIDES ARE TUNED FOR DARK MODE **
  ** JANKY LIGHT MODE JUST FLIPS FG AND BG   **

  TO USE THE FILE
  1. first save this css file somewhere on your computer
  2. go to "Desktop Settings" menu then general->advanced settings
  3. upload the css file

  TO SEE CHANGES AS YOU MAKE THEM
  1. edit the base colors at the top of the file
  2. after saving changes, command-r to reload app

  REFERENCES
  github.com/zulip/zulip/.../web/styles/*
  github.com/zulip/zulip/.../web/templates/*

  In particular, web/styles/app_variables.css lists the
  semantic global vars that are redefined in this css

/*/

: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 */

  /* 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 */
  );
  --sri-dm: light-dark(
    oklch(from var(--color-sri-dmbg) calc(l + 0.25) calc(c - 0.05) h),
    var(--color-sri-dmbg)
  );
  --sri-bold: light-dark(
    oklch(from var(--color-sri-dark) calc(l - 0.5) c h),
    oklch(from var(--color-sri-lite) calc(l + 0.5) c h)
  );

  /* derived colors using perceptually accurate color calculations */
  --sri-bg-lighter: oklch(from var(--sri-bg) calc(l + 0.05) c h);
  --sri-bg-lighter-hover: oklch(from var(--sri-bg-lighter) calc(l + 0.05) c h);
  --sri-bg-darker: oklch(from var(--sri-bg) calc(l - 0.03) c h);
  --sri-bg-darker-hover: oklch(from var(--sri-bg-darker) calc(l - 0.05) c h);
}

/*** OVERRIDES ***/

:root {
  /* bg overrides inherited by sidebars */
  --color-background: var(--sri-bg) !important;
  /* hilite overrides used for selected/hovering over sidebar bg items */
  --color-background-hover-narrow-filter: var(--sri-bg-lighter) !important;
  --color-background-active-narrow-filter: var(--sri-bg-lighter) !important;

  /* bg overrides for stream and dms message blocks in center column */
  --color-background-stream-message-content: var(--sri-bg-darker) !important;
  --color-background-private-message-content: var(--sri-bg-darker) !important;

  /* bg overrides for the compose box at the bottom of center column */
  --color-compose-box-background: var(--sri-bg-lighter) !important;

  /* overrides for compose buttons when the compose box is minimized */
  --color-compose-collapsed-reply-button-area-background: var(--sri-bg) !important;
  --color-compose-collapsed-reply-button-area-border: transparent !important;
  --color-compose-embedded-button-background: var(--sri-bg) !important;
  --color-background-compose-new-message-button: var(--sri-bg) !important;
  --color-background-compose-new-message-button-hover: var(--sri-dm) !important;
  --color-border-compose-new-message-button: transparent !important;
  --color-border-compose-new-message-button-active: transparent !important;

  /* overrides for DM header to make it distinct */
  /* note: stream messages inherit bg color from their channel color, so no override for that */
  --color-background-private-message-header: var(--sri-dm) !important; /* DM pane */

  /* override for message text color to make it less jarring */
  --color-text-message-default: var(--sri-fg) !important;

  /* hyperlink color overrides to improve contrast */
  --color-text-url: var(--color-text-url-hover) !important; /* make link same as hover */
  --color-markdown-link: var(--color-text-url) !important;
  --color-markdown-code-link: var(--color-text-url) !important;

  /* remove border visual noise by making them transparent */
  --color-message-list-border: transparent !important;
  --color-message-header-contents-border: transparent !important;
  --color-message-header-contents-border-bottom: transparent !important;
  --color-private-message-header-border: transparent !important;
  --color-private-message-header-border-bottom: transparent !important;
  --color-border-compose-content: transparent !important;
  --color-message-content-container-border: transparent !important;
  --color-message-content-container-border-focus: transparent !important;
  --color-compose-recipient-box-border-color: transparent !important;
  --color-compose-recipient-box-hover: transparent !important;
  --color-compose-recipient-box-has-focus: transparent !important;

  /* declutter message emoji reaction styles */
  --color-message-reaction-border: transparent !important;
  --color-message-reaction-border-reacted: transparent !important;
  --color-message-reaction-button-border: transparent !important;
  --color-message-reaction-button-border-hover: var(--sri-bg-lighter) !important;
  --color-message-reaction-background-hover: var(--sri-bg-lighter-hover) !important;
  --color-message-reaction-background: var(--sri-bg-lighter) !important;
  --color-message-reaction-background-reacted: var(--sri-bg-lighter) !important;
}

/* fix DM component divider transparency */
.direct-message-section-bottom-divider-container {
  background-color: transparent !important;
}

/* make size of rendered markdown inline emoji slightly bigger */
.rendered_markdown .emoji {
  width: 1.6rem !important;
  height: 1.6rem !important;
}

/* make bold words bolder relative to text default */
.message_content strong {
  color: var(--sri-bold);
}