Dracula Flow

draculaflow v5 by @qkall:beeper.com - Raw CSS (or without autoupdate) Version history Edit theme

Last updated 2026-10-17 at 00:57:59 UTC

1 like

Description

bright and purple, like my love some ai usage. well less so lately as i'm learning and not trusting

Previews

Code

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

@import url("https://css.gomuks.app/theme/draculaflow.css");

Full CSS

/*
- Dracula Flow v4 (Friendica Match)
- Exact color scheme matched to Friendica theme
 */

:root {
  /* BACKGROUNDS: Matched to Friendica UI */
  --deep-plum: #330833;         /* Main chat body background */
  --sidebar-light: #4A1248;     /* Room list / card background */
  --space-list-light: #240024;  /* Top bar / icon nav panel */
  
  /* ACCENTS: Friendica Hot Pink / Magenta */
  --bright-purple: #FF00A0; 
  --neon-pink: #FF00A0;    
  --drac-fg: #FDFDFD;         /* Stark, clean white text */

  /* Structural Overrides */
  --background-color: var(--deep-plum);
  --border-color: #61185e;
  --text-color: var(--drac-fg) !important;

  /* Space List / Navigation Bar */
  --space-list-background: var(--space-list-light);
  --space-list-background-overlay: var(--space-list-light);

  /* Composer */
  --composer-background-color: var(--deep-plum); 
  --input-background-color: #4A1248;

  /* Room List */
  --room-list-background: var(--sidebar-light);
  --room-list-background-overlay: var(--sidebar-light);
  --room-list-entry-hover-color: rgba(255, 0, 160, 0.2);
  --room-list-entry-selected-color: rgba(255, 0, 160, 0.4); 
  --room-list-scrollbar-color: var(--bright-purple);

  /* Timeline & Highlights */
  --timeline-highlight-bg-color: rgba(255, 0, 160, 0.2);
  --timeline-highlight-hover-bg-color: rgba(255, 0, 160, 0.3);
  --timeline-jump-bg-color: rgba(255, 0, 160, 0.4);
  --timeline-hover-bg-color: rgba(255, 0, 160, 0.1);

  /* Unread Badges */
  --unread-counter-highlight-bg: var(--neon-pink);
  --unread-counter-message-bg: var(--bright-purple);
  --unread-counter-notification-bg: var(--neon-pink);
  --unread-counter-text-color: #FFFFFF;

  /* Compatibility */
  --ctp-base: var(--deep-plum);
  --ctp-mantle: var(--sidebar-light);
  --ctp-crust: var(--space-list-light);
  --ctp-surface0: #61185e;
  --ctp-mauve: var(--bright-purple);
  --ctp-pink: var(--neon-pink);

  /* Accents */
  --link-text-color: var(--bright-purple);
  --primary-color: var(--bright-purple);
  --pill-background-color: var(--bright-purple);
}

/* --- MAIN CONTAINER BACKGROUND OVERRIDES --- */
html, body, #matrixchat, .mx_MatrixChat, 
.mx_RoomView, .mx_RoomView_body, .mx_MainSplit, 
.mx_RoomHeader, .mx_Composer {
  background-color: var(--deep-plum) !important;
  background-image: none !important;
}

/* Left Sidebar Panel / Room List */
.mx_LeftPanel, .mx_RoomList {
  background-color: var(--sidebar-light) !important;
}

/* Icon / Space Bar (Darkest Top-bar tone) */
.mx_SpacePanel, nav, aside {
  background-color: var(--space-list-light) !important;
}

/* --- AGGRESSIVE COMPOSER CLEANUP --- */
.mx_SendMessageComposer_buttons,
.mx_Composer_buttons,
.mx_SendMessageComposer_actions,
.mx_SendMessageComposer_input_wrapper + div {
    display: none !important;
}

/* Force standard HTML input elements */
input, textarea, [contenteditable] {
  background-color: #4A1248 !important;
  color: var(--drac-fg) !important;
  border: 1px solid var(--bright-purple) !important;
}

/* Selection highlight */
::selection {
  background-color: var(--bright-purple) !important;
  color: #FFFFFF !important;
}

/* Fix for chat reply/event highlights */
.mx_EventTile_selected, 
.mx_ReplyChain_wrapper,
.mx_EventTile_content .mx_ReplyChain {
  background-color: rgba(255, 0, 160, 0.2) !important;
  border-left: 3px solid var(--bright-purple) !important;
}

/* --- CHAT ROOM USERNAME OVERRIDES (Friendica Pink Headers) --- */
.mx_Username_color1 { color: #FF40C8 !important; } 
.mx_Username_color2 { color: #FFFF80 !important; } 
.mx_Username_color3 { color: #80FFFF !important; } 
.mx_Username_color4 { color: #80C0FF !important; } 
.mx_Username_color5 { color: #80FF80 !important; } 
.mx_Username_color6 { color: #FF00A0 !important; } 
.mx_Username_color7 { color: #FFC080 !important; } 
.mx_Username_color8 { color: #FF80C0 !important; } 

.mx_Username {
  font-weight: 700 !important;
}

/* Make room list message preview text white and legible */
.message-preview {
    color: #ffffff !important;
}

Comments

No comments yet.