Skip to content

Conversation

@matthewmcneely
Copy link

This allows the svg paths that draw the arrows to be styled. Here's an example of responding to global CSS (dark-mode) class changes

    <div class="parent">
    <Tree class="treeClass" tree={structureTree} let:node>
        {#if node.children}
            <div class="tree-node">{node.name}</div>
        {:else}
            <div class="label-node"><AbilityBug ability={getAbilityBySkill(node.id)}></AbilityBug></div>
        {/if}
    </Tree>
    </div>

<style>
    .tree-node {
        line-height: 1.8;
    }
    :global(body.dark-mode) .parent :global(.treeClass) {
        fill: #bfc2c7;
    }
</style>

This allows the svg paths that draw the arrows to be styled. Here's an example of responding to global CSS (dark-mode) class changes

```
    <div class="parent">
    <Tree class="treeClass" tree={structureTree} let:node>
        {#if node.children}
            <div class="tree-node">{node.name}</div>
        {:else}
            <div class="label-node"><AbilityBug ability={getAbilityBySkill(node.id)}></AbilityBug></div>
        {/if}
    </Tree>
    </div>

<style>
    .tree-node {
        line-height: 1.8;
    }
    :global(body.dark-mode) .parent :global(.treeClass) {
        fill: #bfc2c7;
    }
</style>

```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant