qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-09-20 11:16:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠️ Add dark/light mode.

Browse Source
This commit is contained in:
pheralb 2023-03-20 10:30:32 +00:00
parent 89a34ee595
commit 7911c6718e
5 changed files with 95 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/search.svelte
View File

@ -14,7 +14,7 @@
type="text"
{placeholder}
autocomplete="off"
class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
class="w-full rounded-md border border-neutral-300 bg-neutral-200/50 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-700/10 dark:focus:ring-neutral-700"
bind:value={searchTerm}
on:input
/>

8
src/components/svgCard.svelte
View File

@ -41,7 +41,7 @@
</script>
<div
class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
>
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
<div class="mb-3 flex flex-col items-center justify-center">
@ -57,7 +57,7 @@
on:click={() => {
copyToClipboard(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
>
<Copy size={17} />
</button>
@ -66,7 +66,7 @@
on:click={() => {
downloadSvg(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
>
<DownloadSimple size={17} />
</button>
@ -74,7 +74,7 @@
href={svgInfo.url}
title="Website"
target="_blank"
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
>
<ArrowUpRight size={17} />
</a>

63
src/components/theme.svelte Normal file
View File

@ -0,0 +1,63 @@
<script lang="ts">
import { onMount } from 'svelte';
let dark: boolean;
let hidden = true;
onMount(() => {
dark = document.documentElement.classList.contains('dark');
hidden = false;
const matcher = window.matchMedia('(prefers-color-scheme: dark)');
matcher.addEventListener('change', handleChange);
return () => matcher.removeEventListener('change', handleChange);
});
function handleChange({ matches: dark }: MediaQueryListEvent) {
if (!localStorage.theme) {
setMode(dark);
}
}
function toggle() {
setMode(!dark);
}
function setMode(value: boolean) {
dark = value;
if (dark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.theme = dark ? 'dark' : 'light';
if (window.matchMedia(`(prefers-color-scheme: ${localStorage.theme})`).matches) {
localStorage.removeItem('theme');
}
}
// Icons:
import Moon from 'phosphor-svelte/lib/Moon';
import Sun from 'phosphor-svelte/lib/Sun';
</script>
<svelte:head>
<!-- set dark mode class based on user preference / device settings (in head to avoid FOUC) -->
<script>
if (
localStorage.theme === 'dark' ||
(!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</svelte:head>
<button on:click={toggle} class="focus:outline-none" class:hidden>
<!-- moon icon -->
{#if dark}
<Sun size={18} />
{:else}
<Moon size={18} />
{/if}
</button>

42
src/routes/+layout.svelte
View File

@ -18,45 +18,53 @@
// Toaster:
import { Toaster } from 'svelte-french-toast';
// Components for all pages:
import Transition from '@/components/transition.svelte';
import Container from '@/components/container.svelte';
import Theme from '@/components/theme.svelte';
</script>
<main class="min-h-screen bg-dark font-sans text-mini text-white">
<main class="min-h-screen bg-light font-sans text-mini dark:bg-dark dark:text-white">
<nav
class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-800 md:fixed md:top-0 md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
>
<div class="items-center px-6 py-6">
<div class="mb-3 border-b border-neutral-700/40 pb-3">
<a href="/">
<div class="flex items-center space-x-2 duration-150 hover:text-neutral-300">
<h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.0.0</p>
</div>
</a>
<div class="px-6 py-6">
<div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
<div class="flex items-center justify-between">
<a href="/">
<div class="flex items-center space-x-2 duration-150 hover:text-neutral-300">
<h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.0.0</p>
</div>
</a>
<Theme />
</div>
<p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs for web</p>
</div>
<div
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-700/40 pb-3 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
>
{#each categories as category}
<a
href={`/directory/${category.toLowerCase()}`}
class={`flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${
data.pathname === `/directory/${category.toLowerCase()}` ? 'bg-neutral-700/30' : ''
data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30'
: ''
}`}
data-sveltekit-preload-data>{category}</a
>
{/each}
</div>
<div
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-700/40 pb-3 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
>
<a
href="https://github.com/pheralb/svgl#-getting-started"
target="_blank"
class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
>
<span>Submit logo</span>
<ArrowUpRight size={16} />
@ -64,7 +72,7 @@
<a
href="https://github.com/pheralb/svgl#-getting-started"
target="_blank"
class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-700/40"
>
<span>Repository</span>
<ArrowUpRight size={16} />
@ -73,7 +81,7 @@
<a
href="https://twitter.com/pheralb_"
target="_blank"
class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
class="mt-5 flex items-center space-x-2 duration-100 hover:text-white dark:text-neutral-400"
>
<Heart color="#991b1b" size={18} weight={'duotone'} />
<div class="flex items-center space-x-1">
@ -88,7 +96,7 @@
<Container>
<a href="/">
<div
class="flex items-center space-x-2 text-neutral-400 transition-colors duration-100 hover:text-white"
class="flex items-center space-x-2 duration-100 dark:text-neutral-400 dark:hover:text-white"
>
<ArrowLeft size={20} />
<span>Back to home</span>

3
tailwind.config.cjs
View File

@ -5,7 +5,8 @@ module.exports = {
theme: {
extend: {
colors: {
dark: '#161616'
dark: '#161616',
light: '#f5f5f5'
},
fontFamily: {
sans: ['General-Sans', 'sans-serif']