Theme glassmuks v10 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-09 02:50:19.462015 +0000 +0000
Rewritten codebase
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 */
/* iMessage colours from beta-versions */
@media (prefers-color-scheme: light) {
:root {
--apple-colour-red: rgb(255, 56, 60);
--apple-colour-orange: rgb(255, 141, 40);
--apple-colour-yellow: rgb(255, 204, 0);
--apple-colour-green: rgb(52, 199, 89);
--apple-colour-mint: rgb(0, 200, 179);
--apple-colour-teal: rgb(0, 195, 209);
--apple-colour-cyan: rgb(0, 192, 232);
--apple-colour-blue: rgb(0, 136, 255);
--apple-colour-indigo: rgb(97, 85, 245);
--apple-colour-purple: rgb(203, 48, 224);
--apple-colour-pink: rgb(255, 45, 85);
--apple-colour-brown: rgb(172, 127, 94);
--apple-text-primary: rgb(0, 0, 0);
--apple-text-primary-inverted: rgb(255, 255, 255);
--apple-text-secondary: rgb(0, 0, 5, 0.50); /* Based on #8A8A8E, increased from 45% to 50% */
--apple-text-tertiary: rgb(0, 0, 3, 0.40); /* Based on #C4C4C7, increased from 25% to 40% */
--apple-text-quaternary: rgb(0, 0, 1, 0.25); /* Based on ##DCDCDD, increased from 15% to 25% */
--apple-gray-systemGray: rgb(142, 142, 147);
--apple-gray-systemGray2: rgb(174, 174, 178);
--apple-gray-systemGray3: rgb(199, 199, 204);
--apple-gray-systemGray4: rgb(209, 209, 214);
--apple-gray-systemGray5: rgb(229, 229, 234);
--apple-gray-systemGray6: rgb(242, 242, 247);
--apple-imessage-base: rgb(255, 255, 255);
--apple-imessage-sidebar: rgb(247, 247, 247);
--apple-imessage-search: rgb(0, 0, 0, 0.026); /* Based on rgb(240, 240, 240) */
--apple-imessage-composer: rgb(0, 0, 0, 0.03); /* Based on rgb(247, 247, 247) */
}
@media (prefers-contrast: more) {
:root {
--apple-colour-red: rgb(233, 21, 45);
--apple-colour-orange: rgb(197, 83, 0);
--apple-colour-yellow: rgb(161, 106, 0);
--apple-colour-green: rgb(0, 137, 50);
--apple-colour-mint: rgb(0, 133, 117);
--apple-colour-teal: rgb(0, 129, 152);
--apple-colour-cyan: rgb(0, 126, 174);
--apple-colour-blue: rgb(30, 110, 244);
--apple-colour-indigo: rgb(86, 74, 222);
--apple-colour-purple: rgb(176, 47, 194);
--apple-colour-pink: rgb(231, 18, 77);
--apple-colour-brown: rgb(149, 109, 81);
--apple-text-secondary: rgb(0, 0, 5, 0.9);
--apple-text-tertiary: rgb(0, 0, 3, 0.8);
--apple-text-quaternary: rgb(0, 0, 1, 0.5);
--apple-gray-systemGray: rgb(108, 108, 112);
--apple-gray-systemGray2: rgb(142, 142, 147);
--apple-gray-systemGray3: rgb(174, 174, 178);
--apple-gray-systemGray4: rgb(188, 188, 192);
--apple-gray-systemGray5: rgb(216, 216, 220);
--apple-gray-systemGray6: rgb(235, 235, 240);
}
}
@media (prefers-reduced-transparency), (prefers-contrast: more) {
:root {
--apple-imessage-sidebar: rgb(234, 234, 234);
--apple-imessage-composer: rgb(0, 0, 0, 0.10); /* Based on rgb(229, 229, 229) */
}
}
@media screen and (max-width: 45rem) and (any-pointer: coarse) {
:root {
--apple-imessage-base: rgb(255, 255, 255) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
--apple-imessage-sidebar: rgb(255, 255, 255) !important; /* Double-check for iOS 26 */
--apple-imessage-search: rgb(238, 238, 239); /* Double-check for iOS 26 + turn into RGBA format; This is the iOS 18 colour */
--apple-imessage-composer: rgb(255, 255, 255, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
}
}
}
@media (prefers-color-scheme: dark) {
:root {
--apple-colour-red: rgb(255, 66, 69);
--apple-colour-orange: rgb(255, 146, 48);
--apple-colour-yellow: rgb(255, 214, 0);
--apple-colour-green: rgb(48, 209, 88);
--apple-colour-mint: rgb(0, 218, 195);
--apple-colour-teal: rgb(0, 210, 224);
--apple-colour-cyan: rgb(60, 211, 224);
--apple-colour-blue: rgb(0, 145, 255);
--apple-colour-indigo: rgb(107, 93, 255);
--apple-colour-purple: rgb(219, 52, 242);
--apple-colour-pink: rgb(255, 55, 95);
--apple-colour-brown: rgb(183, 138, 102);
--apple-text-primary: #FFFFFF;
--apple-text-primary-inverted: #000000;
--apple-text-secondary: rgb(249, 249, 255, 0.50); /* Based on #8D8D93, Increased from 45% to 50% */
--apple-text-tertiary: rgb(252, 252, 255, 0.40); /* Based on #47474A, Increased from 25% to 40% */
--apple-text-quaternary: rgb(254, 254, 255, 0.25); /* Based on #262627, Increased from 15% to 25% */
--apple-gray-systemGray: rgb(142, 142, 147);
--apple-gray-systemGray2: rgb(99, 99, 102);
--apple-gray-systemGray3: rgb(72, 72, 74);
--apple-gray-systemGray4: rgb(58, 58, 60);
--apple-gray-systemGray5: rgb(44, 44, 46);
--apple-gray-systemGray6: rgb(28, 28, 30);
--apple-imessage-base: rgb(30, 30, 32); /* Technically its 30,30,30; Changed for the blue-tint consistency */
--apple-imessage-sidebar: rgb(27, 27, 27);
--apple-imessage-search: rgb(30, 30, 30); /* Based on rgb(30, 30, 30); TODO Change into RGBA later */
--apple-imessage-composer: rgb(255, 255, 255, 0.033); /* Based on rgb(40, 40, 40) */
}
@media (prefers-contrast: more) {
:root {
--apple-colour-red: rgb(255, 97, 101);
--apple-colour-orange: rgb(255, 160, 86);
--apple-colour-yellow: rgb(254, 223, 67);
--apple-colour-green: rgb(74, 217, 104);
--apple-colour-mint: rgb(84, 223, 203);
--apple-colour-teal: rgb(59, 221, 236);
--apple-colour-cyan: rgb(109, 217, 255);
--apple-colour-blue: rgb(92, 184, 255);
--apple-colour-indigo: rgb(167, 170, 255);
--apple-colour-purple: rgb(234, 141, 255);
--apple-colour-pink: rgb(255, 138, 196);
--apple-colour-brown: rgb(219, 166, 121);
--apple-text-secondary: rgb(249, 249, 255, 0.9);
--apple-text-tertiary: rgb(252, 252, 255, 0.8);
--apple-text-quaternary: rgb(254, 254, 255, 0.5);
--apple-gray-systemGray: rgb(174, 174, 178);
--apple-gray-systemGray2: rgb(124, 124, 128);
--apple-gray-systemGray3: rgb(84, 84, 86);
--apple-gray-systemGray4: rgb(68, 68, 70);
--apple-gray-systemGray5: rgb(54, 54, 56);
--apple-gray-systemGray6: rgb(36, 36, 38);
}
}
@media (prefers-reduced-transparency), (prefers-contrast: more) {
:root {
--apple-imessage-base: rgb(32, 32, 34); /* Technically its 30,30,30; Changed for the blue-tint consistency */
--apple-imessage-sidebar: rgb(28, 28, 28);
--apple-imessage-composer: rgb(255, 255, 255, 0.015); /* Technically its 35,35,35; Changed for the blue-tint consistency */
}
}
@media screen and (max-width: 45rem) and (any-pointer: coarse) {
:root {
--apple-imessage-base: rgb(0, 0, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
--apple-imessage-sidebar: rgb(0, 0, 0); /* Double-check for iOS 26 */
--apple-imessage-search: rgb(28, 28, 30); /* Double-check for iOS 26 + turn into RGBA format; This is the iOS 18 colour */
--apple-imessage-composer: rgb(0, 0, 0, 0) !important; /* Double-check for iOS 26; This is the iOS 18 colour */
}
}
}
:root {
/* Border Radii's */
--apple-corner-radius-1-selection: 0.5rem; /* ~ Border radius of macOS sidebar selections */
--apple-corner-radius-2: 1rem; /* */
--apple-corner-radius-3-macos-inner: 1.5rem; /* Border radius of macOS app "inner" sidebars */
--apple-corner-radius-4-macos: 2rem; /* ~ Border radius of macOS windows + popups + "sliding tab" */
--apple-corner-radius-5-capsule: 100rem; /* Buttons, elements near screen borders, etc. */
/* [MIT] from https://github.com/Nezz/homeassistant-visionos-theme/blob/master/themes/Liquid%20Glass.yaml */
/* TODO: Different light/dark mode shadows, this one is more for dark-mode */
--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);
/* TODO: Add standardised backdrop-filter as well as one for hovering (should utilise darkening via brightness()?) */
@media (prefers-color-scheme: light) {
--apple-glass-backdrop: blur(8px) !important;
}
@media (prefers-color-scheme: dark) {
--apple-glass-backdrop: blur(8px) !important;
}
--apple-opacity-timeline: 50%;
--apple-opacity-timeline-colour-hover: 75%;
--apple-opacity-room: 75%;
--apple-opacity-cosmetic-basic: 50%;
--apple-opacity-cosmetic-overlay: 75%;
--apple-opacity-inactive-background: 70%;
--apple-opacity-glass-overlay: 40%;
--apple-opacity-glass-context: 70%;
--apple-opacity-glass-composer: 60%;
@media (prefers-reduced-transparency) {
--apple-opacity-cosmetic-basic: 100%;
--apple-opacity-cosmetic-overlay: 100%;
--apple-opacity-inactive-background: 90%;
--apple-opacity-glass-overlay: 75%;
--apple-opacity-glass-composer: 90%;
}
@media (prefers-contrast: more) {
--apple-opacity-cosmetic-basic: 100%;
--apple-opacity-cosmetic-overlay: 100%;
--apple-opacity-inactive-background: 98%;
--apple-opacity-glass-overlay: 100%;
--apple-opacity-glass-composer: 100%;
--apple-opacity-room: 80%;
}
/* Gomuks stuff */
/** Refer to https://github.com/gomuks/gomuks/blob/main/web/src/index.css **/
/** Last fetched 45f0841e5dae27a84f3d29211447afea853af6b0 **/
--background-color: var(--apple-imessage-base) !important;
/* TODO: --login-background-color: #eee; */
--text-color: var(--apple-text-primary) !important;
--inverted-text-color: var(--apple-text-primary-inverted) !important;
--secondary-text-color: var(--apple-text-secondary) !important;
--semisecondary-text-color: var(--apple-text-tertiary) !important;
--link-text-color: var(--apple-colour-blue) !important;
--visited-link-text-color: var(--link-text-color) !important;
--code-background-color: rgb(from var(--apple-gray-systemGray5) r g b / var(--apple-opacity-cosmetic-basic)) !important;
--media-placeholder-default-background: var(--apple-gray-systemGray4) !important;
--media-placeholder-button-background: rgb(from var(--apple-gray-systemGray6) r g b / var(--apple-opacity-cosmetic-overlay)) !important;
--primary-color: var(--apple-colour-green) !important;
--primary-color-dark: var(--apple-colour-green) !important; /* Should be fine...? */
--error-color: var(--apple-colour-red) !important;
--border-color: var(--apple-gray-systemGray3) !important; /* Colour for ALL the borders */
@media (prefers-contrast: more) {
--border-color: var(--apple-gray-systemGray) !important;
}
--pill-background-color: rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-overlay)) !important;
--url-preview-background-color: rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-overlay)) !important;
--highlight-pill-background-color: var(--primary-color) !important;
--highlight-pill-text-color: var(--inverted-text-color) !important;
--button-hover-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important; /* Hover colour for ALL the buttons*/
--light-hover-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important; /* Hover colour for reactions */
--composer-background-color: var(--apple-imessage-composer) !important;
--timeline-hover-bg-color: rgb(from var(--apple-gray-systemGray4) r g b / var(--apple-opacity-timeline)) !important;
--timeline-highlight-bg-color: rgb(from var(--apple-colour-yellow) r g b / calc(var(--apple-opacity-timeline) - 40%)) !important;
--timeline-highlight-hover-bg-color: rgb(from var(--apple-colour-yellow) r g b / calc(var(--apple-opacity-timeline-colour-hover) - 50%)) !important;
--timeline-jump-bg-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-timeline)) !important;
--timeline-jump-hover-bg-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-timeline-colour-hover)) !important;
--timeline-soft-failed-bg-color: rgb(from var(--apple-colour-red) r g b / 30%) !important;
--timeline-policy-server-spammy-bg-color: rgb(from var(--apple-colour-red) r g b / 20%) !important;
--room-list-background: var(--apple-imessage-sidebar) !important;
--room-list-background-overlay: transparent !important;
--room-list-search-background-overlay: transparent !important;
--space-list-background-overlay: transparent !important;
--room-list-scrollbar-color: var(--apple-gray-systemGray2) var(--apple-imessage-sidebar) !important;
--room-list-entry-hover-color: rgb(from var(--apple-gray-systemGray4) r g b / var(--apple-opacity-room)) !important;
--room-list-entry-selected-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-room)) !important;
--dimmed-overlay-background-color: rgb(from var(--apple-imessage-base) r g b / var(--apple-opacity-inactive-background)) !important;
--modal-box-shadow-color: rgba(0, 0, 0, 0.1); /* Composer, Emoji/Sticker/GIF box-shadow */
--emoji-selected-border-color: var(--primary-color) !important;
/* TODO: Unread counters */
--unread-counter-text-color: var(--inverted-text-color);
--unread-counter-message-bg: rgba(0, 0, 0, 0.35);
--unread-counter-notification-bg: rgba(50, 150, 0, 0.7);
--unread-counter-marked-unread-bg: var(--unread-counter-notification-bg);
--unread-counter-highlight-bg: rgba(200, 0, 0, 0.7);
--space-unread-counter-message-bg: rgb(100, 100, 100, 0.9);
--space-unread-counter-notification-bg: rgb(50, 150, 0);
--space-unread-counter-highlight-bg: rgb(200, 0, 0);
@media (prefers-color-scheme: dark) {
--unread-counter-message-bg: rgba(255, 255, 255, 0.5);
--unread-counter-notification-bg: rgba(150, 255, 0, 0.7);
--unread-counter-highlight-bg: rgba(255, 50, 50, 0.7);
--space-unread-counter-message-bg: rgb(200, 200, 200, 0.8);
--space-unread-counter-notification-bg: rgb(150, 255, 0);
--space-unread-counter-highlight-bg: rgb(255, 50, 50);
}
/* Green is reserved for gomuks */
--sender-color-0: var(--apple-colour-red) !important;
--sender-color-1: var(--apple-colour-orange) !important;
--sender-color-2: var(--apple-colour-yellow) !important;
--sender-color-3: var(--apple-colour-mint) !important;
--sender-color-4: var(--apple-colour-teal) !important;
--sender-color-5: var(--apple-colour-cyan) !important;
--sender-color-6: var(--apple-colour-blue) !important;
--sender-color-7: var(--apple-colour-indigo) !important;
--sender-color-8: var(--apple-colour-purple) !important;
--sender-color-9: var(--apple-colour-pink) !important;
--sent-ok-color: var(--border-color);
--sent-error-color: var(--error-color);
--blockquote-border-color: var(--apple-gray-systemGray2) !important;
--lightbox-button-color: var(--border-color);
}
/* Accesibility stuff */
@media (prefers-contrast: more) {
div.event-reactions > div.reaction {
background-color: var(--apple-gray-systemGray4) !important;
&:hover {
background-color: var(--apple-gray-systemGray2) !important;
}
}
}
/**** Globals ****/
/*** Context Menu ***/
div.context-menu {
/** Desktop / Mouse **/
@media screen and (any-pointer: fine) {
background-color: rgb(from var(--apple-imessage-base) r g b / var(--apple-opacity-glass-context)) !important;
backdrop-filter: var(--apple-glass-backdrop) !important;
width: 12rem !important;
padding: 0.25rem !important;
border: 1px solid rgb(from var(--apple-gray-systemGray2) r g b / var(--apple-opacity-glass-context)) !important;
border-radius: var(--apple-corner-radius-1-selection) !important;
filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.125)) !important;
& > hr {
margin: 0.5rem 0.5rem !important;
opacity: 50% !important;
}
& > button {
border-radius: inherit !important;
&:hover, &:focus, &:active {
background-color: rgb(from var(--apple-colour-green) r g b / var(--apple-opacity-glass-context)) !important;
}
&.redact-button {
color: inherit !important; /* No individual text colouring in Apple's Context Menus */
}
}
}
/** Phones / Touchscreen **/
/** FIXME: Colours from iOS 18 with a bit of iOS 26, double-check and re-do **/
@media screen and (any-pointer: coarse) {
background-color: rgb(from var(--apple-text-primary-inverted) r g b / var(--apple-opacity-glass-overlay)) !important; /* figure out colours later */
box-shadow: var(--apple-glass-box-shadow) !important;
backdrop-filter: var(--apple-glass-backdrop) !important;
padding: 0.5rem 0.4rem !important;
border-radius: var(--apple-corner-radius-4-macos);
& > button {
border-radius: inherit !important;
padding: .75rem 1rem !important;
&:hover, &:focus, &:active {
background-color: rgb(from var(--apple-gray-systemGray3) r g b / var(--apple-opacity-glass-overlay)) !important;
}
}
}
}
/*** Scrollbars (Blend-in) ***/
/**** Modals ****/
/* [TMP] */
div.modal.dimmed {
backdrop-filter: blur(32px) brightness(0.8) !important;
}
/**** Room List ****/
/* TODO: Pad space and search so it starts from the same place */
/* TODO: Padding or the Margins for each room feels kinda off... */
/*** Desktop/Tablet: Make room list into a floating sidebar ***/
@media screen and (min-width: 45rem) {
div.room-list-wrapper {
margin: 0.5rem 0px 0.5rem 0.5rem !important;
border-radius: var(--apple-corner-radius-3-macos-inner) !important;
box-shadow: var(--apple-glass-box-shadow) !important;
backdrop-filter: var(--apple-glass-backdrop) !important;
}
div.room-list-wrapper > div.space-bar > div.space-entry {
border-radius: var(--apple-corner-radius-5-capsule);
& > img {
border-radius: var(--apple-corner-radius-5-capsule) !important;
}
}
}
/*** Search ***/
/* TODO: Animation, hide create room button when search is focused */
div.room-list-wrapper > div.room-search-wrapper {
/** Re-order and re-style elements **/
display: flex !important;
flex-direction: row !important;
& > button:disabled,
& > input.room-search {
background-color: var(--apple-imessage-search) !important;
height: 3rem !important;
}
& > button:disabled {
order: 1 !important;
margin: 0 0 0 0.5rem !important;
padding: 0 0 0 1rem !important;
border-radius: var(--apple-corner-radius-5-capsule) 0 0 var(--apple-corner-radius-5-capsule) !important;
& > svg {
color: var(--apple-text-secondary) !important;
height: 1.5rem !important;
}
}
& > input.room-search {
order: 2 !important;
padding: 0 0 0 0.5rem !important;
border-radius: 0 var(--apple-corner-radius-5-capsule) var(--apple-corner-radius-5-capsule) 0 !important;
&::placeholder {
color: var(--apple-text-secondary) !important;
}
}
& > button[title="Create room"] {
order: 3 !important;
margin: 0 0.5rem 0 0.5rem !important;
border-radius: var(--apple-corner-radius-5-capsule) !important;
}
}
/*** Individual Rooms ***/
div.room-list-wrapper > div.room-list {
padding: 0.25rem 0.5rem !important;
& > div.room-entry {
border-radius: var(--apple-corner-radius-1-selection) !important;
margin: 0.5rem 0rem !important;
}
& > div.room-entry > div.room-entry-right > div.message-preview {
color: var(--apple-text-secondary) !important;
}
}
/**** Room View ****/
/** [TMP!!!] So theme is some-what usable; imported from old rewrite **/
div.message-composer, div.input-area {
backdrop-filter: blur(4px) saturate(200%);
}
/**** Right Panel ****/