Theme draculaflow v1 by [@qkall:beeper.com]

dark and purple, like my love

Last updated at 2026-04-18 23:13:37.19202 +0000 +0000

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

/*
 * Gomuks: Dracula Flow
 */

:root {
  /* Exact match for your background */
  --deep-plum: #382a3d;
  
  /* Lighter variations for sidebar and list */
  --sidebar-light: #4a3a50;    
  --space-list-light: #443549; 
  
  --bright-purple: #bd93f9;
  --neon-pink: #ff79c6;
  --drac-fg: #f8f8f2;

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

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

  /* Composer (Chat Entry) */
  --composer-background-color: #4b3652; 
  --input-background-color: #4b3652;

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

  /* Timeline & Reply Highlights */
  --timeline-highlight-bg-color: rgba(189, 147, 249, 0.25);
  --timeline-highlight-hover-bg-color: rgba(189, 147, 249, 0.35);
  --timeline-jump-bg-color: rgba(255, 121, 198, 0.3);
  --timeline-hover-bg-color: rgba(189, 147, 249, 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: #382a3d;

  /* Compatibility Mappings */
  --ctp-base: var(--deep-plum);
  --ctp-mantle: var(--sidebar-light);
  --ctp-crust: var(--space-list-light);
  --ctp-surface0: #5a3a63;
  --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);
}

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

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

/* Specific fix for chat reply/event highlights */
.mx_EventTile_selected, 
.mx_ReplyChain_wrapper,
.mx_EventTile_content .mx_ReplyChain {
  background-color: rgba(189, 147, 249, 0.2) !important;
  border-left: 2px solid var(--bright-purple) !important;
}

/* --- CHAT ROOM USERNAME OVERRIDES ---
 * These colors are specifically chosen for max brightness to solve
 * the "dark green/red" issue against the plum background.
 */

.mx_Username_color1 { color: #f5c2e7 !important; } /* Light Pink */
.mx_Username_color2 { color: #f9e2af !important; } /* Light Yellow */
.mx_Username_color3 { color: #94e2d5 !important; } /* Bright Teal */
.mx_Username_color4 { color: #89dceb !important; } /* Bright Sky */
.mx_Username_color5 { color: #a6e3a1 !important; } /* Bright Green */
.mx_Username_color6 { color: #b4befe !important; } /* Light Lavender */
.mx_Username_color7 { color: #fab387 !important; } /* Peach */
.mx_Username_color8 { color: #cba6f7 !important; } /* Light Mauve */

/* Ensure usernames are bold and legible */
.mx_Username {
  font-weight: 700 !important;
}