light mode #468
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,18 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="icon" href="%sveltekit.assets%/logo.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <script> | ||
|
Contributor
Author
There was a problem hiding this comment. Helps prevent a flicker when the page initially loads
Contributor
There was a problem hiding this comment. I do something similar in LayerStack/Svelte UX (little trickier with multiple dark themes). Nice work! |
||
| const modeWatcherMode = localStorage.getItem('mode-watcher-mode'); | ||
| if ( | ||
| modeWatcherMode === 'dark' || | ||
| (modeWatcherMode !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches) | ||
| ) { | ||
| document.documentElement.classList.add('dark'); | ||
| } | ||
| </script> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover"> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <script lang="ts"> | ||
|
Contributor
Author
There was a problem hiding this comment. Created a Logo.svelte for easier changing of |
||
| const { class: className }: { class?: string } = $props(); | ||
| </script> | ||
|
|
||
| <svg | ||
| class={className} | ||
| width="240" | ||
| height="240" | ||
| viewBox="0 0 240 240" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M51 120H0C29.5372 80 59.0743 40 63 0H114C110.074 40 80.5372 80 51 120Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M189 120H240C210.463 160 180.926 200 177 240H126C129.926 200 159.463 160 189 120Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M114 240H63C70.8513 160 181.149 79.9999 189 0H240C232.149 79.9999 121.851 160 114 240Z" | ||
| fill="currentColor" | ||
| /> | ||
| <path | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| d="M51 240H0C7.85135 160 118.149 79.9999 126 0H177C169.149 79.9999 58.8513 160 51 240Z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <script lang="ts"> | ||
| import IconSun from '~icons/heroicons/sun'; | ||
| import IconMoon from '~icons/heroicons/moon'; | ||
| import { resetMode, setMode } from 'mode-watcher'; | ||
| import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'; | ||
| import { Button } from '$lib/components/ui/button/index.js'; | ||
| </script> | ||
|
|
||
| <DropdownMenu.Root> | ||
| <DropdownMenu.Trigger asChild let:builder> | ||
| <Button builders={[builder]} variant="outline" size="icon"> | ||
| <IconSun | ||
| class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" | ||
| /> | ||
| <IconMoon | ||
| class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" | ||
| /> | ||
| <span class="sr-only">Toggle theme</span> | ||
| </Button> | ||
|
||
| </DropdownMenu.Trigger> | ||
| <DropdownMenu.Content align="end"> | ||
| <DropdownMenu.Item on:click={() => setMode('light')}>Light</DropdownMenu.Item> | ||
| <DropdownMenu.Item on:click={() => setMode('dark')}>Dark</DropdownMenu.Item> | ||
| <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item> | ||
| </DropdownMenu.Content> | ||
| </DropdownMenu.Root> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I ended up moving the warning colors to :root so they are shared between light and dark mode for now.