add dark mode · flo-bit.dev/atmo-tools@e40488d

+31

src/app.html

··· 6 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 7 %sveltekit.head% 8 8 9 + 10 + <script> 11 + let dark = localStorage.getItem('darkMode'); 12 + if (dark) { 13 + dark = JSON.parse(dark); 14 + } else { 15 + dark = window.matchMedia('(prefers-color-scheme: dark)').matches; 16 + } 17 + 18 + var root = document.getElementsByTagName('html')[0]; 19 + if (dark) { 20 + root.classList.add('dark'); 21 + } else { 22 + root.classList.remove('dark'); 23 + } 24 + 25 + // get accent color from local storage 26 + let accentColor = localStorage.getItem('accentColor'); 27 + if (accentColor) { 28 + accentColor = JSON.parse(accentColor); 29 + root.classList.add(accentColor); 30 + } 31 + 32 + // get base color from local storage 33 + let baseColor = localStorage.getItem('baseColor'); 34 + if (baseColor) { 35 + baseColor = JSON.parse(baseColor); 36 + root.classList.add(baseColor); 37 + } 38 + </script> 39 + 9 40 <script 10 41 is:inline 11 42 defer

+4 -2

src/routes/+layout.svelte

··· 3 3 4 4 import { onMount } from 'svelte'; 5 5 import { initClient } from '$lib/oauth'; 6 - import { Head, Toaster } from '@fuxui/base'; 6 + import { Head, ThemeToggle, Toaster } from '@fuxui/base'; 7 7 8 8 let { children } = $props(); 9 9 ··· 17 17 18 18 <Toaster /> 19 19 20 - <Head title="Search Bluesky Likes" emojiFavicon="🦋" /> 20 + <Head title="Search Bluesky Likes" emojiFavicon="🦋" /> 21 + 22 + <ThemeToggle class="fixed top-4 right-4" />

+3 -3

src/routes/+page.svelte

··· 19 19 }} 20 20 /> 21 21 22 - <div class="text-base-700 mt-36 flex text-sm flex-col gap-4"> 22 + <div class="text-base-700 dark:text-base-300 mt-36 flex text-sm flex-col gap-4"> 23 23 <div class="flex gap-2"> 24 24 Made by 25 25 <div class="flex items-center gap-2"> 26 - <a target="_blank" href="https://flo-bit.dev" class="text-accent-600 font-semibold" 26 + <a target="_blank" href="https://flo-bit.dev" class="text-accent-600 dark:text-accent-400 hover:text-accent-500 dark:hover:text-accent-500 font-semibold" 27 27 >flo-bit</a 28 28 > 29 29 30 30 <a 31 31 href="https://bsky.app/profile/flo-bit.dev" 32 32 target="_blank" 33 - class="text-accent-700 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors" 33 + class="text-accent-700 hover:text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 transition-colors" 34 34 > 35 35 <span class="sr-only">Bluesky</span> 36 36

+30 -30

src/routes/Search.svelte

··· 1 1 <script lang="ts"> 2 2 import { client, logout } from '$lib/oauth'; 3 - import { Avatar, Button, Heading, Input, Modal, Navbar, Popover, toast } from '@fuxui/base'; 3 + import { Avatar, Button, Heading, Input, Modal, Navbar, Popover, ThemeToggle, toast } from '@fuxui/base'; 4 4 import { blueskyPostToPostData, Post } from '$lib/post'; 5 5 import { Document, Charset, IndexedDB } from 'flexsearch'; 6 6 import { onMount } from 'svelte'; ··· 121 121 all.push(...response?.data.feed); 122 122 123 123 cursor = response?.data.cursor; 124 - console.log(response?.data.feed); 125 124 126 125 for (let like of response?.data.feed) { 127 - if (likesIds.has(like.post.uri)) { 128 - found = true; 129 - console.log('found like in local db, stopping getting more likes'); 130 - 131 - cursor = localStorage.getItem('cursor'); 132 - 133 - if (cursor) { 134 - console.log('cursor found in local storage, getting more likes starting from cursor'); 135 - localStorage.removeItem('cursor'); 136 - 137 - found = false; 138 - } 139 - 140 - break; 141 - } else { 126 + if (!likesIds.has(like.post.uri)) { 142 127 addLikeId(like.post.uri); 128 + continue; 143 129 } 130 + 131 + found = true; 132 + cursor = localStorage.getItem('cursor'); 133 + 134 + if (cursor) { 135 + localStorage.removeItem('cursor'); 136 + found = false; 137 + } 138 + 139 + break; 144 140 } 145 141 146 142 if (cursor && response?.data.feed.length > 0) { ··· 175 171 limit: 20 176 172 }) 177 173 .then((res) => { 178 - console.log(res); 179 174 results = res; 180 175 }); 181 176 }); ··· 213 208 {/if} 214 209 215 210 {#if results.length > 0 && search} 216 - <ul class="divide-base-100 mt-4 flex flex-col divide-y text-sm"> 211 + <ul class=" mt-4 flex flex-col divide-y text-sm"> 217 212 {#each results as result (result.doc.uri)} 218 - <div class="border-base-200 relative border-b py-2"> 213 + <div class="border-base-200 dark:border-base-900 relative border-b py-2"> 219 214 <Post 220 215 href={getLink(result.doc.uri, result.doc.author.handle)} 221 216 liked ··· 226 221 {/each} 227 222 </ul> 228 223 {:else if search} 229 - <div class="mt-4 text-sm font-semibold">No results</div> 224 + <div class="text-base-600 dark:text-base-400 mt-4 text-sm font-semibold">No results</div> 230 225 {/if} 231 226 232 227 <div class="fixed right-3 bottom-2"> 233 - <Popover class="flex flex-col items-start p-1"> 228 + <Popover class="flex flex-col items-start gap-2 p-2"> 234 229 {#snippet child({ props })} 235 230 <button {...props} class="cursor-pointer hover:opacity-90"> 236 231 <Avatar src={client.profile?.avatar} /> 237 232 </button> 238 233 {/snippet} 239 - <Button variant="ghost" onclick={() => (infoModalOpen = true)}>Info</Button> 234 + <ThemeToggle class="backdrop-blur-none absolute top-1 right-1" /> 235 + <Button class="backdrop-blur-none" variant="ghost" onclick={() => (infoModalOpen = true)} 236 + >Info</Button 237 + > 240 238 <Button 239 + class="backdrop-blur-none" 241 240 variant="ghost" 242 241 onclick={() => { 243 242 clearIndex(); ··· 245 244 getLikes(); 246 245 }}>Refresh all</Button 247 246 > 248 - <Button variant="ghost" onclick={logout}>Logout</Button> 247 + <Button class="backdrop-blur-none" variant="ghost" onclick={logout}>Logout</Button> 249 248 </Popover> 250 249 </div> 251 250 252 251 <Modal bind:open={infoModalOpen}> 253 - <div class="text-base-700 flex flex-col gap-4 text-sm"> 252 + <div class="text-base-700 dark:text-base-300 flex flex-col gap-4 text-sm"> 254 253 <div class="flex gap-2"> 255 254 Made by 256 255 <div class="flex items-center gap-2"> 257 - <a target="_blank" href="https://flo-bit.dev" class="text-accent-600 font-semibold" 256 + <a 257 + target="_blank" 258 + href="https://flo-bit.dev" 259 + class="text-accent-600 dark:text-accent-400 hover:text-accent-500 dark:hover:text-accent-500 font-semibold" 258 260 >flo-bit</a 259 261 > 260 262 261 263 <a 262 264 href="https://bsky.app/profile/flo-bit.dev" 263 265 target="_blank" 264 - class="text-accent-700 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 transition-colors" 266 + class="text-accent-700 hover:text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 transition-colors" 265 267 > 266 268 <span class="sr-only">Bluesky</span> 267 269 ··· 280 282 </div> 281 283 </div> 282 284 283 - <p> 284 - Send me a message if you have any questions, problems or feedback! 285 - </p> 285 + <p>Send me a message if you have any questions, problems or feedback!</p> 286 286 287 287 <a 288 288 href="https://github.com/flo-bit/search-bluesky-likes"

+2 -2

src/lib/post/Post.svelte

··· 69 69 <span class="sr-only">Open post</span> 70 70 71 71 <div 72 - class="bg-base-400 absolute -inset-1 -z-10 rounded-2xl opacity-0 transition-colors group-hover:opacity-5" 72 + class="bg-base-400 dark:bg-base-600 absolute -inset-1 -z-10 rounded-2xl opacity-0 transition-colors group-hover:opacity-5" 73 73 ></div> 74 74 </a> 75 75 ··· 160 160 {/if} 161 161 </div> 162 162 163 - <div class="group inline-flex items-center gap-2 text-sm"> 163 + <div class="group inline-flex items-center gap-2 text-sm text-accent-600 dark:text-accent-400"> 164 164 <svg 165 165 xmlns="http://www.w3.org/2000/svg" 166 166 viewBox="0 0 24 24"

Configure Feed

Configure Feed