improve handling of themes

frontend/public/global.css

@@ -29,6 +29,7 @@
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
 	--foreground-color-4: rgb(123, 124, 125);
+	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
 	--blue-1: hsl(200, 78%, 50%);
@@ -211,12 +212,12 @@ body {
 /* button */
 
 .button {
+	color: var(--foreground-color-1);
 	background-color: var(--background-color-2);
 	text-align: center;
 	border: none;
 	padding: var(--space-sm);
 	border-radius: var(--radius-md);
-	color: currentColor;
 	font: inherit;
 	max-height: 3em;
 }
@@ -226,6 +227,7 @@ body {
 }
 
 .button-accent {
+	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
@@ -238,6 +240,7 @@ body {
 }
 
 .button-red {
+	color: var(--colored-element-text-color);
 	background-color: var(--red-2);
 }
 
@@ -368,9 +371,14 @@ body {
 }
 
 .sidebar-button.selected {
+	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
+.sidebar-button.selected .icon-button {
+	color: var(--colored-element-text-color);
+}
+
 /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 *,

frontend/src/components/Main.svelte

@@ -21,14 +21,8 @@
                 --background-color-1: rgb(253, 254, 255);
                 --background-color-2: rgb(218, 219, 220);
                 --background-color-3: rgb(173, 174, 175);
-            }
 
-            .button {
-                color: var(--foreground-color-1);
-            }
-
-            .button-red, .button-accent {
-                color: var(--background-color-1);
+                --colored-element-text-color: var(--background-color-0);
             }
         </style>
     {/if}

frontend/src/components/Message.svelte

@@ -9,7 +9,7 @@
     .message {
         display: flex;
         align-items: flex-start;
-        overflow-x: none;
+        overflow-x: hidden;
         word-break: break-all;
         padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
     }

frontend/src/components/MessageInput.svelte

@@ -138,7 +138,8 @@
         margin-left: var(--space-sm);
         border-radius: 50%;
         background-color: var(--purple-1);
-        aspect-ratio: 1 / 1;
+        padding: 12px;
+        aspect-ratio: 1;
         flex-shrink: 0;
     }