Theme glassmuks v9 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-06 13:42:26.110688 +0000 +0000
Changed things
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-glass: rgb(52, 199, 89, 0.90);
--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-systemGray-glass: rgba(142, 142, 147, 0.3);
--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-glass: rgb(48, 209, 88, 0.90);
--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-systemGray-glass: rgba(142, 142, 147, 0.3);
--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: 50%; /* Circle */
/* [MIT] from https://github.com/Nezz/homeassistant-visionos-theme/blob/master/themes/Liquid%20Glass.yaml */
--apple-glass-box-shadow: 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset, -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset, 0 0 8px 1px rgba(255, 255, 255, 0.10) inset, 0 0 2px 0 rgba(0, 0, 0, 0.10);
}
/* 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-glass: var(--apple-system-green-glass) !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-glass) !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: color-mix(in srgb, var(--apple-system-yellow-highlighter), var(--apple-background-primary-base) 40%) !important;
--timeline-highlight-hover-bg-color: var(--apple-system-yellow-highlighter);
--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 ******/
/* Scrollbars */
:root {
scrollbar-color: var(--apple-system-systemGray2) var(--apple-background-primary-base) !important;
}
/* Make everything in the foreground of the modal blurred 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-macos);
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;
}
/** Context Menu **/
/* fix hovering stuff please!! */
div.context-menu {
background-color: var(--apple-background-primary-elevated-glass) !important;
border-radius: var(--apple-border-radius-4-macos) !important;
box-shadow: var(--apple-glass-box-shadow) !important;
backdrop-filter: blur(16px) brightness(120%);
padding: 0.5em 0.3em; /* todo; tmp padding */
& > button {
padding: .6rem .75rem; /* todo; tmp padding */
}
& > button:hover {
background-color: var(--apple-background-primary-elevated-glass) !important;
backdrop-filter: blur(16px) brightness(60%) !important;
border-radius: var(--apple-border-radius-3-macos-inner) !important; /* Figure it out */
}
}
/****** 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);
box-shadow: var(--apple-glass-box-shadow) !important;
}
/* 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;
}
/* Make hover rounded */
div.big-screen.right-buttons > button:hover {
border-radius: var(--apple-border-radius-5-squircle);
box-shadow: var(--apple-glass-box-shadow);
/* note hover bg change messes with the box shadow*/
}
/* Remove border between timeline view and room header*/
div.room-header {
border-bottom: none !important;
}
/** Glass effects **/
/* [MOBILE] Make 3-dot menu a glass element */
div.small-screen.right-buttons > button,
/* Make back button glass */
div.room-header > button.back {
border-radius: var(--apple-border-radius-5-squircle) !important;
background-color: var(--apple-background-primary-elevated-mid) !important;
box-shadow: var(--apple-glass-box-shadow) !important;
&:hover,
&:active {
background-color: var(--apple-background-primary-elevated-more) !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-glass) !important;
color: var(--inverted-text-color) !important;
box-shadow: var(--apple-glass-box-shadow) !important;
backdrop-filter: blur(4px);
}
}
/*** 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);
}
}
/*** Emojis ***/
/* TMP */
div.emoji-picker,
div.sticker-picker,
div.gif-picker {
background-color: var(--apple-background-primary-base-glass);
backdrop-filter: blur(8px) brightness(110%);
}
@media screen and (max-width: 37.5rem) {
div.emoji-picker, div.gif-picker, div.sticker-picker {
/* [MOBILE] Make emoji/sticker/gif popup not cover the message composer */
height: calc(100% - 4.5rem) !important;
/* [MOBILE] Make glass effect more opaque */
background-color: var(--apple-background-primary-elevated-glass);
backdrop-filter: blur(16px);
}
}
/****** 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;
}
}