Resolves Issue eclipsesource#51

Dark theme is now supported by the diagram editor and the InputField for renaming Attributes/Classes is now better readable in both Themes. Light Theme, does not have a white background anymore, due to the way the theme colors in theia work. A follow-up issue will be submitted. Inheritance edges now have the same color as other edges. Signed-off-by: simonGraband <[email protected]>
jcebel · Nov 28, 2019 · 1e68385 · 1e68385
1 parent d5ca600
commit 1e68385
Showing 1 changed file with 26 additions and 11 deletions.
diff --git a/client/sprotty-ecore/css/diagram.css b/client/sprotty-ecore/css/diagram.css
@@ -1,10 +1,21 @@
+:root {
+    --sprotty-background: var(--theia-layout-color3);
+    --sprotty-edge: var(--theia-ui-font-color1);
+    --sprotty-border: var(--theia-border-color2);
+}
+
 svg {
     margin-top: 15px;
     width: 100%;
     height: 500px;
     border-style: solid;
     border-width: 1px;
-    border-color: #bbb;
+    border-color: var(--sprotty-border);
+}
+
+.label-edit input {
+    background: rgba(255, 255, 255, 0.5);
+    color: black;
 }
 
 .sprotty {
@@ -14,7 +25,7 @@ svg {
 .sprotty-graph {
     font-size: 15pt;
     height: 100%;
-    background: #fff
+    background: var(--sprotty-background);
 }
 
 .ecore-node {
@@ -94,10 +105,18 @@ svg {
 
 .ecore-edge {
     fill: none;
-    stroke: black;
+    stroke: var(--sprotty-edge);
     stroke-width: 2px;
 }
 
+.ecore-edge>.sprotty-label {
+    stroke-width: 0;
+    width: inherit;
+    fill: var(--sprotty-edge);
+    font-weight: inherit;
+    font-size: 100%;
+}
+
 .feedback-edge {
     stroke-width: 2px;
     stroke: black;
@@ -146,23 +165,19 @@ svg {
 }
 
 .ecore-edge>.triangle.inheritance {
-    fill: white;
-}
-
-.ecore-edge.inheritance {
-    stroke: #888888;
+    fill: var(--sprotty-background);
 }
 
 .ecore-edge.aggregation .ecore-edge.composition {
-    stroke: black;
+    stroke: var(--sprotty-edge);
 }
 
 .ecore-edge>.diamond.aggregation {
-    fill: white;
+    fill: var(--sprotty-background);
 }
 
 .ecore-edge>.diamond.composition {
-    fill: black;
+    fill: var(--sprotty-edge);
 }
 
 .ecore-edge.selected {