Estoy usando sass para compilar un conjunto de temas y js/jquery para cambiar esos temas de la etiqueta html seleccionada. My sass mixin está escrito para compilar cada tema en el siguiente formato:

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

Actualmente tengo varios temas diferentes (alrededor de 8). Estoy codificando cada tema en mi etiqueta de opción de selección html, de la siguiente manera:

Ejemplo de selección:

 <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>

He investigado el uso de jquery para seleccionar todos los elementos raíz en el conjunto de reglas css, luego recorriéndolos para obtener el valor de 'tema de datos', pero no puedo obtenerlo. Estoy usando el selector $(':root[data-theme^="theme"]') , pero parece que no devuelve nada.

Necesito una forma, si es posible, de crear dinámicamente la lista de temas, para evitar la codificación de los temas. Esto permitirá ahorrar tiempo y facilitar el uso al agregar nuevos temas en mi archivo sass.