hediet / vscode-drawio

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
GNU General Public License v3.0
9.02k stars 406 forks source link

Unexpected color changes in diagram (dark mode) #308

Open oliversalzburg opened 2 years ago

oliversalzburg commented 2 years ago

Yesterday I started work on a diagram on diagrams.net and wanted to continue work in VS Code today. When I opened the diagram, I was confused that some elements seemed to have changed color. Previously black rectangles were suddenly white, which was very confusing.

After reading #4, I assumed this could be connected to dark theme adjustments. When I manually set "hediet.vscode-drawio.theme": "atlas", my diagram elements would also turn back to my expected dark color.

I fully expect this behavior to be a result of user error and not having defined my color correctly initially. But maybe it's unintended behavior.

I hope this piece illustrates what I was experiencing.

<mxfile host="65bd71144e" pages="2">
    <diagram id="ca1SeDJ3oxLq72VwodAQ" name="Page-2">
        <mxGraphModel dx="1548" dy="779" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
            <root>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-0"/>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-1" parent="pfbeJuhWmpejuF4j--AQ-0"/>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-186" value="" style="rounded=1;whiteSpace=wrap;html=1;shadow=0;strokeWidth=5;fillColor=none;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="60" y="559" width="1090" height="560" as="geometry"/>
                </mxCell>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-42" value="" style="rounded=1;arcSize=10;dashed=0;fillColor=none;gradientColor=none;strokeWidth=2;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="85" y="589" width="490" height="500" as="geometry"/>
                </mxCell>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-43" value="ECS Instance" style="dashed=0;html=1;shape=mxgraph.aws3.instance;fillColor=#F58536;gradientColor=none;dashed=0;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="125" y="568" width="95" height="41" as="geometry"/>
                </mxCell>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-52" value="ECS Cluster" style="outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=#ffffff;fillColor=#232F3E;dashed=0;verticalLabelPosition=middle;verticalAlign=bottom;align=center;html=1;whiteSpace=wrap;fontSize=10;fontStyle=1;spacing=3;shape=mxgraph.aws4.productIcon;prIcon=mxgraph.aws4.ecs;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="563" y="500" width="80" height="100" as="geometry"/>
                </mxCell>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-140" value="" style="rounded=1;arcSize=10;dashed=0;fillColor=none;gradientColor=none;strokeWidth=2;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="630" y="589" width="490" height="500" as="geometry"/>
                </mxCell>
                <mxCell id="pfbeJuhWmpejuF4j--AQ-164" value="ECS Instance" style="dashed=0;html=1;shape=mxgraph.aws3.instance;fillColor=#F58536;gradientColor=none;dashed=0;" parent="pfbeJuhWmpejuF4j--AQ-1" vertex="1">
                    <mxGeometry x="670" y="568" width="95" height="41" as="geometry"/>
                </mxCell>
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>
hediet commented 2 years ago

I think the same thing happens when you change the theme on the draw.io website. I could change the default theme of draw.io in VS Code to atlas. Currently it is automatically derived from VS Code's theme.

oliversalzburg commented 2 years ago

I see. Well, in that case it's probably not worth tracking here. Maybe I can find the right place upstream 😄 Feel free to close this.