Theme catkkunen v5 by [@vrkknn:vrkknn.net]
Catkkunen for gomuks | A theme based on Catppuccin Mocha/Latte with many added tweaks for both desktop and mobile screens.
Last updated at 2025-03-23 13:46:53.978003 +0000 +0000
To use the theme, paste this into your custom CSS:
@import url("https://css.gomuks.app/theme/catkkunen.css");
/*
*
* Catkkunen for gomuks
* v2.0.6
*
* Theme by @vrkknn:vrkknn.net
* https://github.com/Virkkunen/themes/
*
* Based on Catppuccin
* https://github.com/catppuccin/catppuccin
*
*/
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@media (prefers-color-scheme: dark) {
:root {
/* mocha */
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e1ae;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
--opacity-overlay0: rgba(180, 190, 254, 0.15); /* ctp-lavender */
--opacity-overlay1: rgba(180, 190, 254, 0.25); /* ctp-lavender */
--jump-to-reply-overlay0: rgba(203, 166, 247, 0.25); /* ctp-mauve */
--box-shadow0: rgba(0, 0, 0, 0.65);
--box-shadow1: rgba(0, 0, 0, 0.2);
}
}
@media (prefers-color-scheme: light) {
:root {
/* latte */
--ctp-rosewater: #dc8a78;
--ctp-flamingo: #dd7878;
--ctp-pink: #ea76cb;
--ctp-mauve: #8839ef;
--ctp-red: #d20f39;
--ctp-maroon: #e64553;
--ctp-peach: #fe640b;
--ctp-yellow: #df8e1d;
--ctp-green: #40a02b;
--ctp-teal: #179299;
--ctp-sky: #04a5e5;
--ctp-sapphire: #209fb5;
--ctp-blue: #1e66f5;
--ctp-lavender: #7287fd;
--ctp-text: #4c4f69;
--ctp-subtext1: #5c5f77;
--ctp-subtext0: #6c6f85;
--ctp-overlay2: #7c7f93;
--ctp-overlay1: #8c8fa1;
--ctp-overlay0: #9ca0b0;
--ctp-surface2: #acb0be;
--ctp-surface1: #bcc0cc;
--ctp-surface0: #ccd0da;
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--ctp-crust: #dce0e8;
--opacity-overlay0: rgba(114, 135, 253, 0.15); /* ctp-lavender */
--opacity-overlay1: rgba(114, 135, 253, 0.25); /* ctp-lavender */
--jump-to-reply-overlay0: rgba(136, 57, 239, 0.25); /* ctp-mauve */
--box-shadow0: rgba(17, 17, 27, 0.45);
--box-shadow1: rgba(17, 17, 27, 0.2);
}
}
:root {
/* fonts */
--font-stack: 'Fira Sans', sans-serif;
/* room-list */
--room-list-background-overlay: transparent;
--room-list-background: var(--ctp-base);
--room-list-entry-hover-color: var(--opacity-overlay1);
--room-list-entry-selected-color: var(--opacity-overlay0);
--room-list-padding: 0.5rem; /* vertical padding */
--room-list-scrollbar-color: var(--ctp-overlay2);
--room-list-search-background-overlay: var(--ctp-surface0);
/* unread */
--unread-counter-highlight-bg: var(--ctp-mauve);
--unread-counter-message-bg: var(--ctp-subtext0);
--unread-counter-notification-bg: var(--ctp-teal);
--unread-counter-text-color: var(--ctp-crust);
--space-unread-counter-highlight-bg: var(--ctp-red);
--space-unread-counter-message-bg: var(--ctp-subtext0);
/* sender */
--sender-color-0: var(--ctp-blue);
--sender-color-1: var(--ctp-sapphire);
--sender-color-2: var(--ctp-maroon);
--sender-color-3: var(--ctp-peach);
--sender-color-4: var(--ctp-yellow);
--sender-color-5: var(--ctp-green);
--sender-color-6: var(--ctp-teal);
--sender-color-7: var(--ctp-red);
--sender-color-8: var(--ctp-mauve);
--sender-color-9: var(--ctp-blue);
/* timeline */
--timeline-avatar-gap: 0.5rem;
--timeline-avatar-size: 2.5rem;
--timeline-avatar-total-size: calc(
var(--timeline-avatar-size) + var(--timeline-avatar-gap)
);
--timeline-highlight-bg-color: var(--opacity-overlay0);
--timeline-highlight-hover-bg-color: var(--opacity-overlay1);
--timeline-hover-bg-color: var(--opacity-overlay0);
--timeline-jump-bg-color: var(--jump-to-reply-overlay0);
--timeline-message-gap-same-sender: calc(var(--timeline-message-gap) / 2.5);
--timeline-message-gap-small-event: 0.125rem;
--timeline-message-gap: 1.125rem;
--timeline-sender-name-content-gap: 0.15rem;
--timeline-sender-name-timestamp-gap: 0.3rem;
--timeline-jump-hover-bg-color: var(--ctp-green);
--timeline-horizontal-padding: 0.625rem; /* mobile padding */
/* */
--background-color: var(--ctp-crust);
--blockquote-border-color: var(--ctp-mauve);
--border-color: var(--ctp-mantle);
--button-hover-color: var(--ctp-surface2);
--code-background-color: var(--ctp-base);
--composer-background-color: var(--ctp-mantle);
--emoji-selected-border-color: var(--ctp-teal);
--error-color: var(--ctp-red);
--highlight-pill-background-color: var(--ctp-red);
--highlight-pill-text-color: var(--ctp-crust);
--inverted-text-color: var(--ctp-crust);
--light-hover-color: var(--opacity-overlay1);
--lightbox-button-color: var(--surface2);
--link-text-color: var(--ctp-blue);
--login-background-color: var(--ctp-crust);
--media-placeholder-default-background: var(--ctp-surface0);
--modal-box-shadow-color: var(--ctp-crust);
--pill-background-color: var(--ctp-mauve);
--primary-color-dark: var(--ctp-green);
--primary-color: var(--ctp-green);
--secondary-text-color: var(--ctp-overlay1);
--semisecondary-text-color: var(--ctp-subtext0);
--sent-error-color: var(--ctp-maroon);
--sent-ok-color: var(--ctp-green);
--space-list-background-overlay: var(--ctp-mantle);
--text-color: var(--ctp-text) !important;
--url-preview-background-color: var(--ctp-base);
--visited-link-text-color: var(--ctp-mauve);
}
/* room */
div.room-list-wrapper {
@media (width >= 1024px) {
box-shadow: 0.125rem 0 0.625rem var(--box-shadow0);
grid-template: 'spacebar search' 5rem 'spacebar roomlist' 1fr / 3.1rem 1fr;
}
@media (width < 1024px) {
grid-template: 'spacebar search' 4.2rem 'spacebar roomlist' 1fr / 3.1rem 1fr;
padding: none;
}
}
div.room-list {
padding: 0 0.625rem;
z-index: 10;
@media (width < 1024px) {
background-color: var(--ctp-crust);
border-radius: 0.5rem 0 0 0;
}
}
div.room-search-wrapper {
border-radius: 0.5rem;
margin-top: 0.625rem;
justify-self: center;
width: 95%;
@media (width < 1024px) {
height: 2.8rem;
z-index: 10;
}
}
div.room-header {
background-color: var(--ctp-base);
border: none;
box-shadow: 0 0 0.625rem var(--box-shadow0);
z-index: 10;
}
div.room-view {
grid-template: 'header' 4.8rem 'messageview' 1fr 'autocomplete' 0 'input' auto 'typing' auto / 1fr;
@media (width < 1024px) {
grid-template: 'header' 4.2rem 'messageview' 1fr 'autocomplete' 0 'input' auto 'typing' auto / 1fr;
}
}
div.room-entry {
&.active,
&:hover,
&:focus {
border-radius: 0.5rem;
}
& > div.room-entry-right > div.message-preview {
color: var(--ctp-subtext1);
}
}
/* timeline */
div.timeline-view {
overflow-x: hidden;
}
div.timeline-event {
&.membership-event {
color: var(--ctp-overlay1);
}
div.event-content {
& > div.power-level-body {
color: var(--ctp-overlay1);
}
}
}
/* input */
.input-area {
& > button:nth-child(n + 2):nth-child(-n + 7):not(:disabled) {
&:nth-child(2) {
color: var(--ctp-yellow);
}
&:nth-child(3) {
color: var(--ctp-teal);
}
&:nth-child(4) {
color: var(--ctp-maroon);
}
&:nth-child(5) {
color: var(--ctp-sky);
}
&:nth-child(6) {
color: var(--ctp-blue);
}
&:nth-child(7) {
color: var(--ctp-green);
}
}
}
div.message-composer {
border-top: none;
padding: 0.625rem;
box-shadow: 0 0 0.625rem 0.125rem var(--box-shadow1);
}
/* */
div.event-context-menu,
div.event-hover-menu,
div.context-menu {
background-color: var(--ctp-surface0);
border: none;
}
div.context-menu {
& > button {
&:last-of-type {
color: var(--ctp-red);
}
}
}
div.space-bar {
padding-top: 0.625rem;
z-index: 10;
@media (width < 1024px) {
background-color: var(--ctp-base);
}
}
a.hicli-matrix-uri.hicli-matrix-uri-user {
/* the mention pill */
padding: 0 0.5rem !important;
}
a.hicli-matrix-uri-user:not(.hicli-matrix-uri-plaintext),
& a.hicli-matrix-uri-room-alias:not(.hicli-matrix-uri-plaintext) {
color: var(--ctp-crust) !important;
}
div.emoji-picker,
div.sticker-picker,
div.gif-picker,
div.autocompletions {
background-color: var(--ctp-base);
border: none;
}
div.emoji-picker,
div.sticker-picker {
& div.emoji-category-bar {
border: none;
}
}
div.emoji-picker,
div.sticker-picker,
div.gif-picker {
& div.emoji-search,
& div.gif-search {
background-color: var(--room-list-search-background-overlay);
border: none;
border-radius: 0.5rem;
& > input {
border-radius: 0.5rem;
}
}
}
div.reaction {
background-color: var(--opacity-overlay0) !important;
}
div.right-panel {
border-left: none;
box-shadow: -0.125rem 0 0.625rem var(--box-shadow0);
& > div.right-panel-header {
background-color: var(--ctp-base);
border: none;
height: 4.8rem;
@media (width < 1024px) {
height: 4.2rem;
}
}
& > div.right-panel-content {
background-color: var(--ctp-mantle);
padding: 0.42rem 0.5rem;
&.members {
& > input.member-filter {
background-color: var(--ctp-surface0);
border-radius: 0.5rem;
margin-bottom: 0.5rem;
padding: 1.125rem;
}
& > div.member-list > div.member {
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
}
}
}
}
div.media-container {
border-radius: 0.5rem;
}
blockquote.reply-body {
border-left: 3px solid var(--reply-border-color);
border-radius: 0.5rem;
}
blockquote.reply-body:not(.small) {
background: var(--box-shadow1);
}
/* Better Tables CSS based on
* better-tables v2 by @nex:nexy7574.co.uk
* https://css.gomuks.app/theme/better-tables
*/
.html-body {
table {
border-collapse: collapse;
display: table;
border-spacing: 0;
width: 100%;
th,
td {
border: 1px solid var(--border-color);
padding: 0.5rem;
}
th {
border-width: 2px;
}
tr {
background-color: var(--timeline-hover-bg-color);
&:nth-child(2n) {
background-color: var(--background-color);
}
}
}
}
/*
* Bubbles CSS based on
* bubblemuks v1 by @em:f.dog
* alexiatweaks-bubblemuks v1 by @alexia:thomcat.rocks
* https://css.gomuks.app/theme/bubblemuks
* https://css.gomuks.app/theme/alexiatweaks-bubblemuks
*/
/* Applies only to mobile screen sizes */
@media (width < 1024px) {
:root {
--timeline-message-gap-same-sender: calc(var(--timeline-message-gap) / 5);
--room-list-padding: 0.625rem;
}
.timeline-event:not(.small-event) {
.event-content {
width: auto;
max-width: max-content;
padding: 0.625rem;
background: var(--ctp-base);
border-radius: 0.625rem;
.message-text {
margin-inline: 0.25rem;
}
}
&.own-event {
direction: rtl;
> * {
direction: ltr;
}
.event-sender-and-time {
flex-direction: row-reverse;
}
.event-content {
background-color: var(--ctp-red);
color: var(--ctp-crust);
@media (prefers-color-scheme: dark) {
a {
text-decoration: underline;
color: var(--ctp-surface0);
}
}
blockquote {
& > div.message-text {
color: var(--ctp-surface0);
}
}
}
}
&:has(.media-container) {
.media-container {
margin: auto;
}
.event-content .message-text {
margin-top: 0.5rem;
}
}
}
div.html-body {
& code.hicli-inline-code {
color: var(--ctp-text);
}
}
.event-content {
width: 92% !important;
}
.timeline-list {
max-width: 850px;
margin: auto;
}
/* for some reason if I nest these, the first bubble is incorrect */
.timeline-event.same-sender.timeline-event:not(.own-event):not(.small-event)
.event-content {
border-top-left-radius: 0;
}
.timeline-event.timeline-event:not(.own-event):not(.small-event):has(+ .same-sender)
.event-content {
border-bottom-left-radius: 0;
}
.timeline-event.same-sender.timeline-event.own-event:not(.small-event)
.event-content {
border-top-right-radius: 0;
}
.timeline-event.timeline-event.own-event:not(.small-event):has(+ .same-sender)
.event-content {
border-bottom-right-radius: 0;
}
div.timeline-event {
& > div.event-content {
& > div.event-edited {
margin-inline: 0.25rem;
margin-top: 0.125rem;
color: var(--ctp-surface2);
}
}
}
div.message-composer,
div.typing-notifications {
margin: 0 1.125rem;
}
div.space-bar {
& > div.space-entry {
margin-bottom: 0.625rem;
}
}
blockquote.reply-body {
border-radius: 0.625rem;
& > div.reply-sender {
text-shadow: 1px 1px 2px var(--box-shadow1);
}
}
}