Dracula Flow

draculaflow v3 by @qkall:beeper.com - Raw CSS without autoupdate Latest version Version history

Commit info

Committed 2026-09-23 at 00:34:28 UTC by @qkall:beeper.com

fixed unreadable texts

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 v3
 * fixed unreadable texts in rooms view
 */

:root {
  /* BACKGROUNDS: Rich, Saturated Aubergine */
  --deep-plum: #4A1B4A;      
  --sidebar-light: #662666;  
  --space-list-light: #331233; 
  
  /* ACCENTS: Neon Magenta / Orchid */
  --bright-purple: #FF00FF; 
  --neon-pink: #FF00FF;    
  --drac-fg: #FDFDFD;      /* Stark, clean text */

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

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

  /* Composer */
  --composer-background-color: #662666; 
  --input-background-color: #662666;

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

  /* Timeline & Highlights */
  --timeline-highlight-bg-color: rgba(255, 0, 255, 0.2);
  --timeline-highlight-hover-bg-color: rgba(255, 0, 255, 0.3);
  --timeline-jump-bg-color: rgba(255, 0, 255, 0.4);
  --timeline-hover-bg-color: rgba(255, 0, 255, 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: #853385;
  --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);
}

/* --- AGGRESSIVE COMPOSER CLEANUP --- */
/* This targets the wrapper containers for the composer buttons */
.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: #662666 !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, 255, 0.2) !important;
  border-left: 3px solid var(--bright-purple) !important;
}

/* --- CHAT ROOM USERNAME OVERRIDES --- */
.mx_Username_color1 { color: #FF80FF !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: #FF00FF !important; } 
.mx_Username_color7 { color: #FFC080 !important; } 
.mx_Username_color8 { color: #FF80C0 !important; } 

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

Comments

No comments yet.