playground: better error display

src/components/playground/ErrorDisplay.tsx

@@ -18,25 +18,16 @@ export default function ErrorDisplay({
         <Dialog open={error !== null} onClose={() => setError(null)}>
             <DialogTitle>{lang.title}</DialogTitle>
             <DialogContent>
-                <div
+                <div className="error-terminal-display">
-                    style={{
-                        backgroundColor: "black",
-                        padding: "15px",
-                        borderRadius: "15px",
-                        fontSize: "1.2em",
-                    }}
-                >
                     <code
-                        style={{
-                            whiteSpace: "break-spaces",
-                            fontFamily: "monospace",
-                        }}
                         dangerouslySetInnerHTML={{ __html: error ?? "" }}
                     ></code>
                 </div>
             </DialogContent>
             <DialogActions>
-                <Button onClick={() => setError(null)}>{lang.buttons.close}</Button>
+                <Button onClick={() => setError(null)}>
+                    {lang.buttons.close}
+                </Button>
             </DialogActions>
         </Dialog>
     );

src/styles/playground.scss

@@ -43,3 +43,30 @@
         grid-area: editor;
     }
 }
+
+.error-terminal-display {
+    background-color: black;
+    padding: 15px;
+    border-radius: 15px;
+    font-size: 1.2em;
+    line-height: 0.8em;
+
+    --red: #ff0000;
+    --cyan: #00d6d6;
+    
+    code {
+        white-space: break-spaces;
+        font-family: monospace;
+    }
+}
+
+:root[data-theme="light"] {
+    .error-terminal-display {
+        background-color: lightgray;
+        
+        --red: #ff3f3f;
+        --cyan: #00a6a6;
+        --black: lightgray;
+        --white: #4f4f4f;
+    }
+}