Theming works
This commit is contained in:
parent
cf31acdbc0
commit
a412cbf9d6
@ -5,7 +5,7 @@
|
||||
import Modpacks from './Modpacks.svelte'
|
||||
import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
|
||||
import { onMount } from 'svelte'
|
||||
import { loading, currentPage, instances } from './global'
|
||||
import { loading, currentPage, instances, themecolor } from './global'
|
||||
import { slide } from 'svelte/transition'
|
||||
import Navbar from './Navbar.svelte'
|
||||
import Instancepage from './Instancepage.svelte'
|
||||
@ -43,11 +43,11 @@
|
||||
}
|
||||
function setcolor() {
|
||||
console.log("changing theme");
|
||||
r.style.setProperty('--accent-color', 'green');
|
||||
r.style.setProperty('--accent-color', $themecolor);
|
||||
}
|
||||
|
||||
|
||||
window.document.onload = function() {initialColor()};
|
||||
window.document.onload = function() {setcolor()};
|
||||
|
||||
|
||||
</script>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {instances, loading, navMargin} from './global'
|
||||
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'
|
||||
@ -7,7 +7,8 @@ import {onMount, createEventDispatcher} from 'svelte'
|
||||
var r = document.querySelector('main');
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function changetheme(){
|
||||
function changetheme(color){
|
||||
$themecolor = color;
|
||||
dispatch('change-theme');
|
||||
}
|
||||
|
||||
@ -19,8 +20,8 @@ function changethemeback(){
|
||||
</script>
|
||||
<main>
|
||||
<div class="container">
|
||||
<button class="theme-button" on:click={changetheme}>Change Theme</button>
|
||||
<button class="theme-button" on:click={changethemeback}>Change Theme Again</button>
|
||||
<button class="theme-button" on:click={() => changetheme('green')}>Green</button>
|
||||
<button class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -3,4 +3,5 @@ export const loading = writable(true)
|
||||
export const addingInstance = writable(false)
|
||||
export const instances = writable([])
|
||||
export const navMargin = writable(3)
|
||||
export const currentPage = writable(1)
|
||||
export const currentPage = writable(1)
|
||||
export const themecolor = writable("purple")
|
Loading…
Reference in New Issue
Block a user