How do you style/theme using native CSS?

[kaphula]

I can't get the homepage styling examples to work at all. I don't have SCSS.

<main class="container">
           <button > button </button>
    <Splitpanes>
        <Pane minSize={10}>
    <button > button </button>
        </Pane>
        <Pane minSize={10} >
            <button > button </button>
        </Pane>
    </Splitpanes>
</main>

<style >

    .splitpanes .default-theme .splitpanes__splitter {

        background-color: #c44c4c;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
    }
    .splitpanes__splitter {
        background-color: #c44c4c;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
    }
</style >

Trying to change some basic colors but nothing happens. Any tips?

[Tal500]

I have found some mistakes, all of them are correctly documented on the second example of https://orefalo.github.io/svelte-splitpanes/examples/styling/splitters:

1. You should use the :global CSS modifier, or if you don't have any local one, you may also write <style global> like mentioned in the examples.
2. Don't use the default theme that is marked by "default-theme", rather use your own name, e.g. "my-theme".
3. Don't have leave any space between ".splitpanes" and ".my-theme", the theme is a class of the internal "Splitpanes" div element.

The following code is working for me well in Svelte REPL:

<script>
    import { Pane, Splitpanes } from 'svelte-splitpanes';
</script>

<main class="container">
    <button> button </button>
    <Splitpanes theme="my-theme">
        <Pane minSize={10}>
    <button> button </button>
        </Pane>
        <Pane minSize={10} >
            <button> button </button>
        </Pane>
    </Splitpanes>
</main>

<style>
    :global(.splitpanes.my-theme .splitpanes__splitter) {
        background-color: #c44c4c;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
    }
</style>

Closing the issue since I think it was a misunderstanding or bad documentation, you may ask here to reopen or to open a new issue if needed.