<div id=“myTable” style=“display: none;”>

<table>
    <tr>
        <th>themes</th>
    </tr>
    {% for theme in site.data.themes %}
    <tr>
        <td style="text-align: center;" class="{{theme.name}}"onclick="setSpeceficPallet('{{theme.name}}');">{{theme.name}}</td>
    </tr>
    {% endfor%}
</table>

<br>

<table>
    <tr>
        <th>user options</th>
        <th>button</th>
    </tr>
    <tr>
        <td>toggle light/dark mode</td>
        <td style="text-align: center;"><i class="far fa-moon "></i></td>
    </tr>
    <tr>
        <td>choose random theme with</td>
        <td style="text-align: center;"><i class="fas fa-palette "></i> </td>
    </tr>
    <tr>
        <td>save current theme for next visit</td>
        <td style="text-align: center;"><i class="fas fa-user-astronaut "></i> </td>
    </tr>
    <tr>
        <td>open/close settings</td>
        <td style="text-align: center;"><i class="fas fa-cogs "></i></td>
    </tr>
    <tr>
        <td>clear settings</td>
        <td style="text-align: center;"><i class="fas fa-sign-out-alt "></i></td>
    </tr>
</table>

</div>