Schildi-like theme

Commit info

Update to work with dark mode. Some colors were changed in the process.

Description

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

Previews

None 😿

Code

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

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

Full CSS:

#room-search {
  // Add contrast to room search text box
  padding-left:1.25rem;
  margin-left: 1rem;
  margin-right: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  height: 2.4rem;
  background-color: var(--composer-background-color);
  border: 1px solid var(--border-color);
}


/* Room list background */
:root {
    --room-list-background: var(--space-list-background-overlay);
}


/* Space list background */
div.space-bar {
  background-color: var(--background-color);
}

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: var(--space-list-background-overlay);
    border-radius: 0.5rem;
}
div.space-entry:not([data-target-space]){
    background-color: var(--background-color);
}


/* 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: var(--semisecondary-text-color);
}
/* 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);
}