fb/app.craft.vin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed dark mode

Browse Source
This commit is contained in:
Felix Baumgärtner 2024-01-16 10:56:19 +01:00
parent dec9794cb6
commit e20d393f76
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Navigation.svelte
View File

@ -44,7 +44,7 @@
@apply btn-icon btn-icon-xl;
}
a:not(.active) {
@apply bg-transparent hover:bg-surface-100 hover:bg-opacity-30;
@apply bg-transparent hover:bg-opacity-30 hover:bg-surface-100 hover:dark:bg-surface-700;
}
a.active {
@apply variant-filled-primary;
@ -54,7 +54,7 @@
@apply absolute -top-6 opacity-0 font-normal pointer-events-none;
}
a:hover p {
@apply -top-9 opacity-100;
@apply -top-10 opacity-100;
}
a svg {

11
src/routes/+layout.svelte
View File

@ -5,6 +5,13 @@
import Onboarding from "../components/Onboarding.svelte";
import { page } from '$app/stores';
// persistent dark mode
import { modeUserPrefers } from '@skeletonlabs/skeleton';
import { setModeCurrent } from '@skeletonlabs/skeleton';
if ($modeUserPrefers == false) {
setModeCurrent(false);
}
import { Modal, getModalStore } from '@skeletonlabs/skeleton';
// import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
import { Drawer, getDrawerStore } from '@skeletonlabs/skeleton';
@ -26,7 +33,7 @@
<Navigation />
<Onboarding />
</main>
<Drawer position="right" bgDrawer="bg-surface-50">
<Drawer position="right">
{#if $drawerStore.id === 'edit-device'}
<div class="w-full h-full flex justify-center items-center">
<div class="text-center space-y-2">
@ -54,7 +61,7 @@
{:else}
<!-- (fallback contents) -->
{/if}
<button type="button" class="btn-icon variant-filled-surface absolute top-4 right-4 bg-surface-100" on:click={() => {drawerStore.close()}}>
<button type="button" class="btn-icon fill-dark-token bg-surface-200 dark:bg-surface-600 absolute top-4 right-4" on:click={() => {drawerStore.close()}}>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
<path d="M41 39C31.6 29.7 16.4 29.7 7 39S-2.3 63.6 7 73l183 183L7 439c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l183-183L407 473c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-183-183L441 73c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-183 183L41 39z"/>

7
src/routes/devices/+page.svelte
View File

@ -12,7 +12,6 @@
$deviceSetupShow = true;
}
import { getDrawerStore } from "@skeletonlabs/skeleton";
const drawerStore = getDrawerStore();
@ -28,12 +27,12 @@
Devices
</h1>
{#each devicesList as device}
<article class="card mb-6 p-4 relative bg-surface-50 bg-opacity-50">
<article class="card mb-6 p-4 relative">
<img class="mb-2 px-4 py-14" src="{deviceImage}" alt="Device preview">
<div class="flex justify-between items-center">
<h2 class="text-2xl">{device}</h2>
<div class="flex gap-2">
<button type="button" class="btn-icon variant-filled-surface bg-surface-50" on:click={openDeviceSettings}>
<button type="button" class="btn-icon fill-dark-token bg-surface-200 dark:bg-surface-600" on:click={openDeviceSettings}>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="4" viewBox="0 0 128 512">
<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
<path d="M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z"/>
@ -42,7 +41,7 @@
</div>
</div>
{#if online}
<div class="badge variant-glass-surface absolute top-4 right-4">
<div class="badge variant-glass-surface dark:variant-filled-surface absolute top-4 right-4">
<div class="w-2 h-2 rounded-full bg-success-500"></div>
<span>Online</span>
</div>

2
src/routes/settings/+page.svelte
View File

@ -24,7 +24,7 @@
<div class="flex flex-col gap-4">
<div class="flex gap-2">
<p>Dark Mode</p>
<LightSwitch />
<LightSwitch bgDark="bg-surface-700" />
</div>
<button type="button" class="btn variant-filled-surface w-full" on:click={resetOnboarding}>Restart Onboarding</button>