<script lang="ts">
import {instances, loading, navMargin, themecolor} from './global'
import {InstallVanilla, LaunchInstance, GetInstances, InstallForge, InstallQuilt, InstallFabric, CheckUpdate} from '../wailsjs/go/main/InstanceManager.js'
import {GetVersions} from '../wailsjs/go/main/App.js'
import {onMount, createEventDispatcher} from 'svelte'

var r = document.querySelector('main');
const dispatch = createEventDispatcher()

function changetheme(color){
        $themecolor = color;
        dispatch('change-theme');
    }

function changethemeback(){
        dispatch('change-theme-back');
    }


</script>
<main>
    <div class="container">
        <button id="green" class="theme-button" on:click={() => changetheme('green')}>Green</button>
        <button id="purple" class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
        <button id="pink" class="theme-button" on:click={() => changetheme('#ba2abf')}>Pink</button>

    </div>

</main>
<style>
* {
   box-sizing: border-box;
    font-family: sans-serif;
    --text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-primary: #23232e;
		--bg-secondary: #141418;
        
}
.container{
    display: flex;
    justify-content: center;
    margin: 3rem;
}
.theme-button{
    background-color: var(--accent-color);
    margin: 1rem;
    color: var(--text-primary);
    font-size: large;
    border-radius: 4px;
    border-style: solid;
    width: 4rem;
    justify-content: center;
    height: 4rem;
    transition: 100ms;
}
.theme-button:hover{
    color: var(--text-secondary);
}
.theme-button:active{
    opacity: 0.6;
}
#green{
    background-color: green;
    border-color: green;
}
#purple{
    background-color: purple;
    border-color: purple;
}
#pink{
    background-color: #ba2abf;
    border-color: #ba2abf;
}
</style>