Cyberpunk
Commit info
Committed at 2026-10-05 22:33:34.644887 +0000 +0000 by @sky:codestorm.net
Description
A theme heavily inspired by cyberpunk with neon amber on black and cyan accents
Previews
Code
To use this theme, paste this into your custom CSS:
@import url("https://css.gomuks.app/theme/cyberpunk.css");Full CSS:
:root {
color-scheme: dark;
--sn-y: #ffe600;
--sn-cy: #19f0ff;
--sn-mg: #ff2bd6;
--sn-rd: #ff3b5c;
--sn-vi: #b48cff;
--sn-ink: #121000;
--sn-rail: #020202;
--sn-panel: #030303;
--sn-fill: #040404;
--sn-mute: #7f7d6c;
--sn-cham: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
--sn-stripe-y: repeating-linear-gradient(-45deg, #ffe600 0 5px, #050505 5px 10px);
--sn-stripe-m: repeating-linear-gradient(-45deg, #ff2bd6 0 5px, #050505 5px 10px);
--sn-stripe-r: repeating-linear-gradient(-45deg, #ff3b5c 0 5px, #050505 5px 10px);
--sn-stripe-mr: repeating-linear-gradient(-45deg, #ff2bd6 0 5px, #050505 5px 10px, #ff3b5c 10px 15px, #050505 15px 20px);
--sn-grid:
repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
linear-gradient(rgba(255, 230, 0, .045) 1px, transparent 1px) 0 0 / 36px 36px,
linear-gradient(90deg, rgba(255, 230, 0, .045) 1px, transparent 1px) 0 0 / 36px 36px;
--font-stack: "Fira Code VF", "Fira Code", monospace;
--font-feature-settings: var(--monospace-font-feature-settings);
--letter-spacing: var(--monospace-letter-spacing);
--background-color: var(--sn-panel);
--login-background-color: var(--sn-rail);
--text-color: #ecece6;
--inverted-text-color: var(--sn-ink);
--secondary-text-color: #7f7d6c;
--semisecondary-text-color: #b8b6a6;
--link-text-color: var(--sn-cy);
--visited-link-text-color: #8fe9ef;
--primary-color: var(--sn-y);
--primary-color-dark: #d6c100;
--error-color: var(--sn-rd);
--error-text-color: #ff8a9c;
--border-color: rgba(255, 230, 0, .16);
--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, .08);
--media-placeholder-default-background: rgba(255, 255, 255, .05);
--media-placeholder-button-background: rgba(3, 3, 3, .6);
--blockquote-border-color: rgba(255, 255, 255, .2);
--highlight-pill-background-color: var(--sn-y);
--highlight-pill-text-color: var(--sn-ink);
--button-hover-color: rgba(255, 230, 0, .12);
--light-hover-color: rgba(255, 230, 0, .07);
--own-reaction-background-color: transparent;
--own-reaction-hover-color: transparent;
--own-reaction-border-color: transparent;
--composer-background-color: var(--sn-fill);
--timeline-avatar-size: 2rem;
--timeline-message-gap: .125rem;
--timeline-vertical-padding: .0625rem;
--timeline-hover-bg-color: rgba(255, 230, 0, .04);
--timeline-highlight-bg-color: transparent;
--timeline-highlight-hover-bg-color: rgba(255, 230, 0, .08);
--timeline-jump-bg-color: rgba(25, 240, 255, .14);
--timeline-jump-hover-bg-color: rgba(25, 240, 255, .2);
--timeline-soft-failed-bg-color: rgb(255 43 214 / .1);
--timeline-policy-server-spammy-bg-color: rgb(255 59 92 / .1);
--room-list-background: var(--sn-rail);
--room-list-background-overlay: transparent;
--room-list-search-background-overlay: transparent;
--space-list-background-overlay: transparent;
--room-list-scrollbar-color: var(--sn-cy) transparent;
--room-list-entry-hover-color: rgba(255, 230, 0, .05);
--room-list-entry-selected-color: rgba(255, 230, 0, .07);
--dimmed-overlay-background-color: rgba(2, 2, 2, .86);
--modal-box-shadow-color: rgba(255, 230, 0, .14);
--popout-widget-box-shadow-color: rgba(255, 230, 0, .3);
--emoji-selected-border-color: var(--sn-y);
--image-pack-editor-selected-color: rgba(255, 230, 0, .1);
--poll-vote-bar-highlight-color: var(--sn-y);
--unread-counter-text-color: var(--sn-y);
--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: #5a584c;
--space-unread-counter-notification-bg: var(--sn-y);
--space-unread-counter-highlight-bg: var(--sn-y);
--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);
--lightbox-button-color: #b8b6a6;
}
html {
scrollbar-color: var(--sn-cy) transparent;
scrollbar-width: thin;
}
::selection {
background: var(--sn-cy);
color: #001416;
}
main.matrix-main {
background: var(--sn-rail);
}
div.room-list-wrapper::before {
content: "";
grid-column: 2;
grid-row: 1 / -1;
margin: 8px 8px 8px 0;
pointer-events: none;
background:
linear-gradient(var(--sn-cy), var(--sn-cy)) right 6px top 6px / 22px 3px no-repeat,
linear-gradient(to bottom right, transparent 50%, var(--sn-y) 0 calc(50% + 1px), transparent 0) left top / 16px 16px no-repeat,
linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sn-y) 0 50%, transparent 0) right bottom / 16px 16px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left top / 100% 1px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left bottom / 100% 1px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left top / 1px 100% no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) right top / 1px 100% no-repeat,
linear-gradient(180deg, #060604, #0a0900 70%, #141100);
box-shadow: inset 0 0 22px -10px rgba(255, 230, 0, .55);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
div.room-search-wrapper {
width: auto;
margin: 9px 9px 0 1px;
padding: 0 .25rem 0 .5rem;
}
div.room-search-wrapper > input {
height: 2.125rem;
padding: 0 .75rem;
background: #000;
border: 1px solid rgba(255, 230, 0, .45);
border-radius: 2px;
}
div.room-search-wrapper > input:focus {
border-color: var(--sn-y);
}
div.room-search-wrapper > button {
border-radius: 2px;
}
div.room-list {
margin: 0 9px 9px 1px;
}
div.room-entry {
--room-list-entry-height: 2.625rem;
--room-avatar-size: 2rem;
width: auto;
margin: .125rem .375rem;
}
div.room-entry.active > div.room-name {
color: var(--sn-y);
}
div.room-entry.active > img.room-avatar {
box-shadow: 0 0 0 1.5px #000, 0 0 0 3px var(--sn-cy);
}
div.room-entry.active::before,
div.room-entry.active::after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border: 1.5px solid var(--sn-cy);
pointer-events: none;
}
div.room-entry.active::before {
left: 0;
top: 0;
border-right: 0;
border-bottom: 0;
}
div.room-entry.active::after {
right: 0;
bottom: 0;
border-left: 0;
border-top: 0;
}
div.space-bar > div.space-entry.active {
background: transparent;
box-shadow: 0 0 0 2px var(--sn-rail), 0 0 0 3px var(--sn-y), 0 0 12px rgba(255, 230, 0, .6);
}
div.room-entry-unreads > div.unread-count:not(.space) {
height: auto;
min-width: 0;
padding: 0;
border-radius: 0;
font: 600 .75rem/1.6 var(--monospace-font-stack);
color: #9c9a8c;
}
div.room-entry-unreads > div.unread-count:not(.space)::before {
content: "[";
color: var(--sn-mute);
}
div.room-entry-unreads > div.unread-count:not(.space)::after {
content: "]";
color: var(--sn-mute);
}
div.room-entry-unreads > div.unread-count.notified:not(.space) {
color: var(--sn-y);
}
div.room-entry-unreads > div.unread-count.marked-unread:not(.space) {
color: var(--sn-cy);
}
div.room-entry-unreads > div.unread-count.marked-unread:not(.space):empty::after {
content: "•]";
}
div.room-entry-unreads > div.unread-count.highlighted:not(.space) {
padding: 0 .3rem;
background: var(--sn-y);
color: var(--sn-ink);
clip-path: var(--sn-cham);
}
div.room-entry-unreads > div.unread-count.highlighted:not(.space)::before,
div.room-entry-unreads > div.unread-count.highlighted:not(.space)::after {
content: none;
}
div.room-entry-unreads > div.unread-count.space {
border-radius: 2px;
color: #fff;
box-shadow: 0 0 0 1.5px var(--sn-rail);
}
div.room-entry-unreads > div.unread-count.space.notified,
div.room-entry-unreads > div.unread-count.space.highlighted {
color: var(--sn-ink);
font-weight: 700;
}
div.room-view, div.right-panel {
height: auto;
margin: 8px 8px 8px 0;
background:
linear-gradient(var(--sn-cy), var(--sn-cy)) right 6px top 6px / 22px 3px no-repeat,
linear-gradient(to bottom right, transparent 50%, rgba(255, 230, 0, .8) 0 calc(50% + 1px), transparent 0) left top / 16px 16px no-repeat,
linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 230, 0, .8) 0 50%, transparent 0) right bottom / 16px 16px no-repeat,
linear-gradient(rgba(255, 230, 0, .8), rgba(255, 230, 0, .8)) left top / 100% 1px no-repeat,
linear-gradient(rgba(255, 230, 0, .8), rgba(255, 230, 0, .8)) left bottom / 100% 1px no-repeat,
linear-gradient(rgba(255, 230, 0, .8), rgba(255, 230, 0, .8)) left top / 1px 100% no-repeat,
linear-gradient(rgba(255, 230, 0, .8), rgba(255, 230, 0, .8)) right top / 1px 100% no-repeat,
var(--sn-panel);
box-shadow: inset 0 0 26px -14px rgba(255, 230, 0, .5);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
div.room-header {
padding-left: 1rem;
padding-right: 1.25rem;
background: transparent;
border-bottom: 1px solid rgba(255, 230, 0, .35);
}
div.room-header > div.room-name-and-topic > div.room-name {
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sn-y);
text-shadow: 0 0 8px rgba(255, 230, 0, .55);
}
div.room-view div.timeline-view {
background: var(--sn-grid);
}
div.event-sender-and-time > span.event-sender {
text-shadow: 0 0 7px color-mix(in srgb, currentColor 70%, transparent);
}
blockquote.reply-body {
--reply-border-color: var(--sn-cy);
}
div.timeline-event.highlight {
box-shadow: inset 3px 0 0 var(--sn-y);
background-image:
linear-gradient(90deg, transparent, rgba(255, 230, 0, .38) 40%, rgba(25, 240, 255, .32) 60%, transparent),
linear-gradient(90deg, rgba(255, 230, 0, .13), transparent 65%);
background-size: 45% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: -100% 0, 0 0;
animation: sn-sweep 2.2s cubic-bezier(.4, .1, .2, 1) .15s 1 both;
}
@keyframes sn-sweep {
from { background-position: -100% 0, 0 0; }
to { background-position: 220% 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.5rem 1.5rem 1fr var(--timeline-status-size);
font-family: var(--monospace-font-stack);
font-size: .75rem;
color: #8f8d80;
}
div.timeline-event.small-event::before {
content: "room";
grid-area: tag;
align-self: center;
justify-self: start;
width: 3.875rem;
text-align: center;
font: 500 .6rem/1.75 var(--monospace-font-stack);
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 2px;
color: #6c6a5c;
box-shadow: inset 0 0 0 1px #2c2b24;
}
div.timeline-event.small-event.membership-event::before {
content: "member";
color: #b9ab3a;
}
div.timeline-event.small-event.hidden-event::before {
content: "raw";
}
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:is(:has(.policy-body), :has(.acl-body), :has(.power-level-body)) {
color: var(--text-color);
background-color: rgba(255, 230, 0, .045);
padding-block: .125rem;
}
div.timeline-event.small-event:is(:has(.policy-body), :has(.acl-body), :has(.power-level-body)):hover {
background-color: rgba(255, 230, 0, .08);
}
div.timeline-event.small-event:is(:has(.policy-body), :has(.acl-body), :has(.power-level-body))::before {
box-shadow: none;
font-weight: 700;
color: var(--sn-ink);
background: var(--sn-y);
}
div.timeline-event.small-event:has(.policy-body)::before {
content: "ban list";
}
div.timeline-event.small-event:has(.acl-body)::before {
content: "acl";
color: #001416;
background: var(--sn-cy);
}
div.timeline-event.small-event:has(.power-level-body)::before {
content: "power";
color: #12052a;
background: var(--sn-vi);
}
div.timeline-event.small-event:is(:has(.policy-body), :has(.acl-body), :has(.power-level-body)):not(.swipe-active)::after,
div.timeline-event:is(.soft-failed, .policy-server-spammy):not(.swipe-active)::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--sn-stripe-y);
pointer-events: none;
}
div.timeline-event.soft-failed:not(.swipe-active)::after {
background: var(--sn-stripe-m);
}
div.timeline-event.policy-server-spammy:not(.swipe-active)::after {
background: var(--sn-stripe-r);
}
div.timeline-event.soft-failed.policy-server-spammy:not(.swipe-active)::after {
background: var(--sn-stripe-mr);
}
div.timeline-event.soft-failed.policy-server-spammy {
background-color: transparent;
background-image: linear-gradient(90deg, rgb(255 43 214 / .13), rgb(255 59 92 / .11));
}
div.timeline-event.soft-failed:not(.policy-server-spammy):hover {
background-color: rgb(255 43 214 / .16);
}
div.timeline-event.policy-server-spammy:not(.soft-failed):hover {
background-color: rgb(255 59 92 / .16);
}
div.timeline-event.soft-failed.policy-server-spammy:hover {
background-color: transparent;
background-image: linear-gradient(90deg, rgb(255 43 214 / .19), rgb(255 59 92 / .17));
}
div.timeline-event:is(.soft-failed, .policy-server-spammy) > div.event-content::before {
--sn-cw: calc(1ch + .06em);
content: "soft-fail";
float: right;
margin-left: .5rem;
padding: 0 .375rem;
font: 700 .6rem/1.7 var(--monospace-font-stack);
letter-spacing: .06em;
text-transform: uppercase;
white-space: pre;
color: #0a0306;
background: var(--sn-mg);
clip-path: var(--sn-cham);
}
div.timeline-event.policy-server-spammy > div.event-content::before {
content: "policy";
background: var(--sn-rd);
}
div.timeline-event.soft-failed.policy-server-spammy > div.event-content::before {
content: "soft-fail policy";
background: linear-gradient(90deg, var(--sn-mg) 0 calc(.375rem + 9.5 * var(--sn-cw)), var(--sn-rd) 0);
}
div.event-content pre:not(.json-view) {
box-sizing: border-box;
width: fit-content;
max-width: 100%;
padding: .5rem .75rem;
background: #000;
border: 1px solid rgba(25, 240, 255, .55);
border-radius: 2px;
scrollbar-width: thin;
scrollbar-color: var(--sn-cy) transparent;
}
div.event-content pre:not(.json-view) > code {
background: transparent;
}
pre.chroma {
color: #ddd9c8;
}
pre.chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .ow) {
color: var(--sn-y);
font-weight: 600;
}
pre.chroma :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) {
color: var(--sn-cy);
}
pre.chroma :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
color: var(--sn-vi);
}
pre.chroma :is(.nf, .fm, .nc, .nb, .bp) {
color: #fff;
}
pre.chroma :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) {
color: #6c6a5c;
font-style: italic;
}
div.event-reactions > div.reaction {
background: transparent;
border: 1px solid rgba(255, 230, 0, .22);
border-radius: 2px;
}
div.event-reactions > div.reaction.own-reaction,
div.event-reactions > div.reaction.own-reaction:hover:not(.disabled) {
border: 1px solid transparent;
background:
linear-gradient(#11100a, #11100a) padding-box,
linear-gradient(90deg, var(--sn-y), var(--sn-cy)) border-box;
}
div.event-reactions > div.reaction.own-reaction:hover:not(.disabled) {
background:
linear-gradient(#1c1a0e, #1c1a0e) padding-box,
linear-gradient(90deg, var(--sn-y), var(--sn-cy)) border-box;
}
div.date-separator {
gap: .625rem;
padding-inline: var(--timeline-horizontal-padding);
font: .625rem var(--monospace-font-stack);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sn-cy);
}
div.date-separator::before {
content: "//";
color: var(--sn-y);
}
div.date-separator > hr {
margin: 0;
border: 0;
opacity: 1;
}
div.date-separator > hr:first-of-type {
display: none;
}
div.date-separator > hr:last-of-type {
flex: 1;
height: 5px;
background: repeating-linear-gradient(-45deg, rgba(255, 230, 0, .35) 0 2px, transparent 2px 6px);
}
div.read-receipts > div.avatars {
margin-left: .125rem;
}
div.read-receipts > div.avatars > img {
margin-left: -.125rem;
border: 0;
border-radius: 2px;
box-shadow: 0 0 0 1px var(--sn-panel), 0 0 0 2px rgba(255, 230, 0, .55);
}
div.message-composer {
border: 0;
border-radius: 0;
box-shadow: none;
background:
linear-gradient(var(--sn-cy), var(--sn-cy)) right top / 14px 2px no-repeat,
linear-gradient(var(--sn-cy), var(--sn-cy)) right top / 2px 14px no-repeat,
linear-gradient(var(--sn-cy), var(--sn-cy)) left bottom / 14px 2px no-repeat,
linear-gradient(var(--sn-cy), var(--sn-cy)) left bottom / 2px 14px no-repeat,
linear-gradient(to bottom right, transparent 50%, rgba(255, 230, 0, .3) 0 calc(50% + 1px), transparent 0) left top / 10px 10px no-repeat,
linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 230, 0, .3) 0 50%, transparent 0) right bottom / 10px 10px no-repeat,
linear-gradient(rgba(255, 230, 0, .3), rgba(255, 230, 0, .3)) left top / 100% 1px no-repeat,
linear-gradient(rgba(255, 230, 0, .3), rgba(255, 230, 0, .3)) left bottom / 100% 1px no-repeat,
linear-gradient(rgba(255, 230, 0, .3), rgba(255, 230, 0, .3)) left top / 1px 100% no-repeat,
linear-gradient(rgba(255, 230, 0, .3), rgba(255, 230, 0, .3)) right top / 1px 100% no-repeat,
var(--composer-background-color);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
div.message-composer textarea {
caret-color: var(--sn-y);
}
div.message-composer > blockquote.reply-body.composer {
display: grid;
grid-template-columns: auto 1fr;
column-gap: .5rem;
border-left: 0;
}
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(--sn-cy);
}
div.sync-status {
align-items: center;
gap: .6rem;
padding: .35rem .75rem .35rem .35rem;
border: 0;
border-radius: 0;
font: .75rem var(--monospace-font-stack);
text-transform: lowercase;
background:
linear-gradient(to bottom right, transparent 50%, var(--sn-y) 0 calc(50% + 1px), transparent 0) left top / 5px 5px no-repeat,
linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sn-y) 0 50%, transparent 0) right bottom / 5px 5px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left top / 100% 1px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left bottom / 100% 1px no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) left top / 1px 100% no-repeat,
linear-gradient(var(--sn-y), var(--sn-y)) right top / 1px 100% no-repeat,
#060604;
clip-path: var(--sn-cham);
}
div.sync-status::before {
content: "sync";
padding: 0 .45rem;
font: 700 .6rem/1.75 var(--monospace-font-stack);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sn-ink);
background: var(--sn-y);
clip-path: var(--sn-cham);
}
div.sync-status.errored {
border: 0;
font-weight: normal;
color: var(--error-text-color);
background:
linear-gradient(to bottom right, transparent 50%, var(--sn-rd) 0 calc(50% + 1px), transparent 0) left top / 5px 5px no-repeat,
linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sn-rd) 0 50%, transparent 0) right bottom / 5px 5px no-repeat,
linear-gradient(var(--sn-rd), var(--sn-rd)) left top / 100% 1px no-repeat,
linear-gradient(var(--sn-rd), var(--sn-rd)) left bottom / 100% 1px no-repeat,
linear-gradient(var(--sn-rd), var(--sn-rd)) left top / 1px 100% no-repeat,
linear-gradient(var(--sn-rd), var(--sn-rd)) right top / 1px 100% no-repeat,
#060604;
}
div.sync-status.errored::before {
color: #1a0508;
background: var(--sn-rd);
}
@media (prefers-reduced-motion: reduce) {
div.timeline-event.highlight { animation: none; }
}