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