<script>
	import {onMount} from 'svelte';
	export let themes;

	let theme;
	let themeSelect;
	
	let html = document.querySelector('html');
	let baseTheme = 'default';

	function toggleTheme() {
		html.classList.toggle(theme);
	} 
	
	function handle_theme() {
		toggleTheme();
		theme = themeSelect.value
		toggleTheme();

		localStorage.setItem('theme', theme);
	}
	
	onMount(() => {
		theme = localStorage.getItem('theme') || baseTheme;
		html.classList.toggle(theme);

		themeSelect = document.querySelector('#theme-select');
		themeSelect.value = theme;
		});
</script>

<select id="theme-select" class="float-right bg-nav border-1 border-secondary text-nav-link w-1/5" on:change={handle_theme} >
	{#each themes as theme}
		<option value={theme} >{theme}</option>
	{/each}
</select>
