Dracula Flow

Commit info

Changed things... made overall lighter to match 'orchid theme' on irccloud and friendica

Description

bright and purple, like my love some ai usage

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 v2
 * updated over all matching... used AI for some parts... color selection got frustrating
 */

: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;
}