Bisexual Neon

bi-neon v1 by @sky:codestorm.net - Raw CSS (or without autoupdate) Version history Edit theme

Last updated at 2026-10-05 19:00:48.33822 +0000 +0000

Description

Bi flag inspired theme with cyberpunk style glow

Previews

Code

To use this theme, paste this into your custom CSS:

@import url("https://css.gomuks.app/theme/bi-neon.css");

Full CSS:

:root {
	color-scheme: dark;

	--gt-pink: #ff4fb8;
	--gt-violet: #8d4dff;
	--gt-blue: #4b3dff;
	--gt-lilac: #b3a8ff;
	--gt-rail: #050506;
	--gt-set: #08080a;
	--gt-panel: #0d0d10;
	--gt-code: #0e0e12;
	--gt-red: 255 45 60;
	--gt-amber: 255 138 42;

	--background-color: var(--gt-set);
	--login-background-color: var(--gt-rail);
	--text-color: #eeedf2;
	--inverted-text-color: var(--gt-set);
	--secondary-text-color: #85849a;
	--semisecondary-text-color: #b5b4c6;

	--link-text-color: #9b93ff;
	--visited-link-text-color: #c9a7ff;

	--primary-color: var(--gt-pink);
	--primary-color-dark: #e0399c;
	--error-color: #ff5c6b;
	--error-text-color: #ff8f99;

	--border-color: rgba(255, 255, 255, .1);
	--pill-background-color: rgba(255, 255, 255, .08);
	--disabled-input-background-color: rgba(255, 255, 255, .05);
	--url-preview-background-color: rgba(255, 255, 255, .04);
	--code-background-color: rgba(255, 255, 255, .07);
	--media-placeholder-default-background: rgba(255, 255, 255, .05);
	--media-placeholder-button-background: rgba(8, 8, 10, .6);

	--highlight-pill-background-color: var(--gt-pink);
	--highlight-pill-text-color: #2a0619;
	--button-hover-color: rgba(255, 255, 255, .12);
	--light-hover-color: rgba(255, 255, 255, .07);

	--own-reaction-background-color: transparent;
	--own-reaction-hover-color: transparent;
	--own-reaction-border-color: transparent;

	--composer-background-color: var(--gt-panel);

	--timeline-hover-bg-color: rgba(255, 255, 255, .04);
	--timeline-highlight-bg-color: transparent;
	--timeline-highlight-hover-bg-color: rgba(255, 79, 184, .08);
	--timeline-jump-bg-color: rgba(75, 61, 255, .16);
	--timeline-jump-hover-bg-color: rgba(75, 61, 255, .22);
	--timeline-soft-failed-bg-color: rgb(var(--gt-amber) / .12);
	--timeline-policy-server-spammy-bg-color: rgb(var(--gt-red) / .12);

	--room-list-background: var(--gt-rail);
	--room-list-background-overlay: transparent;
	--room-list-search-background-overlay: transparent;
	--space-list-background-overlay: transparent;
	--room-list-scrollbar-color: rgba(255, 79, 184, .55) rgba(255, 255, 255, .04);
	--room-list-entry-hover-color: rgba(255, 255, 255, .06);
	--room-list-entry-selected-color: rgba(255, 79, 184, .14);

	--dimmed-overlay-background-color: rgba(3, 3, 4, .84);
	--modal-box-shadow-color: rgba(141, 77, 255, .12);
	--popout-widget-box-shadow-color: rgba(141, 77, 255, .3);

	--emoji-selected-border-color: var(--gt-pink);
	--image-pack-editor-selected-color: rgba(255, 255, 255, .09);
	--poll-vote-bar-highlight-color: var(--gt-violet);

	--unread-counter-text-color: var(--gt-lilac);
	--unread-counter-message-bg: transparent;
	--unread-counter-notification-bg: transparent;
	--unread-counter-marked-unread-bg: transparent;
	--unread-counter-highlight-bg: transparent;
	--space-unread-counter-message-bg: var(--gt-blue);
	--space-unread-counter-notification-bg: var(--gt-violet);
	--space-unread-counter-highlight-bg: var(--gt-pink);

	--sender-color-0: #fe949b;
	--sender-color-1: #ff9b5a;
	--sender-color-2: #dfb127;
	--sender-color-3: #a4c752;
	--sender-color-4: #4ad496;
	--sender-color-5: #0ad1d3;
	--sender-color-6: #47c6ff;
	--sender-color-7: #99b5fe;
	--sender-color-8: #cba0ff;
	--sender-color-9: #f68fd5;

	--sent-ok-color: rgba(255, 255, 255, .28);
	--sent-error-color: var(--error-color);
	--blockquote-border-color: rgba(255, 255, 255, .2);
	--lightbox-button-color: #b5b4c6;
}

html {
	scrollbar-color: rgba(255, 79, 184, .55) rgba(255, 255, 255, .04);
	scrollbar-width: thin;
}

::selection {
	background: rgb(75 61 255 / .6);
	color: #fff;
}

main.matrix-main {
	background: var(--gt-rail);
}

div.room-list-wrapper::before {
	content: "";
	grid-column: 2;
	grid-row: 1 / -1;
	margin: 6px 6px 6px 0;
	border-radius: 12px;
	background: var(--gt-set);
	border: 1px solid rgba(255, 79, 184, .35);
	box-shadow: 0 0 18px -6px rgba(255, 79, 184, .4);
	pointer-events: none;
}

div.room-search-wrapper {
	width: auto;
	margin: 7px 7px 0 1px;
	padding-right: .25rem;
}

div.room-search-wrapper > button {
	border-radius: .6rem;
}

div.room-search-wrapper > input {
	background: rgba(255, 255, 255, .07);
	border-radius: 999px;
	margin: .5rem .25rem .5rem .5rem;
	padding: 0 1rem;
	height: 2.25rem;
}

div.room-list {
	margin: 0 7px 7px 1px;
	border-radius: 0 0 11px 11px;
}

div.room-entry {
	width: auto;
	margin: .125rem .375rem;
	border-radius: .7rem;
}

div.room-entry.active {
	box-shadow: inset 0 0 0 1px rgba(255, 79, 184, .45);
}

div.space-bar > div.space-entry.active {
	box-shadow: inset 0 0 0 1px rgba(255, 79, 184, .45);
}

div.room-view, div.right-panel {
	height: auto;
	margin: 6px 6px 6px 0;
	border-radius: 12px;
	background: var(--gt-set);
	overflow: hidden;
}

div.room-view {
	border: 1px solid rgba(75, 61, 255, .4);
	box-shadow: 0 0 22px -6px rgba(75, 61, 255, .45);
}

div.right-panel {
	border: 1px solid rgba(141, 77, 255, .4);
	box-shadow: 0 0 22px -6px rgba(141, 77, 255, .4);
}

div.room-header {
	background: transparent;
	border-bottom: 1px solid var(--border-color);
}

div.event-reactions > div.reaction {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .13);
	transition: border-color .15s;
}

div.event-reactions > div.reaction:hover:not(.disabled) {
	border-color: var(--gt-violet);
}

div.event-reactions > div.reaction.own-reaction {
	border: 1.5px solid transparent;
	background:
		linear-gradient(#141018, #141018) padding-box,
		linear-gradient(90deg, var(--gt-pink), var(--gt-violet), var(--gt-blue)) border-box;
}

div.event-reactions > div.reaction.own-reaction:hover:not(.disabled) {
	background:
		linear-gradient(#1d1626, #1d1626) padding-box,
		linear-gradient(90deg, var(--gt-pink), var(--gt-violet), var(--gt-blue)) border-box;
}

div.room-entry-unreads > div.unread-count,
div.unread-count {
	box-shadow: inset 0 0 0 1.5px var(--gt-blue);
	color: var(--gt-lilac);
	font-weight: 700;
}

div.room-entry-unreads > div.unread-count.notified,
div.room-entry-unreads > div.unread-count.marked-unread,
div.unread-count.notified,
div.unread-count.marked-unread {
	box-shadow: inset 0 0 0 1.5px var(--gt-violet);
	color: #c9a7ff;
}

div.room-entry-unreads > div.unread-count.highlighted,
div.unread-count.highlighted {
	box-shadow: inset 0 0 0 1.5px var(--gt-pink), 0 0 8px rgba(255, 79, 184, .5);
	color: #ff9fd6;
}

div.unread-count.space,
div.space-bar div.unread-count,
div.room-entry-unreads > div.unread-count.space,
div.room-entry-unreads > div.unread-count.space.notified,
div.room-entry-unreads > div.unread-count.space.marked-unread,
div.space-bar div.unread-count.notified,
div.space-bar div.unread-count.marked-unread {
	color: #fff;
	box-shadow: 0 0 0 1.5px var(--gt-rail);
}

div.space-bar div.unread-count.highlighted,
div.room-entry-unreads > div.unread-count.space.highlighted {
	color: #2a0619;
	box-shadow: 0 0 0 1.5px var(--gt-rail), 0 0 8px rgba(255, 79, 184, .55);
}

div.timeline-event {
	border-radius: .5rem;
}

div.event-sender-and-time > span.event-sender {
	padding: 0 .375rem;
	border-radius: .3rem;
	background: color-mix(in srgb, currentColor 14%, transparent);
}

div.timeline-event.highlight {
	border-radius: 0;
	box-shadow: inset 3px 0 0 var(--gt-pink);
	background-image:
		linear-gradient(90deg, transparent, rgba(255, 79, 184, .35) 40%, rgba(75, 61, 255, .35) 60%, transparent),
		linear-gradient(90deg, rgba(255, 79, 184, .16), rgba(141, 77, 255, .08) 55%, transparent);
	background-size: 50% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: -100% 0, 0 0;
	animation: gt-sweep 2.2s cubic-bezier(.4, .1, .2, 1) .15s 1 both;
}

@keyframes gt-sweep {
	from { background-position: -100% 0, 0 0; }
	to { background-position: 200% 0, 0 0; }
}

div.timeline-event.small-event {
	grid-template:
		"cmc                          cmc     cmc    cmc     empty"  0
		"timestamp                    tag     avatar content status" auto
		/ var(--timeline-avatar-total-size) 4.25rem 1.5rem 1fr     var(--timeline-status-size);
	border-radius: 0;
	font-family: var(--monospace-font-stack);
	font-size: .78rem;
	color: var(--semisecondary-text-color);
}

div.timeline-event.small-event::before {
	content: "room";
	grid-area: tag;
	align-self: center;
	justify-self: start;
	width: 3.75rem;
	text-align: center;
	font: 500 .6rem/1.7 var(--monospace-font-stack);
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 4px;
	color: var(--secondary-text-color);
	background: rgba(255, 255, 255, .05);
}

div.timeline-event.small-event.membership-event::before {
	content: "member";
	color: #ff6b0f;
	background: rgb(255 107 15 / .16);
}
div.timeline-event.small-event.hidden-event::before { content: "raw"; }

div.timeline-event.small-event.membership-event,
div.timeline-event.small-event.hidden-event {
	color: var(--secondary-text-color);
}

div.timeline-event.small-event.membership-event {
	box-shadow: inset 2px 0 0 #ff6b0f;
}

div.timeline-event.small-event.hidden-event {
	opacity: .5;
}

div.timeline-event.small-event.hidden-event pre.json-view {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	font: inherit;
}

div.timeline-event.small-event:has(.policy-body),
div.timeline-event.small-event:has(.acl-body),
div.timeline-event.small-event:has(.power-level-body) {
	color: var(--text-color);
	background-color: rgba(255, 255, 255, .035);
}

div.timeline-event.small-event:has(.policy-body) {
	box-shadow: inset 2px 0 0 #d74ddc;
}

div.timeline-event.small-event:has(.policy-body)::before {
	content: "ban list";
	color: #2a0619;
	background: #d74ddc;
}

div.timeline-event.small-event:has(.acl-body) {
	box-shadow: inset 2px 0 0 var(--gt-blue);
}

div.timeline-event.small-event:has(.acl-body)::before {
	content: "acl";
	color: #fff;
	background: var(--gt-blue);
}

div.timeline-event.small-event:has(.power-level-body) {
	box-shadow: inset 2px 0 0 var(--gt-violet);
}

div.timeline-event.small-event:has(.power-level-body)::before {
	content: "power";
	color: #fff;
	background: var(--gt-violet);
}

div.timeline-event.soft-failed,
div.timeline-event.policy-server-spammy {
	--gt-mark: var(--gt-red);
	border-radius: 0;
	outline: 1px solid rgb(var(--gt-mark) / .75);
	outline-offset: -1px;
}

div.timeline-event.soft-failed {
	--gt-mark: var(--gt-amber);
}

div.timeline-event.soft-failed.policy-server-spammy {
	background-color: transparent;
	background-image: linear-gradient(90deg, rgb(var(--gt-amber) / .15), rgb(var(--gt-red) / .12));
}

div.timeline-event.soft-failed:not(.policy-server-spammy):hover {
	background-color: rgb(var(--gt-amber) / .18);
}

div.timeline-event.policy-server-spammy:not(.soft-failed):hover {
	background-color: rgb(var(--gt-red) / .18);
}

div.timeline-event.soft-failed.policy-server-spammy:hover {
	background-color: transparent;
	background-image: linear-gradient(90deg, rgb(var(--gt-amber) / .21), rgb(var(--gt-red) / .18));
}

div.timeline-event:is(.soft-failed, .policy-server-spammy) > div.event-sender-and-time::after,
div.timeline-event:is(.same-sender, .small-event):is(.soft-failed, .policy-server-spammy) > div.event-content::before {
	--gt-cw: calc(1ch + .06em);
	content: "soft-fail";
	font: 500 .6rem/1.6 var(--monospace-font-stack);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: pre;
	border-radius: 4px;
	padding: 0 .375rem;
	color: #1a0508;
	background: rgb(var(--gt-amber));
}

div.timeline-event:is(.same-sender, .small-event):is(.soft-failed, .policy-server-spammy) > div.event-content::before {
	float: right;
	margin-left: .5rem;
}

div.timeline-event.policy-server-spammy > div.event-sender-and-time::after,
div.timeline-event:is(.same-sender, .small-event).policy-server-spammy > div.event-content::before {
	content: "policy";
	background: rgb(var(--gt-red));
}

div.timeline-event.soft-failed.policy-server-spammy > div.event-sender-and-time::after,
div.timeline-event:is(.same-sender, .small-event).soft-failed.policy-server-spammy > div.event-content::before {
	content: "soft-fail policy";
	background: linear-gradient(90deg, rgb(var(--gt-amber)) 0 calc(.375rem + 9.5 * var(--gt-cw)), rgb(var(--gt-red)) 0);
}

div.event-content pre:not(.json-view) {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	border: 1px solid transparent;
	border-radius: .5rem;
	padding: .5rem .75rem;
	background:
		linear-gradient(var(--gt-code), var(--gt-code)) padding-box,
		linear-gradient(90deg, rgba(255, 79, 184, .7), rgba(141, 77, 255, .5), rgba(75, 61, 255, .7)) border-box;
	clip-path: inset(0 round .5rem);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 79, 184, .55) transparent;
}

div.event-content pre:not(.json-view) > code {
	background: transparent;
}

div.message-composer {
	border: 2px solid transparent;
	border-radius: .8rem;
	background:
		linear-gradient(var(--composer-background-color), var(--composer-background-color)) padding-box,
		linear-gradient(90deg, var(--gt-pink), var(--gt-violet), var(--gt-blue)) border-box;
	box-shadow:
		-14px 0 32px -10px rgba(255, 79, 184, .4),
		14px 0 32px -10px rgba(75, 61, 255, .4);
	transition: box-shadow .25s ease;
}

div.message-composer:focus-within {
	box-shadow:
		-18px 0 40px -8px rgba(255, 79, 184, .6),
		18px 0 40px -8px rgba(75, 61, 255, .6);
}

div.message-composer > blockquote.reply-body.composer {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: .5rem;
}

div.message-composer > blockquote.reply-body.composer > * {
	grid-column: 2;
}

div.message-composer > blockquote.reply-body.composer::before {
	content: "↳";
	grid-column: 1;
	grid-row: 1 / span 2;
	color: var(--gt-pink);
}

div.date-separator {
	gap: .625rem;
	color: var(--secondary-text-color);
	font: .72rem var(--monospace-font-stack);
	text-transform: lowercase;
}

div.date-separator > hr {
	margin: 0;
	border: 0;
	height: 1px;
	opacity: 1;
}

div.date-separator > hr:first-of-type {
	flex: none;
	width: 1.75rem;
	background: var(--gt-pink);
}

div.date-separator > hr:last-of-type {
	flex: 1;
	background: var(--border-color);
}

div.read-receipts > div.avatars > img {
	opacity: .55;
	filter: grayscale(.5);
	transition: opacity .15s;
}

div.read-receipts:hover > div.avatars > img {
	opacity: 1;
	filter: none;
}

div.sync-status {
	align-items: center;
	gap: .6rem;
	padding: .4rem .75rem .4rem .4rem;
	background: var(--gt-panel);
	border: 1px solid rgba(141, 77, 255, .55);
	border-radius: .5rem;
	box-shadow: 0 0 18px -6px rgba(141, 77, 255, .6);
	font: .78rem var(--monospace-font-stack);
	text-transform: lowercase;
}

div.sync-status::before {
	content: "sync";
	font: 500 .6rem/1.7 var(--monospace-font-stack);
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0 .45rem;
	border-radius: 4px;
	color: #fff;
	background: var(--gt-violet);
}

div.sync-status.errored {
	border: 1px solid rgb(var(--gt-red) / .7);
	box-shadow: 0 0 18px -6px rgb(var(--gt-red) / .7);
	color: #ff8f99;
	font-weight: normal;
}

div.sync-status.errored::before {
	background: rgb(var(--gt-red));
}

@media (prefers-reduced-motion: reduce) {
	div.timeline-event.highlight { animation: none; }
	div.message-composer, div.event-reactions > div.reaction, div.read-receipts > div.avatars > img { transition: none; }
}