I am using sass to compile a set of themes and js/jquery to switch those themes from the select html tag. My sass mixin is written to compile each theme into the following format:

:root[data-theme=theme-light] {
    // css variables here
}
:root[data-theme=theme-dark] {
    // css variables here
}

Currently I have a number of different themes (about 8). I am hard coding each theme into my html select-option tag, as follows:

Example of select:

            <select id="theme-switcher" onChange="setTheme(this)">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
                <option value="clean1">Clean 1</option>
                <option value="clean2">Elegant</option>
                <option value="simple">Simple</option>
                <option value="jldn">JLDN</option>
                <option value="busy">Busy</option>
                <option value="system">System</option>
            </select>

I have looked into using jquery to select all root elements in the css ruleset, then looping through them to get the value of 'data-theme', but I can't quite get it. I am using the $(':root[data-theme^="theme"]') selector, but this seems to not return anything.

I need a way, if possible, to dynamically create the theme list, to prevent hard coding the themes. This will allow time saving and ease of use when adding new themes in my sass file.