liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add style changer to navigation bar

Browse Source
This commit is contained in:
Spectralitree
2021-12-09 13:56:06 +01:00
parent e958699f68
commit 986f7bd0eb
2 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.svelte
View File

@@ -1,21 +1,25 @@
<script lang="ts">
import { onMount } from "svelte";
import { Router, Link, Route } from "svelte-navigator";
import { Form, Input } from 'sveltestrap';
import Toggle from 'svelte-toggle';
import Navigation from "./lib/Navigation.svelte";
import Navigation from "./lib/Navigation.svelte";
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css"
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
let styleSrc = light;
let style = localStorage.getItem("pk-style");
onMount(() => {
if (localStorage.getItem("pk-style")) setStyle(localStorage.getItem("pk-style").toLowerCase());
});
function styleEventHandler(event) {
let style = event.detail;
setStyle(style);
})
}
function setStyle(style) {
switch (style) {
case "light": styleSrc = light;
localStorage.setItem("pk-style", "light");
@@ -27,11 +31,6 @@
localStorage.setItem("pk-style", "light");
};
};
function styleSelect(e) {
style = e.target.value.toLowerCase();
setStyle(style);
};
</script>
<svelte:head>
@@ -39,16 +38,10 @@
</svelte:head>
<Router>
<Navigation/>
<Navigation on:styleChange={styleEventHandler}/>
<div>
<Route path="/">
<h2>Ooga booga</h2>
<Form>
<Input type="select" name="themes" id="themes" on:change={(e) => styleSelect(e)}>
<option>Light</option>
<option>Dark</option>
</Input>
</Form>
</Route>
</div>
</Router>