My Zulip CSS, inspired by Flowdock

about.md

With this css

Without it, but with built-in Dark theme

Key things:

• Red indicators that someone is trying to reach me via private message
• Drop avatars, I need avatars or names for our team, not both.
• De-emphasize stream labelling, since our small team only uses one.
• Emphasize topic name
• More space between messages
• Hide the Mute and Resolved buttons, I'll never use them.
• Semi-hide the "Subscribe to new Streams" and "invite more users", I'll find them when I need them, meanwhile they shouldn't stick out.
• Calm down the color on the user statuses, particularly orange? Really? The brightest thing on the screen should be who is idle? Really?

The pinnacle of small-team chat, flowdock, is now closed down. For the historical record, here's a screenshot:

hatton-zulip.css

.private_messages_header .unread_count,
.user_sidebar_entry .unread_count {
  background-color: red;
  animation: blinker 1s linear infinite;
  width: 50px;
  text-align: center;
}
@keyframes blinker {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* body.dark-theme {
  background-color: #3a3f40 !important;
  color: #c0c0c0 !important;
} */

body.dark-theme,
body.dark-theme .app-main,
body.dark-theme .header-main,
body.dark-theme #tab_bar_underpadding,
body.dark-theme .floating_recipient .message-header-wrapper,
body.dark-theme .column-middle,
body.dark-theme #compose,
body.dark-theme .column-left .left-sidebar,
body.dark-theme .column-right .right-sidebar,
body.dark-theme #subscription_overlay .right,
body.dark-theme #settings_page .form-sidebar,
body.dark-theme #settings_page .right,
body.dark-theme li.active-filter,
body.dark-theme li.active-sub-filter,
body.dark-theme .date_row,
body.dark-theme .message_row,
body.dark-theme .rendered_markdown .codehilite code,
body.dark-theme .rendered_markdown .codehilite pre,
body.dark-theme .dropdown-menu ul,
body.dark-theme .dropdown .dropdown-menu,
body.dark-theme .popover,
body.dark-theme .popover-title,
body.dark-theme .popover-content {
  background: #3a3f40 !important;
}

body.dark-theme .stream_topic a {
  color: #00a651;
}

/* the border on the left side of messages */
body.dark-theme .messagebox {
  box-shadow: unset !important;
}
body.dark-theme .private-message .messagebox {
  background-color: #303030 !important;
}
/* it appears we can't style the sidebar */
#sidebar.toggle-sidebar {
  background: unset;
  background-color: yellow !important;
}
body.dark-theme .selected_message .messagebox-content {
  box-shadow: none !important;
}

body.dark-theme .message_header_private_message {
  background-color: transparent; /*#6a2f29;*/
}
body.dark-theme .message-header-contents .stream_label {
  background-color: transparent;
  color: #606060 !important;
}

body.dark-theme .message_header_private_message .stream_label {
  background-color: #6a2f29;
  color: #f4e3e2 !important;
}
#add-stream-link a {
  color: #303030;
}
a#invite-user-link {
  color: #303030;
}
.inline_profile_picture img {
  border-radius: 50%;
  object-fit: cover;
  /* there is a bug in zulip that asks for 50*50 from gravatar, but then sizes to 35, giving a blurry image. This helps */
  image-rendering: -webkit-optimize-contrast;
}
span.sender_name.auto-select {
  /* color: #00a651; */
  color: #ebebeb;
}

i.fa-check {
  visibility: hidden;
}

i.fa-bell-slash {
  visibility: hidden;
}
span.user_circle_green.user_circle {
  background-color: #00a651;
}
span.user_circle_idle.user_circle {
  background-color: #00a6507c;
  border-color: #00a6507c;
  background: unset;
}
span.sender_name {
  padding-top: 10px;
  padding-bottom: 20px;
}
body.dark-theme {
  /* color: #ebebeb; */
  color: #ffffffb8;
}