Theming works

This commit is contained in:
Cuptain 2024-11-27 14:20:21 +11:00
parent cf31acdbc0
commit a412cbf9d6
3 changed files with 10 additions and 8 deletions

View File

@ -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>

View File

@ -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>

View File

@ -3,4 +3,5 @@ export const loading = writable(true)
export const addingInstance = writable(false) 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")