Schildi-like theme

Commit info

Changed room and space list background colours. Added backgrounds to search bar and space icons.

Description

Rooms with unread messages are show in bold to make them stand out more. Mimics the behaviour of SchildiChat.

Previews

Code

To use this theme, paste this into your custom CSS:

@import url("https://css.gomuks.app/theme/schildi.css");

Full CSS:

/* Room list background */
:root {
    --room-list-background: #f5f5f5;
}


/* Space list background */
div.space-bar {
  background-color: #eeeeee;
}

div.space-bar > div.space-entry {
	border-radius: 0.5rem;
}

/* A white background is used for most spaces. for most spaces
   For special 'spaces' like direct messages or ungrouped rooms, a darker background is used.
*/
div.space-entry {
    background-color: white;
    border-radius: 0.5rem;
}
div.space-entry:not([data-target-space]){
    background-color: #d8d8d8;
}


/* When a room has no unread messages, set the room name thickness to be slightly bold */
div.room-entry > div.room-entry-right > div.room-name {
      font-weight: inherit;
}
/* and the message preview text slightly grey */
.message-preview {
    color: #5f5f5f;
}
/* When unread messages are in a room, make the room title bold, and message preview black */
.room-entry:has(.room-entry-unreads) .room-entry-right .room-name {
  font-weight: bold;
}
.room-entry:has(.room-entry-unreads) .room-entry-right .message-preview {
  color: var(--text-color);
}


#room-search {
  background-color: #dedede;
  margin-left: 1.25rem;
  margin-right: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  height: 2.4rem;
}