upagge/noteshare.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark mode toggl

Browse Source
This commit is contained in:
Maxime Cannoodt 2022-06-30 00:56:53 +02:00
parent 16b0c6cd03
commit 38a2c97339
9 changed files with 83 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
server/prisma/dev.db
View File

Binary file not shown.

2
webapp/src/app.html
View File

@ -21,7 +21,7 @@
}; };
</script> </script>
</head> </head>
<body class="dark h-full"> <body class="h-full">
<div class="h-full bg-white dark:dark:bg-background-dark">%sveltekit.body%</div> <div class="h-full bg-white dark:dark:bg-background-dark">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
webapp/src/lib/components/Footer.svelte
View File

@ -1,4 +1,4 @@
<hr class="border-zinc-200 dark:border-zinc-700" /> <hr class="border-zinc-200 dark:border-zinc-700 transition-colors" />
<footer <footer
class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-zinc-500 dark:text-zinc-500" class="p-8 text-center flex flex-wrap justify-center items-center gap-x-2 text-zinc-500 dark:text-zinc-500"

2
webapp/src/lib/components/MarkdownRenderer.svelte
View File

@ -26,7 +26,7 @@
id="md-box" id="md-box"
class="prose prose-zinc dark:prose-invert max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7 class="prose prose-zinc dark:prose-invert max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
prose-blockquote:first:before:content-['']" prose-blockquote:first:before:content-[''] prose-hr:transition-colors"
> >
<SvelteMarkdown <SvelteMarkdown
renderers={{ renderers={{

4
webapp/src/lib/components/navbar/NavBar.svelte
View File

@ -1,4 +1,4 @@
<div id="navbar" class="h-14 border-b border-zinc-200 dark:border-neutral-700"> <div id="navbar" class="h-14 border-b border-zinc-200 dark:border-neutral-700 transition-colors">
<div <div
id="navbar-content" id="navbar-content"
class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap" class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap"
@ -14,7 +14,7 @@
</ul> </ul>
</div> </div>
<div id="navbar-right" class="flex gap-8 flex"> <div id="navbar-right" class="flex gap-8 flex">
<ul class="flex gap-5 content-center"> <ul class="flex gap-2.5 content-center">
<slot name="right" /> <slot name="right" />
</ul> </ul>
</div> </div>

2
webapp/src/lib/components/navbar/NavBarLink.svelte
View File

@ -2,7 +2,7 @@
export let href: string = '/'; export let href: string = '/';
</script> </script>
<a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400"> <a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400 p-1.5">
<div class="h-full flex flex-col justify-center"> <div class="h-full flex flex-col justify-center">
<slot /> <slot />
</div> </div>

25
webapp/src/lib/components/navbar/ThemeToggle.svelte Normal file
View File

@ -0,0 +1,25 @@
<script lang="ts">
import DarkIcon from 'svelte-icons/io/IoMdMoon.svelte';
import LightIcon from 'svelte-icons/io/IoMdSunny.svelte';
export let dark: boolean;
function onClick() {
dark = !dark;
}
</script>
<button
on:click={onClick}
class="self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
>
<div class="h-full flex flex-col justify-center">
<span class="h-6 text-black dark:text-zinc-300">
{#if dark}
<LightIcon />
{:else}
<DarkIcon />
{/if}
</span>
</div>
</button>

4
webapp/src/lib/marked/renderers/Blockquote.svelte
View File

@ -11,7 +11,9 @@
<slot /> <slot />
</Callout> </Callout>
{:else} {:else}
<p class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4 dark:border-zinc-600"> <p
class="border border-l-4 ml-4 prose-p:my-2 prose-p:mx-4 dark:border-zinc-600 transition-colors"
>
<slot /> <slot />
</p> </p>
{/if} {/if}

72
webapp/src/routes/__layout.svelte
View File

@ -1,36 +1,62 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/env';
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import NavBar from '$lib/components/navbar/NavBar.svelte'; import NavBar from '$lib/components/navbar/NavBar.svelte';
import NavBarLink from '$lib/components/navbar/NavBarLink.svelte'; import NavBarLink from '$lib/components/navbar/NavBarLink.svelte';
import ThemeToggle from '$lib/components/navbar/ThemeToggle.svelte';
import LogoGithub from 'svelte-icons/io/IoLogoGithub.svelte'; import LogoGithub from 'svelte-icons/io/IoLogoGithub.svelte';
import '../app.css'; import '../app.css';
let dark: boolean;
let darkTheme = 'dark';
$: getTheme();
$: {
if (browser) {
console.log('saving dark mode');
window.localStorage.setItem('isDarkMode', String(dark));
}
}
async function getTheme() {
if (browser) {
const savedMode = window.localStorage.getItem('isDarkMode');
dark = savedMode ? savedMode === 'true' : false;
window.localStorage.setItem('isDarkMode', String(dark));
}
}
</script> </script>
<div class="bg-white dark:bg-background-dark min-h-full"> <div class=" h-full {dark !== undefined ? '' : 'hidden'} {dark ? darkTheme : ''}">
<div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark"> <div class="bg-white dark:bg-background-dark min-h-full transition-colors">
<div class="top-0 left-0 right-0"> <div class="z-50 sticky top-0 w-full bg-white dark:bg-background-dark transition-colors">
<NavBar> <div class="top-0 left-0 right-0">
<svelte:fragment slot="left"> <NavBar>
<NavBarLink href="/about">About</NavBarLink> <svelte:fragment slot="left">
<NavBarLink href="/install">Get plugin</NavBarLink> <NavBarLink href="/about">About</NavBarLink>
</svelte:fragment> <NavBarLink href="/install">Get plugin</NavBarLink>
<svelte:fragment slot="right"> </svelte:fragment>
<NavBarLink href="https://obsidian.md" <svelte:fragment slot="right">
><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink <NavBarLink href="https://obsidian.md"
> ><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing"> >
<span class="h-7 text-black dark:text-zinc-300"><LogoGithub /></span> <NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
</NavBarLink> <span class="h-6 text-black dark:text-zinc-300"><LogoGithub /></span>
</svelte:fragment> </NavBarLink>
></NavBar <ThemeToggle bind:dark />
> </svelte:fragment>
></NavBar
>
</div>
</div> </div>
</div>
<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 "> <div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 ">
<slot /> <slot />
<div class="mt-12"> <div class="mt-12">
<Footer /> <Footer />
</div>
</div> </div>
</div> </div>
</div> </div>