diff options
Diffstat (limited to 'apps/web-shared/src/components/theme-switcher.svelte')
| -rw-r--r-- | apps/web-shared/src/components/theme-switcher.svelte | 71 |
1 files changed, 52 insertions, 19 deletions
diff --git a/apps/web-shared/src/components/theme-switcher.svelte b/apps/web-shared/src/components/theme-switcher.svelte index 26ae507..d0a43b3 100644 --- a/apps/web-shared/src/components/theme-switcher.svelte +++ b/apps/web-shared/src/components/theme-switcher.svelte @@ -42,7 +42,8 @@ } </script> -<div class="ld-switch" data-theme-switcher-element> +<div class="ld-switch" + data-theme-switcher-element> <button class="reset ld-switch-btn" on:click={() => show =!show}> <span class="sr-only">{selection}</span> @@ -64,39 +65,46 @@ </svg> {:else if selection === "light"} <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>light-auto</title> + viewBox="0 0 20 20"><title>light</title> <g fill="currentColor"> - <path d="M10 14a4 4 0 1 1 3.465-6" - fill-opacity=".2" + <circle cx="10" + cy="10" + r="4" + fill-opacity=".2" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2"></circle> + <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" - stroke-width="2"></path> + stroke-width="2" + d="M10 1v1.5"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" - d="M12 18l2.5-7h1l2.5 7"></path> + d="M16.364 3.636l-1.061 1.061"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" - d="M12.714 16h4.572"></path> + d="M19 10h-1.5"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" - d="M10 1v1.5"></path> + d="M16.364 16.364l-1.061-1.061"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" - d="M16.364 3.636l-1.061 1.061"></path> + d="M10 19v-1.5"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" @@ -119,9 +127,14 @@ </svg> {:else } <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>dark-auto</title> + viewBox="0 0 20 20"><title>light-auto</title> <g fill="currentColor"> + <path d="M10 14a4 4 0 1 1 3.465-6" + fill-opacity=".2" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" @@ -134,15 +147,36 @@ stroke-linejoin="round" stroke-width="2" d="M12.714 16h4.572"></path> - <path d="M12.146 10.159A2.5 2.5 0 0 1 14.5 8.5h1a2.5 2.5 0 0 1 1.412.441 7 7 0 0 0-4.948-5.657c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a6.99 6.99 0 0 0 6.427 5.012z" - fill-opacity=".2"></path> - <path d="M16.71 8a7.015 7.015 0 0 0-4.746-4.716c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036A7.006 7.006 0 0 0 9 16.929" - fill="none" + <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" - stroke-width="2"></path> - <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path> + stroke-width="2" + d="M10 1v1.5"></path> + <path fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M16.364 3.636l-1.061 1.061"></path> + <path fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M3.636 16.364l1.061-1.061"></path> + <path fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M1 10h1.5"></path> + <path fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M3.636 3.636l1.061 1.061"></path> </g> </svg> {/if} @@ -371,7 +405,6 @@ <figure class="radius-md inner-glow" on:click={() => change("system")}> <svg id="Layer_1" - class="block radius-inherit" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="70" |