glassmuks (Archive, non-maintained)
Last updated at 2026-01-26 01:13:28.554108 +0000 +0000
Description
i do not have the time to work on this anymore, maybe I will later, but not now. 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.
Previews
None 😿
Code
To use this theme, paste this into your custom CSS:
@import url("https://css.gomuks.app/theme/glassmuks.css");Full CSS:
/* From https://developer.apple.com/design/human-interface-guidelines/color */
/* From https://www.figma.com/community/file/1527721578857867021/ios-and-ipados-26 */
/* TODO: iMessage colours from beta-versions */
/* TODO: Figure out systemGray, I've de-blued it but maybe convert it to a transparancy thing like the text (??) */
@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, 142);
--apple-gray-systemGray2: rgb(174, 174, 174);
--apple-gray-systemGray3: rgb(199, 199, 199);
--apple-gray-systemGray4: rgb(209, 209, 209);
--apple-gray-systemGray5: rgb(229, 229, 229);
--apple-gray-systemGray6: rgb(242, 242, 242);
--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, 108);
--apple-gray-systemGray2: rgb(142, 142, 142);
--apple-gray-systemGray3: rgb(174, 174, 174);
--apple-gray-systemGray4: rgb(188, 188, 188);
--apple-gray-systemGray5: rgb(216, 216, 216);
--apple-gray-systemGray6: rgb(235, 235, 235);
}
}
@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, 142);
--apple-gray-systemGray2: rgb(99, 99, 99);
--apple-gray-systemGray3: rgb(72, 72, 72);
--apple-gray-systemGray4: rgb(58, 58, 58);
--apple-gray-systemGray5: rgb(44, 44, 44);
--apple-gray-systemGray6: rgb(28, 28, 28);
--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, 174);
--apple-gray-systemGray2: rgb(124, 124, 124);
--apple-gray-systemGray3: rgb(84, 84, 84);
--apple-gray-systemGray4: rgb(68, 68, 68);
--apple-gray-systemGray5: rgb(54, 54, 54);
--apple-gray-systemGray6: rgb(36, 36, 36);
}
}
@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 **/
/* TODO: Make it less ugly looking */
@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) ***/
/*** Buttons ***/
/**** Modals ****/
/*** Styling ***/
/*** Mobile Modal Layout ***/
@media screen and (max-width: 45rem) {
/* Hide room scrollbar when modal pops up */
div.room-list:has(div.modal.overlay) {
overflow: hidden !important;
}
div.modal.overlay > div.modal-box {
border-radius: var(--apple-corner-radius-4-macos) var(--apple-corner-radius-4-macos) 0 0 !important;
min-height: 50vh !important;
max-height: 90vh !important;
/* Bottom-sticky */
position: fixed !important;
bottom: 0 !important;
width: 100vw !important;
}
}
/*** MODAL: Create Room ***/
div.modal-box.create-room-view-modal > div.modal-box-inner > form.create-room-view {
& > div.form-fields {
gap: .5rem .75rem !important;
& > label {
text-align: right !important;
}
& > input,
& > label.room-alias-container,
& > select[id="room-create-preset"] {
border-radius: var(--apple-corner-radius-1-selection) !important;
height: 2.5rem !important; /* Uniform height */
}
}
& > button[type="submit"] {
/* TODO: Liquid Glass Submit Button */
border-radius: var(--apple-corner-radius-5-capsule) !important;
background-color: var(--primary-color) !important;
color: var(--inverted-text-color) !important;
box-shadow: var(--apple-glass-box-shadow) !important;
}
& > div#room-create-invite {
&:has(input.item-list-item) {
border-radius: var(--apple-corner-radius-1-selection) !important;
background-color: var(--apple-gray-systemGray6) !important;
padding: 0.5rem !important;
}
& > div.item-list-header > button.item-list-add {
border-radius: var(--apple-corner-radius-1-selection) !important;
padding: 0.25rem !important;
}
}
/* TODO: Style stuff in "Advanced Options" */
}
/* [TMP] */
div.modal.dimmed {
backdrop-filter: blur(4px) 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 ****/