Home To log in, use the button in gomuks web settings.

Theme glassmuks v1 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 05:58:11.093376 +0000 +0000

Initial commit - prerelease

Raw CSS (or without autoupdate) Version history Edit theme
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;
	}
}

/* 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) {
	background-color: var(--primary-color);
	color: var(--inverted-text-color);
}
/* Rounded confirmation buttons */
div.confirm-buttons > button {
	border-radius: 32px;
}
/* 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: 24px;
	padding: 6px;
}
div.room-state-explorer-box > div.state-explorer > div.title-bar > button:disabled {
	background-color: var(--pill-background-color) !important;
	border-radius: 24px;
	font-weight: inherit !important;
}
/****** Room list ******/

/* Remove useless search icon*/
div.room-search-wrapper > button:nth-of-type(2) {
	visibility: collapse;
}

.room-search-wrapper,
.space-bar,
.room-list {
	background-color: var(--apple-background-primary-elevated-more) !important;
}

.room-list-wrapper {
	background-color: var(--apple-background-primary-elevated-glass) !important;
}

/* Desktop Only */
@media screen and (min-width: 30rem) {
	.room-list-wrapper {
		/* Add margins for "floating" effect; So room-list-resizer is on the edge instead of floating somewhere */
		margin: 8px 0px 8px 8px !important;
		/* Roundy */
		border-radius: 24px;
	}
}

/* [!!] Temporary - Make stuff rounded */
div.room-list {
	padding-left: 8px;
	padding-right: 8px;
}
div.room-entry {
	border-radius: 8px;
	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: 32px;
}
/* Adjust border radius of the ends */
div.big-screen.right-buttons > button:nth-of-type(1) {
	border-radius: 32px 0px 0px 32px;
}
div.big-screen.right-buttons > button:nth-of-type(5) {
	border-radius: 0px 32px 32px 0px;
}

div.room-header {
	/* Remove border between timeline view and 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;
	}
}