A focused Docker Compose management web application.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: theme selector

Brooke a64691e9 464aabd4

+48 -11
+10
packages/panel/src/lib/component/Tabs.svelte
··· 90 90 </div> 91 91 92 92 <style lang="scss"> 93 + // Modify h2 of all child components 94 + * :global(h2) { 95 + margin-bottom: 5px; 96 + font-size: 16px; 97 + 98 + &:not(:first-child) { 99 + margin-top: 15px; 100 + } 101 + } 102 + 93 103 .container { 94 104 background-color: var(--surface0); 95 105 border-radius: 10px;
+4
packages/panel/src/lib/style.scss
··· 145 145 } 146 146 } 147 147 148 + *:has(input[type="radio"]) > label { 149 + display: inline-block; 150 + } 151 + 148 152 @media (min-width: 426px) { 149 153 .island { 150 154 background-color: var(--surface0);
-10
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
··· 28 28 {/snippet} 29 29 30 30 <style lang="scss"> 31 - // Modify h2 of all child components 32 - * :global(h2) { 33 - margin-bottom: 5px; 34 - font-size: 16px; 35 - 36 - &:not(:first-child) { 37 - margin-top: 15px; 38 - } 39 - } 40 - 41 31 .error { 42 32 color: var(--red); 43 33 position: absolute;
+29 -1
packages/panel/src/routes/(authenticated)/settings/+page.svelte
··· 5 5 import Fa from "svelte-fa"; 6 6 import { api } from "$lib"; 7 7 8 + const THEME_KEY = "luminary-theme"; 9 + 8 10 let { data } = $props(); 11 + 12 + let theme = $state(localStorage.getItem(THEME_KEY) ?? "macchiato"); 13 + $effect(() => { 14 + localStorage.setItem(THEME_KEY, theme); 15 + document.documentElement.setAttribute("class", theme); 16 + }); 9 17 </script> 10 18 11 19 <div class="flexc gap-10"> ··· 27 35 </div> 28 36 29 37 {#snippet appearance()} 30 - <div class="flexc gap-10">COMING SOON</div> 38 + <div class="flexc gap-10"> 39 + <div class="fit"> 40 + <h2>Theme</h2> 41 + <div> 42 + <input type="radio" id="theme-macchiato" name="theme" value="macchiato" bind:group={theme} /> 43 + <label for="theme-macchiato">🌺 Macchiato</label> 44 + </div> 45 + <div> 46 + <input type="radio" id="theme-frappe" name="theme" value="frappe" bind:group={theme} /> 47 + <label for="theme-frappe">🪴 Frappé</label> 48 + </div> 49 + <div> 50 + <input type="radio" id="theme-mocha" name="theme" value="mocha" bind:group={theme} /> 51 + <label for="theme-mocha">🌿 Mocha</label> 52 + </div> 53 + <div> 54 + <input type="radio" id="theme-latte" name="theme" value="latte" bind:group={theme} /> 55 + <label for="theme-latte">🌻 Latte</label> 56 + </div> 57 + </div> 58 + </div> 31 59 {/snippet}
+5
packages/panel/src/routes/+layout.svelte
··· 16 16 import Toaster from "./Toaster.svelte"; 17 17 import Dialog from "./Dialog.svelte"; 18 18 import { AnimationFrames } from "runed"; 19 + import { onMount } from "svelte"; 19 20 20 21 let { children } = $props(); 21 22 22 23 new AnimationFrames(() => { 23 24 windowWidth = window.innerWidth; 25 + }); 26 + 27 + onMount(() => { 28 + document.documentElement.setAttribute("class", localStorage.getItem("luminary-theme") ?? "macchiato"); 24 29 }); 25 30 </script> 26 31