CSS: fix unread msgs indicator in Dracula theme

Also try to create some initial structure with the CSS properties to
make theming easier

src/plugins/rosterview/styles/roster.scss

@@ -105,8 +105,8 @@
                 }
 
                 .msgs-indicator {
-                    color: white;
-                    background-color: var(--chat-head-color);
+                    color: var(--text-color-invert);
+                    background-color: var(--chat-color);
                     opacity: 1;
                     border-radius: 10%;
                     padding: 0.2em 0.4em;

src/shared/styles/themes/classic.scss

@@ -1,14 +1,25 @@
 .conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
-
     // Theme-defined variables:
     --green: #3AA569;
     --redder-orange: #E77051;
     --orange: #E7A151;
     --light-blue: #578EA9;
     --lighter-blue: #85B47B;
-    --background: white;
+    --dark-red: #D24E2B;
+    --comment: #A8ABA1;
 
-    --subdued-color: #A8ABA1;
+    // Base variables
+    --foreground: #666;
+    --background: white;
+    --subdued-color: var(--comment);
+    --muc-color: var(--redder-orange);
+    --chat-color: var(--green);
+    --disabled-color: gray;
+    --error-color: var(--dark-red);
+
+    // ---
+
+    --info-color: #1E9652; // $dark-green
 
     --chat-status-online: var(--green);
     --chat-status-busy: var(--redder-orange);
@@ -37,6 +48,7 @@
     --controlbox-text-color: #666;
     --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
     --message-author-color: var(--text-color);
+    --text-color-invert: var(--background);
 
     --message-text-color: #555;
     --message-receipt-color: var(--green);
@@ -79,8 +91,6 @@
 
     --light-background-color: #FCFDFD;
 
-    --error-color: #D24E2B; // dark-red
-    --info-color: #1E9652; // $dark-green
 
     --groupchats-header-color: var(--chatroom-head-bg-color);
     --groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);

src/shared/styles/themes/dracula.scss

@@ -1,9 +1,7 @@
 .conversejs.theme-dracula {
     // Theme-defined variables:
     // https://draculatheme.com
-    --background: #282a36;
     --current-line: #44475a;
-    --foreground: #f8f8f2;
     --comment: #6272a4;
     --cyan: #8be9fd;
     --green: #50fa7b;
@@ -13,9 +11,16 @@
     --red: #ff5555;
     --yellow: #f1fa8c;
 
+    // Base variables
+    --background: #282a36;
+    --foreground: #f8f8f2;
+    --subdued-color: var(--comment);
     --muc-color: var(--orange);
     --chat-color: var(--green);
     --disabled-color: var(--comment);
+    --error-color: var(--red);
+
+    // ---
 
     --highlight-color: var(--foreground);
     --highlight-color-darker: var(--comment);
@@ -92,6 +97,7 @@
     --message-text-color: var(--foreground);
     --text-color: var(--foreground);
     --text-color-lighten-15-percent: var(--yellow);
+    --text-color-invert: var(--background);
 
     --message-author-color: var(--purple);