Theme glassmuks v4 by [@dav:sineware.ca]
! Pre-release theme, I haven't figured everything out yet, expect inconsistencies. Also most of the liquid in liquid glass evaporated in the making !! My own best-effort theming of gomuks to resemble Apple's Liquid Glass design language. Note that there isn't any fancy stuff like specular highlights or anything CSS (on Firefox) can't do.
Last updated at 2025-11-02 07:31:36.569849 +0000 +0000
Update theme (Mostly to-do with border-radii)
To use the theme, paste this into your custom CSS:
@import url("https://css.gomuks.app/theme/glassmuks.css");/* From https://developer.apple.com/design/human-interface-guidelines/color */
/* From https://www.figma.com/community/file/1527721578857867021/ios-and-ipados-26 */
@media (prefers-color-scheme: light) {
:root {
--apple-system-red: rgb(255, 56, 60);
--apple-system-red-marker: rgba(255, 56, 60, 0.5);
--apple-system-red-highlighter: rgba(255, 56, 60, 0.25);
--apple-system-orange: rgb(255, 141, 40);
--apple-system-orange-marker: rgba(255, 141, 40, 0.5);
--apple-system-orange-highlighter: rgba(255, 141, 40, 0.25);
--apple-system-yellow: rgb(255, 204, 0);
--apple-system-yellow-marker: rgba(255, 204, 0, 0.5);
--apple-system-yellow-highlighter: rgba(255, 204, 0, 0.25);
--apple-system-green: rgb(52, 199, 89);
--apple-system-green-marker: rgba(52, 199, 89, 0.5);
--apple-system-green-highlighter: rgba(52, 199, 89, 0.25);
--apple-system-mint: rgb(0, 200, 179);
--apple-system-mint-marker: rgba(0, 200, 179, 0.5);
--apple-system-mint-highlighter: rgba(0, 200, 179, 0.25);
--apple-system-teal: rgb(0, 195, 209);
--apple-system-teal-marker: rgba(0, 195, 209, 0.5);
--apple-system-teal-highlighter: rgba(0, 195, 209, 0.25);
--apple-system-cyan: rgb(0, 192, 232);
--apple-system-cyan-marker: rgba(0, 192, 232, 0.5);
--apple-system-cyan-highlighter: rgba(0, 192, 232, 0.25);
--apple-system-blue: rgb(0, 136, 255);
--apple-system-blue-marker: rgba(0, 136, 255, 0.5);
--apple-system-blue-highlighter: rgba(0, 136, 255, 0.25);
--apple-system-indigo: rgb(97, 85, 245);
--apple-system-indigo-marker: rgba(97, 85, 245, 0.5);
--apple-system-indigo-highlighter: rgba(97, 85, 245, 0.25);
--apple-system-purple: rgb(203, 48, 224);
--apple-system-purple-marker: rgba(203, 48, 224, 0.5);
--apple-system-purple-highlighter: rgba(203, 48, 224, 0.25);
--apple-system-pink: rgb(255, 45, 85);
--apple-system-pink-marker: rgba(255, 45, 85, 0.5);
--apple-system-pink-highlighter: rgba(255, 45, 85, 0.25);
--apple-system-brown: rgb(172, 127, 94);
--apple-system-brown-marker: rgba(172, 127, 94, 0.5);
--apple-system-brown-highlighter: rgba(172, 127, 94, 0.25);
--apple-system-systemGray: rgb(142, 142, 147);
--apple-system-systemGray-marker: rgba(142, 142, 147, 0.5);
--apple-system-systemGray-highlighter: rgba(142, 142, 147, 0.25);
--apple-system-systemGray2: rgb(174, 174, 178);
--apple-system-systemGray3: rgb(199, 199, 204);
--apple-system-systemGray4: rgb(209, 209, 214);
--apple-system-systemGray5: rgb(229, 229, 234);
--apple-system-systemGray6: rgb(242, 242, 247);
--apple-background-primary-base: rgba(255,255, 255);
--apple-background-primary-base-glass: rgba(242,242,247,0.1);
--apple-background-primary-elevated: #F2F2F7;
--apple-background-primary-elevated-glass: rgba(242,242,247,0.05);
--apple-background-primary-elevated-mid: rgb(248.5, 248.5, 251); /* Mid-point of primary-base and primary-elevated */
--apple-background-primary-elevated-more: #F2F2F7;
--apple-text-primary: #000000;
--apple-text-primary-inverted: #FFFFFF;
--apple-text-seconday: #8A8A8E;
--apple-text-tertiary: #C4C4C7;
--apple-text-quaternary: #DCDCDD;
}
}
@media (prefers-color-scheme: dark) {
:root {
--apple-system-red: rgb(255, 66, 69);
--apple-system-red-marker: rgba(255, 66, 69, 0.5);
--apple-system-red-highlighter: rgba(255, 66, 69, 0.25);
--apple-system-orange: rgb(255, 146, 48);
--apple-system-orange-marker: rgba(255, 146, 48, 0.5);
--apple-system-orange-highlighter: rgba(255, 146, 48, 0.25);
--apple-system-yellow: rgb(255, 214, 0);
--apple-system-yellow-marker: rgba(255, 214, 0, 0.5);
--apple-system-yellow-highlighter: rgba(255, 214, 0, 0.25);
--apple-system-green: rgb(48, 209, 88);
--apple-system-green-marker: rgba(48, 209, 88, 0.5);
--apple-system-green-highlighter: rgba(48, 209, 88, 0.25);
--apple-system-mint: rgb(0, 218, 195);
--apple-system-mint-marker: rgba(0, 218, 195, 0.5);
--apple-system-mint-highlighter: rgba(0, 218, 195, 0.25);
--apple-system-teal: rgb(0, 210, 224);
--apple-system-teal-marker: rgba(0, 210, 224, 0.5);
--apple-system-teal-highlighter: rgba(0, 210, 224, 0.25);
--apple-system-cyan: rgb(60, 211, 224);
--apple-system-cyan-marker: rgba(60, 211, 224, 0.5);
--apple-system-cyan-highlighter: rgba(60, 211, 224, 0.25);
--apple-system-blue: rgb(0, 145, 255);
--apple-system-blue-marker: rgba(0, 145, 255, 0.5);
--apple-system-blue-highlighter: rgba(0, 145, 255, 0.25);
--apple-system-indigo: rgb(107, 93, 255);
--apple-system-indigo-marker: rgba(107, 93, 255, 0.5);
--apple-system-indigo-highlighter: rgba(107, 93, 255, 0.25);
--apple-system-purple: rgb(219, 52, 242);
--apple-system-purple-marker: rgba(219, 52, 242, 0.5);
--apple-system-purple-highlighter: rgba(219, 52, 242, 0.25);
--apple-system-pink: rgb(255, 55, 95);
--apple-system-pink-marker: rgba(255, 55, 95, 0.5);
--apple-system-pink-highlighter: rgba(255, 55, 95, 0.25);
--apple-system-brown: rgb(183, 138, 102);
--apple-system-brown-marker: rgb(183, 138, 102, 0.5);
--apple-system-brown-highlighter: rgb(183, 138, 102, 0.25);
--apple-system-systemGray: rgb(142, 142, 147);
--apple-system-systemGray-marker: rgba(142, 142, 147, 0.5);
--apple-system-systemGray-highlighter: rgba(142, 142, 147, 0.25);
--apple-system-systemGray2: rgb(99, 99, 102);
--apple-system-systemGray3: rgb(72, 72, 74);
--apple-system-systemGray3-glass: rgb(72, 72, 74, 0.1);
--apple-system-systemGray4: rgb(58, 58, 60);
--apple-system-systemGray5: rgb(44, 44, 46);
--apple-system-systemGray6: rgb(28, 28, 30);
--apple-background-primary-base: rgb(0,0,0);
--apple-background-primary-elevated: #1C1C1E;
--apple-background-primary-elevated-mid: #171717; /* Mid-point of primary-base and primary-elevated */
--apple-background-primary-elevated-glass: rgba(156, 156, 158, 0.1);
--apple-background-primary-elevated-more: #2C2C2E;
--apple-text-primary: #FFFFFF;
--apple-text-primary-inverted: #000000;
--apple-text-seconday: #8D8D93;
--apple-text-tertiary: #47474A;
--apple-text-quaternary: #262627;
}
}
:root {
--apple-border-radius-1-selection: 0.5rem; /* ~ Border radius of macOS sidebar selections */
--apple-border-radius-2: 1rem; /* */
--apple-border-radius-3-macos-inner: 1.5rem; /* Border radius of macOS app "inner" sidebars */
--apple-border-radius-4-macos: 2rem; /* ~ Border radius of macOS windows + popups + "sliding tab" */
--apple-border-radius-5-squircle: 100rem; /* ~Squircle (more like a rounded square) */
--apple-border-radius-6-circle: 100%; /* Circle */
}
/* Gomuks-css specific theming */
/* Refer to https://github.com/gomuks/gomuks/blob/main/web/src/index.css */
:root {
--primary-color: var(--apple-system-green) !important;
--primary-color-dark: color-mix(in srgb, var(--apple-system-green), var(--apple-text-primary) 10%)!important;
--sender-color-0: var(--apple-system-red) !important;
--sender-color-1: var(--apple-system-orange) !important;
--sender-color-2: var(--apple-system-yellow) !important;
--sender-color-3: var(--apple-system-green) !important;
--sender-color-4: var(--apple-system-mint) !important;
--sender-color-5: var(--apple-system-cyan) !important;
--sender-color-6: var(--apple-system-blue) !important;
--sender-color-7: var(--apple-system-indigo) !important;
--sender-color-8: var(--apple-system-purple) !important;
--sender-color-9: var(--apple-system-pink) !important;
--border-color: var(--apple-system-systemGray) !important;
--background-color: var(--apple-background-primary-base) !important;
--login-background-color: var(--apple-background-primary-elevated) !important;
--code-background-color: var(--apple-background-primary-elevated) !important;
--url-preview-background-color: var(--apple-background-primary-elevated) !important;
--media-placeholder-default-background: var(--apple-background-primary-elevated) !important;
--media-placeholder-button-background: var(--apple-system-systemGray4) !important;
--timeline-hover-bg-color: color-mix(in srgb, var(--apple-background-primary-elevated-mid), var(--apple-text-primary) 5%) !important;
--timeline-highlight-bg-color: var(--apple-system-yellow-highlighter);
--timeline-highlight-hover-bg-color: var(--apple-system-yellow-marker);
--timeline-jump-bg-color: var(--apple-system-green-highlighter);
--timeline-jump-hover-bg-color: var(--apple-system-green-marker);
--timeline-soft-failed-bg-color: var(--apple-system-red-marker);
--timeline-policy-server-spammy-bg-color: var(--apple-system-red-highlighter);
--composer-background-color: var(--apple-background-primary-base-glass) !important;
--room-list-background: var(--apple-background-primary-elevated-more) !important;
--pill-background-color: var(--apple-system-systemGray3) !important;
--highlight-pill-background-color: var(--primary-color) !important;
--highlight-pill-text-color: var(--apple-text-primary-inverted) !important;
--text-color: var(--apple-text-primary) !important;
--inverted-text-color: var(--apple-text-primary-inverted) !important;
--secondary-text-color: var(--apple-text-seconday) !important;
--semisecondary-text-color: var(--apple-text-seconday) !important;
--error-color: var(--apple-system-red) !important;
--link-text-color: var(--apple-system-blue) !important;
--visited-link-text-color: var(--apple-system-blue) !important;
--button-hover-color: var(--apple-system-systemGray5) !important;
/* Used in autocompletion */
--light-hover-color: var(--apple-system-systemGray6) !important;
}
/***** Global - Modals ******/
/* Make everything in the foreground of the modal blured and grayscaled*/
div.overlay.modal.dimmed {
backdrop-filter: blur(4px) grayscale(45%) saturate(170%);
}
/* Make the modal a different colour than the background (Better contrast in dark mode) */
div.overlay.modal.dimmed > div.modal-box {
background-color: var(--apple-system-systemGray6);
}
/* Accent colour highlight "Report/Delete" Message, Share message, (etc.?) */
div.overlay.modal.dimmed > div.modal-box > div.modal-box-inner > form.confirm-message-modal > div.confirm-buttons > button:nth-of-type(2),
div.overlay.modal.dimmed > div.modal-box > div.modal-box-inner > form.create-room-view > button
{
background-color: var(--primary-color);
color: var(--inverted-text-color);
}
/* Rounded confirmation buttons */
div.confirm-buttons > button {
border-radius: var(--apple-border-radius-4-macosos);
margin: 0.1rem
}
/* Make the toggles match liquid glass look */
input.toggle {
width: 3.75em !important;
}
input.toggle {
&:checked {
&::after {
margin-left: 1em !important;
}
}
}
input.toggle {
&::after {
border-radius: 32px !important;
width: 2.25em !important;
}
}
/* State explorer, make it more clear that it's a selection thing */
div.room-state-explorer-box > div.state-explorer > div.title-bar {
background-color: var(--apple-system-systemGray5) !important;
border-radius: var(--apple-border-radius-4-macos);
padding: 6px;
}
div.room-state-explorer-box > div.state-explorer > div.title-bar > button:disabled {
background-color: var(--pill-background-color) !important;
border-radius: var(--apple-border-radius-4-macos);
font-weight: inherit !important;
}
/****** Room list ******/
/* Remove useless search icon*/
div.room-search-wrapper > button:nth-of-type(2) {
visibility: collapse;
}
/* Colouring */
.room-search-wrapper,
.space-bar,
.room-list {
background-color: var(--apple-background-primary-elevated-more) !important;
}
.room-list-wrapper,
.room-search-wrapper > input.room-search {
background-color: var(--apple-background-primary-elevated-glass) !important;
}
/* Rounding */
.room-search-wrapper > input.room-search {
border-radius: var(--apple-border-radius-4-macos)
}
/* Desktop Only */
@media screen and (min-width: 30rem) {
.room-list-wrapper {
margin: 0.5rem 0px 0.5rem 0.5rem !important; /* Add margins for "floating" effect; So room-list-resizer is on the edge instead of somewhere unintuitive */
border-radius: var(--apple-border-radius-3-macos-inner); /* Roundy */
}
div.space-bar > div.space-entry {
border-radius: var(--apple-border-radius-6-circle);
img {
border-radius: var(--apple-border-radius-6-circle) !important;
}
}
}
/* /* [!!] Temporary values - Spacing */
div.room-list {
padding-left: 8px;
padding-right: 8px;
}
/* Room entry rounding */
div.room-entry {
border-radius: var(--apple-border-radius-1-selection);
margin: 0.5rem 0;
}
/****** Room view ******/
/*** Room header ***/
/** Right buttons on desktop **/
div.right-buttons.big-screen {
background-color: var(--apple-background-primary-elevated) !important;
border-radius: var(--apple-border-radius-5-squircle);
}
/* Adjust border radius of the ends */
div.big-screen.right-buttons > button:nth-of-type(1) {
border-radius: var(--apple-border-radius-5-squircle) 0rem 0rem var(--apple-border-radius-5-squircle);
}
div.big-screen.right-buttons > button:nth-of-type(5) {
border-radius: 0rem var(--apple-border-radius-5-squircle) var(--apple-border-radius-5-squircle) 0rem;
}
/* Remove border between timeline view and room header*/
div.room-header {
border-bottom: none !important;
}
/*** Messsage Composer ***/
/** We apply "twice" so it floats above url/media preview **/
div.message-composer, div.input-area {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4px) saturate(200%);
border: none !important;
}
/** Round input buttons **/
div.message-composer > div.input-area > button {
border-radius: 32px;
}
/** Send button **/
div.message-composer > div.input-area {
button[title="Send message"] {
margin-right: 0.3em;
}
/** Make send button green when active **/
button[title="Send message"]:enabled {
background-color: var(--primary-color) !important;
color: var(--inverted-text-color) !important;
}
}
/*** Handling content ***/
div.location-container > div.leaflet-container, /* location widget */
div.media-container /* unpreviewed/previewed media (images/videos) */ {
border-radius: 8px;
}
/** Theme location widget **/
/* Theme '+' and '-' buttons */
div.location-container > div.leaflet-container > div > div {
div.leaflet-bar {
border: none
}
div.leaflet-bar > a {
background-color: var(--apple-background-primary-elevated-glass);
backdrop-filter: blur(32px) brightness(1.15);
color: var(--text-color) !important;
text-decoration: none;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
div.leaflet-bar > a:hover {
backdrop-filter: blur(16px) grayscale(0.3) !important;
}
div.leaflet-bar > a.leaflet-control-zoom-in {
border-radius: 32px 32px 0px 0px;
}
div.leaflet-bar > a.leaflet-control-zoom-out {
border-radius: 0px 0px 32px 32px;
}
}
/* Make attribution text actually readable */
div.leaflet-control-attribution {
background-color: var(--apple-background-primary-base-glass) !important;
color: var(--text-color);
backdrop-filter: blur(64px);
a {
color: var(--link-text-color);
}
}
/* Dark mode maps */
:root {
/* from https://gist.github.com/BrendonKoz/b1df234fe3ee388b402cd8e98f7eedbd */
--map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}
@media (prefers-color-scheme: dark) {
.leaflet-container > .leaflet-map-pane {
filter: var(--map-tiles-filter, none);
}
.leaflet-control-attribution {
filter: none !important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
box-shadow: none !important;
}
}
/** Highlight system messages from gomuks itself in the accent/primary colour **/
div.timeline-event[data-event-id*="$gomuks-internal"] {
background-color: var(--apple-system-green-highlighter) !important;
div.event-sender-and-time > span.event-sender {
color: var(--sender-color-3);
}
}
/****** Sidebar / Right Panel ******/
/*** User Info ***/
/** Make @gomuks user special **/
div.right-panel > div.right-panel-content.user {
div[title="gomuks"] {
background-color: var(--apple-system-green-highlighter) !important;
}
div[title="@gomuks"] {
background-color: var(--apple-system-green-highlighter) !important;
}
}